IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Files: Templates: added TemplateAccess block

Browse Source
This commit is contained in:
Nikita Gopienko 2024-05-15 16:39:07 +03:00
parent 738eb8f796
commit 5d40081965
7 changed files with 221 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js
View File

@ -38,14 +38,13 @@ const ChangeRoomOwner = ({
roomOwner,
onOwnerChange,
currentColorScheme,
isTemplate,
}) => {
const userName = roomOwner.displayName ?? roomOwner.label;
return (
<Styled.ChangeRoomOwner isTemplate={isTemplate}>
<Styled.ChangeRoomOwner>
<Text className="change-owner-label" fontWeight={600} fontSize="13px">
{isTemplate ? `${t("Files:AccessToTemplate")}:` : t("Files:RoomOwner")}
{t("Files:RoomOwner")}
</Text>
<div className="change-owner-display-wrapper">
@ -74,10 +73,10 @@ const ChangeRoomOwner = ({
type="action"
fontWeight={600}
fontSize="13px"
color={isTemplate ? null : currentColorScheme.main?.accent}
color={currentColorScheme.main?.accent}
onClick={onOwnerChange}
>
{isTemplate ? t("Files:AccessSettings") : t("Common:ChangeButton")}
{t("Common:ChangeButton")}
</Link>
</div>
</Styled.ChangeRoomOwner>

2
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.styled.js
View File

@ -46,7 +46,7 @@ export const ChangeRoomOwner = styled.div`
}
.change-owner-display-wrapper {
display: ${(props) => (props.isTemplate ? "flex" : "block")};
display: block;
align-items: center;
.change-owner-link {

4
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js
View File

@ -96,12 +96,12 @@ const TagInput = ({
if (text.trim().length > 0) {
openDropdown();
}
onFocus();
onFocus && onFocus();
};
const handleBlur = () => {
closeDropdown();
onBlur();
onBlur && onBlur();
};
const handleKeyDown = (event) => {

9
packages/client/src/components/dialogs/CreateRoomTemplate/index.js
View File

@ -39,7 +39,7 @@ import InputParam from "../CreateEditRoomDialog/sub-components/Params/InputParam
import TagInput from "../CreateEditRoomDialog/sub-components/TagInput";
import TagHandler from "../CreateEditRoomDialog/handlers/TagHandler";
import { ImageEditor } from "@docspace/shared/components/image-editor";
import ChangeRoomOwner from "../CreateEditRoomDialog/sub-components/ChangeRoomOwner";
import TemplateAccess from "./sub-components/TemplateAccess";
import PreviewTile from "@docspace/shared/components/image-editor/PreviewTile";
import { getRoomTypeTitleTranslation } from "../CreateEditRoomDialog/data";
@ -206,10 +206,9 @@ const CreateRoomTemplate = (props) => {
// isDisabled={isDisabled}
/>
<ChangeRoomOwner
<TemplateAccess
roomOwner={createdBy}
isTemplate
onOwnerChange={onOpenAccessSettings}
onOpenAccessSettings={onOpenAccessSettings}
/>
<div>
@ -250,7 +249,7 @@ const CreateRoomTemplate = (props) => {
<Button
id="create-room-template-modal_submit"
tabIndex={5}
label={t("Files:CreateTemplate")}
label={isEdit ? t("Common:SaveButton") : t("Files:CreateTemplate")}
size="normal"
primary
scale

122
packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.js Normal file
View File

@ -0,0 +1,122 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { withTranslation } from "react-i18next";
import { Avatar } from "@docspace/shared/components/avatar";
import { Text } from "@docspace/shared/components/text";
import { Link } from "@docspace/shared/components/link";
import PublicRoomBar from "@docspace/shared/components/public-room-bar";
import * as Styled from "./TemplateAccess.styled";
const MAX_AVATARS_COUNT = 3;
const TemplateAccess = ({ t, roomOwner, onOpenAccessSettings }) => {
const userName = roomOwner.displayName ?? roomOwner.label;
const usersList = [{}, {}, {}];
const groupsList = [{}, {}, {}];
const avatarList = [];
const maxAvatarsCount =
usersList.length >= MAX_AVATARS_COUNT
? MAX_AVATARS_COUNT
: usersList.length;
let index = 0;
while (avatarList.length !== maxAvatarsCount) {
const user = usersList[index];
avatarList.push(
<Avatar
className="template-access-avatar"
size="min"
role={""}
isDefaultSource={roomOwner.hasAvatar}
source={roomOwner.avatarSmall ?? roomOwner.avatar}
userName={userName}
/>,
);
index++;
}
const isAvailableToEveryone = true;
return (
<Styled.TemplateAccess>
<Text className="template-access-label" fontWeight={600} fontSize="13px">
{`${t("Files:AccessToTemplate")}:`}
</Text>
{isAvailableToEveryone ? (
<PublicRoomBar
headerText={t("Files:TemplateAvailable")}
bodyText={
<>
<div className="template-access-description">
{t("Files:TemplateAvailableDescription")}
</div>
<Link
className="template-access-link"
isHovered
type="action"
fontWeight={600}
fontSize="13px"
onClick={onOpenAccessSettings}
>
{t("Files:AccessSettings")}
</Link>
</>
}
/>
) : (
<div className="template-access-wrapper">
<div className="template-access-container">
<div className="template-access-avatar-container">
<div className="access-avatar-container">{avatarList}</div>
<Text fontWeight={600} fontSize="14px">
{t("Common:MeLabel")}{" "}
{`and ${usersList.length} User and ${groupsList.length} Groups`}
</Text>
</div>
</div>
<Link
className="template-access-link"
isHovered
type="action"
fontWeight={600}
fontSize="13px"
onClick={onOpenAccessSettings}
>
{t("Files:AccessSettings")}
</Link>
</div>
)}
</Styled.TemplateAccess>
);
};
export default withTranslation(["Common", "Files"])(TemplateAccess);

87
packages/client/src/components/dialogs/CreateRoomTemplate/sub-components/TemplateAccess.styled.js Normal file
View File

@ -0,0 +1,87 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { Base } from "@docspace/shared/themes";
import styled from "styled-components";
export const TemplateAccess = styled.div`
.template-access {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
.template-access-name {
display: flex;
align-items: center;
gap: 4px;
.me-label {
color: ${({ theme }) => theme.text.disableColor};
}
}
}
.template-access-description {
margin-bottom: 8px;
}
.template-access-wrapper {
display: flex;
align-items: center;
.template-access-link {
margin-left: auto;
}
}
.access-avatar-container {
display: flex;
.template-access-avatar:not(:first-child) {
margin-left: -8px;
z-index: 2;
}
.template-access-avatar:last-child {
z-index: 1;
}
.template-access-avatar {
border: 1px solid rgb(255, 255, 255);
border-radius: 50%;
z-index: 3;
}
}
.template-access-avatar-container {
display: flex;
align-items: center;
gap: 8px;
}
`;
TemplateAccess.defaultProps = { theme: Base };

2
packages/client/src/store/DialogsStore.js
View File

@ -116,7 +116,7 @@ class DialogsStore {
shareFolderDialogVisible = false;
cancelUploadDialogVisible = false;
createRoomTemplateDialogVisible = false;
templateAccessSettingsVisible = true;
templateAccessSettingsVisible = false;
templateEventVisible = false;
selectFileFormRoomFilterParam = FilesSelectorFilterTypes.DOCX;