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

Fixed after merge.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2024-05-02 11:59:31 +03:00
parent 0dfab5563b
commit b5debea181
10 changed files with 220 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/public/locales/en/CreateEditRoomDialog.json
View File

@ -54,6 +54,6 @@
"RestrictCopyAndDownload": "Restrict copy and download",
"RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
"AddWatermarksToDocuments": "Add watermarks to documents",
"AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced."
"AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced.",
"FilesOlderThan": "Files older than:"
}

26
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js
View File

@ -1,3 +1,29 @@
// (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 styled from "styled-components";
const StyledWatermark = styled.div`

34
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/Text.js
View File

@ -1,10 +1,36 @@
// (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 { useState } from "react";
import { useTranslation } from "react-i18next";
import TextInput from "@docspace/components/text-input";
import ComboBox from "@docspace/components/combobox";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
import { TextInput } from "@docspace/shared/components/text-input";
import { ComboBox } from "@docspace/shared/components/combobox";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { StyledWatermark } from "./StyledComponent";
const options = (t) => [

37
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
View File

@ -1,9 +1,35 @@
// (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 { useState } from "react";
import { useTranslation } from "react-i18next";
import TabContainer from "@docspace/components/tabs-container";
import TextInput from "@docspace/components/text-input";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
import { TabsContainer } from "@docspace/shared/components/tabs-container";
import { TextInput } from "@docspace/shared/components/text-input";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { StyledWatermark } from "./StyledComponent";
@ -58,10 +84,9 @@ const ViewerInfoWatermark = () => {
<Text className="watermark-title" fontWeight={600} lineHeight="20px">
{t("WatermarkElements")}
</Text>
<TabContainer
<TabsContainer
elements={dataTabs}
onSelect={onSelect}
withBodyScroll={false}
multiple
withBorder
/>

28
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
View File

@ -1,7 +1,33 @@
// (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 { useState } from "react";
import { useTranslation } from "react-i18next";
import RadioButtonGroup from "@docspace/components/radio-button-group";
import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
import TextWatermark from "./Text";
import ViewerInfoWatermark from "./ViewerInfo";

25
packages/shared/components/tabs-container/TabsContainer.styled.tsx
View File

@ -37,16 +37,35 @@ const StyledScrollbar = styled(Scrollbar)`
StyledScrollbar.defaultProps = { theme: Base };
const NavItem = styled.div`
const NavItem = styled.div<{
multiple?: boolean;
}>`
position: relative;
white-space: nowrap;
display: flex;
${(props) =>
props.multiple &&
css`
gap: 8px;
flex-wrap: wrap;
`};
`;
NavItem.defaultProps = { theme: Base };
const Label = styled.div<{ isDisabled?: boolean; selected?: boolean }>`
const Label = styled.div<{
isDisabled?: boolean;
selected?: boolean;
multiple?: boolean;
withBorder?: boolean;
}>`
height: ${(props) => props.theme.tabsContainer.label.height};
border-radius: ${(props) => props.theme.tabsContainer.label.borderRadius};
${(props) =>
props.withBorder &&
css`
border: ${props.theme.tabsContainer.label.border};
`}
min-width: ${(props) => props.theme.tabsContainer.label.minWidth};
width: ${(props) => props.theme.tabsContainer.label.width};
@ -67,7 +86,7 @@ const Label = styled.div<{ isDisabled?: boolean; selected?: boolean }>`
${(props) =>
props.selected
? css`
cursor: default;
cursor: ${!props.multiple ? "default" : "pointer"};
background-color: ${props.theme.tabsContainer.label.backgroundColor};
.title_style {
color: ${props.theme.tabsContainer.label.title.color};

105
packages/shared/components/tabs-container/TabsContainer.tsx
View File

@ -40,12 +40,15 @@ const TabsContainer = ({
isDisabled,
onSelect,
selectedItem = 0,
multiple = false,
withBorder = false,
}: TabsContainerProps) => {
const arrayRefs = React.useRef<HTMLDivElement[]>([]);
const scrollRef = React.useRef<HTMLDivElement | null>(null);
const selected = multiple ? [selectedItem] : selectedItem;
const [state, setState] = React.useState({
activeTab: selectedItem,
activeTab: selected,
onScrollHide: true,
});
@ -121,11 +124,36 @@ const TabsContainer = ({
};
const titleClick = (index: number, item: TElement, ref: HTMLDivElement) => {
if (state.activeTab !== index) {
setState((s) => ({ ...s, activeTab: index }));
const { activeTab } = state;
const setSelection = () => {
const newItem = { ...item };
delete newItem.content;
onSelect?.(newItem);
};
if (multiple) {
const indexOperation = () => {
const tempArray = [...activeTab];
if (activeTab.indexOf(index) !== -1) {
return activeTab.filter((item) => item !== index);
}
tempArray.push(index);
return tempArray;
};
const updatedActiveTab = indexOperation();
setState((s) => ({ ...s, activeTab: updatedActiveTab }));
setSelection();
return;
}
if (activeTab !== index) {
setState((s) => ({ ...s, activeTab: index }));
setSelection();
setTabPosition(index, ref);
}
@ -167,36 +195,51 @@ const TabsContainer = ({
setState((s) => ({ ...s, onScrollHide: true }));
};
const content = (
<NavItem className="className_items" multiple={multiple}>
{elements.map((item, index) => {
const isSelected = multiple
? state.activeTab.indexOf(index) !== -1
: state.activeTab === index;
return (
<StyledLabelTheme
id={item.id}
onMouseMove={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={(ref) => {
if (ref) arrayRefs.current.push(ref);
}}
onClick={() => onClick(index, item)}
key={item.key}
selected={isSelected}
isDisabled={isDisabled}
multiple={multiple}
withBorder={withBorder}
>
<Text fontWeight={600} className="title_style" fontSize="13px">
{item.title}
</Text>
</StyledLabelTheme>
);
})}
</NavItem>
);
return (
<>
<StyledScrollbar
autoHide={state.onScrollHide}
className="scrollbar"
// @ts-expect-error error from custom scrollbar
ref={scrollRef}
>
<NavItem className="className_items">
{elements.map((item, index) => (
<StyledLabelTheme
id={item.id}
onMouseMove={onMouseEnter}
onMouseLeave={onMouseLeave}
ref={(ref) => {
if (ref) arrayRefs.current.push(ref);
}}
onClick={() => onClick(index, item)}
key={item.key}
selected={state.activeTab === index}
isDisabled={isDisabled}
>
<Text fontWeight={600} className="title_style" fontSize="13px">
{item.title}
</Text>
</StyledLabelTheme>
))}
</NavItem>
</StyledScrollbar>
<div className="tabs_body">{elements[state.activeTab].content}</div>
{!multiple ? (
<StyledScrollbar
autoHide={state.onScrollHide}
className="scrollbar"
// @ts-expect-error error from custom scrollbar
ref={scrollRef}
>
{content}
</StyledScrollbar>
) : (
content
)}
<div className="tabs_body">{elements[state.activeTab]?.content}</div>
</>
);
};

6
packages/shared/components/tabs-container/TabsContainer.types.ts
View File

@ -40,4 +40,10 @@ export interface TabsContainerProps {
onSelect: (element: TElement) => void;
/** Selected title of tabs container */
selectedItem: number;
/** Enables multiple select */
multiple?: boolean;
/** Enables Body scroll */
withBodyScroll?: boolean;
/** Indicates that component contain border */
withBorder?: boolean;
}

1
packages/shared/themes/base.ts
View File

@ -1039,6 +1039,7 @@ export const getBaseTheme = () => {
backgroundColor: blueLightMid,
hoverBackgroundColor: grayLight,
disableBackgroundColor: grayLightMid,
border: `1px solid ${grayLightMid}`,
title: {
margin: "7px 15px 7px 15px",

4
packages/shared/themes/dark.ts
View File

@ -61,7 +61,6 @@ const {
strongBlue,
darkRed,
darkDividersColor,
darkErrorStatus,
charlestonGreen,
outerSpace,
@ -1009,7 +1008,8 @@ const Dark: TTheme = {
backgroundColor: "#d6d6d6",
hoverBackgroundColor: "#3D3D3D",
disableBackgroundColor: "#292929",
border: `1px solid ${darkDividersColor}`,
border: "1px solid #242424",
title: {
margin: "7px 15px 7px 15px",
overflow: "hidden",