From 0b87ee61f8f39b2a4d539b102cb971a313adff80 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Fri, 2 Aug 2024 15:35:28 +0500 Subject: [PATCH 01/63] Web: Client: Profile: File management. added toggler for display file extension --- .../public/locales/en/FilesSettings.json | 1 + .../sub-components/file-management/index.js | 23 +++++++++++++++++++ .../client/src/store/FilesSettingsStore.js | 6 +++++ 3 files changed, 30 insertions(+) diff --git a/packages/client/public/locales/en/FilesSettings.json b/packages/client/public/locales/en/FilesSettings.json index 2eceec68b1..6505b3071a 100644 --- a/packages/client/public/locales/en/FilesSettings.json +++ b/packages/client/public/locales/en/FilesSettings.json @@ -4,6 +4,7 @@ "DisplayNotification": "Display notification when moving items to Trash", "DisplayRecent": "Display Recent", "DisplayTemplates": "Display Templates", + "DisplayFileExtension": "Display file extension next to file name", "IntermediateVersion": "Keep all saved intermediate versions", "KeepIntermediateVersion": "Keep intermediate versions when editing", "OpenSameTab": "Open {{organizationName}} editor in same tab", diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js index e96aac596a..4362dd906e 100644 --- a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js +++ b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js @@ -64,6 +64,9 @@ const FileManagement = ({ openEditorInSameTab, setOpenEditorInSameTab, + + displayFileExtension, + setDisplayFileExtension, }) => { const { t, ready } = useTranslation(["FilesSettings", "Common"]); @@ -90,6 +93,10 @@ const FileManagement = ({ setKeepNewFileName(!keepNewFileName); }, [setKeepNewFileName, keepNewFileName]); + const onChangeDisplayFileExtension = React.useCallback(() => { + setDisplayFileExtension(!displayFileExtension); + }, [setDisplayFileExtension, displayFileExtension]); + const onChangeOpenEditorInSameTab = React.useCallback(() => { setOpenEditorInSameTab(!openEditorInSameTab); }, [setOpenEditorInSameTab, openEditorInSameTab]); @@ -174,6 +181,16 @@ const FileManagement = ({ )} + {!isVisitor && ( +
+ + {t("DisplayFileExtension")} +
+ )} {/* @@ -256,6 +273,9 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => { openEditorInSameTab, setOpenEditorInSameTab, + + displayFileExtension, + setDisplayFileExtension, } = filesSettingsStore; const { myFolderId, commonFolderId } = treeFoldersStore; @@ -290,5 +310,8 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => { openEditorInSameTab, setOpenEditorInSameTab, + + displayFileExtension, + setDisplayFileExtension, }; })(observer(FileManagement)); diff --git a/packages/client/src/store/FilesSettingsStore.js b/packages/client/src/store/FilesSettingsStore.js index f13fb75904..c94e99d200 100644 --- a/packages/client/src/store/FilesSettingsStore.js +++ b/packages/client/src/store/FilesSettingsStore.js @@ -71,6 +71,7 @@ class FilesSettingsStore { chunkUploadSize = 1024 * 1023; // 1024 * 1023; //~0.999mb maxUploadThreadCount = 15; maxUploadFilesCount = 5; + displayFileExtension = null; settingsIsLoaded = false; @@ -214,6 +215,11 @@ class FilesSettingsStore { .then((res) => this.setFilesSetting("keepNewFileName", res)); }; + setDisplayFileExtension = (data) => { + this.setFilesSetting("displayFileExtension", data ? true : false); + console.log("need backend"); + }; + setOpenEditorInSameTab = (data) => { api.files .changeOpenEditorInSameTab(data) From 23f4c31993c1c79e2bec6e084e899ccd996009e4 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Fri, 2 Aug 2024 19:36:13 +0500 Subject: [PATCH 02/63] Web: Shared: API: added enableDisplayFileExtension --- packages/client/src/store/FilesSettingsStore.js | 5 +++-- packages/shared/api/files/index.ts | 11 +++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/client/src/store/FilesSettingsStore.js b/packages/client/src/store/FilesSettingsStore.js index c94e99d200..2490902092 100644 --- a/packages/client/src/store/FilesSettingsStore.js +++ b/packages/client/src/store/FilesSettingsStore.js @@ -216,8 +216,9 @@ class FilesSettingsStore { }; setDisplayFileExtension = (data) => { - this.setFilesSetting("displayFileExtension", data ? true : false); - console.log("need backend"); + api.files + .enableDisplayFileExtension(data) + .then((res) => this.setFilesSetting("displayFileExtension", res)); }; setOpenEditorInSameTab = (data) => { diff --git a/packages/shared/api/files/index.ts b/packages/shared/api/files/index.ts index 0b47a253ca..55b2c1b9ce 100644 --- a/packages/shared/api/files/index.ts +++ b/packages/shared/api/files/index.ts @@ -931,6 +931,17 @@ export async function changeKeepNewFileName(val: boolean) { return res; } +export async function enableDisplayFileExtension(val: boolean) { + const data = { set: val }; + const res = (await request({ + method: "put", + url: "files/displayfileextension", + data, + })) as boolean; + + return res; +} + export async function changeOpenEditorInSameTab(val: boolean) { const data = { set: val }; const res = (await request({ From 4681d18d284f1857e3c40439268dd0fb7da24d03 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Tue, 6 Aug 2024 11:08:36 +0500 Subject: [PATCH 03/63] Web: Client: Home: Section: added file extension --- packages/client/src/HOCs/withContent.js | 3 +++ .../src/pages/Home/Section/Body/TableView/StyledTable.js | 4 ++++ .../Section/Body/TableView/sub-components/FileNameCell.js | 6 +++++- .../pages/Home/Section/Body/TilesView/FilesTileContent.js | 8 ++++++++ packages/shared/themes/base.ts | 1 + packages/shared/themes/dark.ts | 1 + 6 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/client/src/HOCs/withContent.js b/packages/client/src/HOCs/withContent.js index 46fd55b691..9259893c31 100644 --- a/packages/client/src/HOCs/withContent.js +++ b/packages/client/src/HOCs/withContent.js @@ -151,6 +151,7 @@ export default function withContent(WrappedContent) { uploadDataStore, publicRoomStore, userStore, + filesSettingsStore, }, { item }, ) => { @@ -170,6 +171,7 @@ export default function withContent(WrappedContent) { } = filesStore; const { isPublicRoom, publicRoomKey } = publicRoomStore; + const { displayFileExtension } = filesSettingsStore; const { clearActiveOperations, fileCopyAs } = uploadDataStore; const { isRecycleBinFolder, isPrivacyFolder, isArchiveFolder } = @@ -218,6 +220,7 @@ export default function withContent(WrappedContent) { setCreatedItem, isPublicRoom, publicRoomKey, + displayFileExtension, }; }, )(observer(WithContent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index e1d424da6b..b1e5a8a0f0 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -203,6 +203,10 @@ const StyledTableRow = styled(TableRow)` padding-inline: 0 8px; } + .item-file-exst { + color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; + } + ${(props) => props.isHighlight && css` diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js index d06ef91e2f..66d9fcb2f1 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js @@ -40,8 +40,9 @@ const FileNameCell = ({ theme, t, inProgress, + displayFileExtension, }) => { - const { title, viewAccessibility } = item; + const { title, viewAccessibility, fileExst } = item; const onChange = (e) => { onContentSelect && onContentSelect(e.target.checked, item); @@ -87,6 +88,9 @@ const FileNameCell = ({ dir="auto" > {titleWithoutExt} + {displayFileExtension && ( + {fileExst} + )} ); diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js index 8c61397e51..c542b569ba 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js @@ -92,6 +92,10 @@ const SimpleFilesTileContent = styled(TileContent)` -webkit-box-orient: vertical; } + .item-file-exst { + color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; + } + ${({ isRooms }) => isRooms && css` @@ -117,6 +121,7 @@ const FilesTileContent = ({ theme, isRooms, currentDeviceType, + displayFileExtension, }) => { const { fileExst, title, viewAccessibility } = item; @@ -142,6 +147,9 @@ const FilesTileContent = ({ isTextOverflow > {titleWithoutExt} + {displayFileExtension && ( + {fileExst} + )} diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 1f8f3105b3..1c5a763ba3 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2292,6 +2292,7 @@ export const getBaseTheme = () => { linkColor: black, textColor: gray, }, + fileExstColor: "#a3a9ae", row: { checkboxChecked: `linear-gradient(to right, #f3f4f4 24px, ${grayLightMid} 24px)`, diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index b60d6f0123..fabb4440bb 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -2264,6 +2264,7 @@ const Dark: TTheme = { linkColor: grayMaxLight, textColor: "#858585", }, + fileExstColor: "#a3a9ae", row: { checkboxChecked: `linear-gradient(to right, ${black} 24px, #474747 24px)`, From 2bc02522a57b50a815a56f059641e031a2fae901 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Fri, 9 Aug 2024 16:31:57 +0500 Subject: [PATCH 04/63] Web: Client: Home: Section: added file extension for row view and fix tile view --- .../Section/Body/RowsView/FilesRowContent.js | 54 ++++++++++++++----- .../Section/Body/TableView/StyledTable.js | 6 ++- .../Home/Section/Body/TableView/TableRow.js | 2 + .../TableView/sub-components/FileNameCell.js | 15 ++++-- .../Body/TilesView/FilesTileContent.js | 26 +++++---- 5 files changed, 75 insertions(+), 28 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js index d543b9b381..52e890ad59 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js @@ -64,6 +64,10 @@ const SimpleFilesRowContent = styled(RowContent)` } } + .rowMainContainer { + margin-inline-end: ${(props) => props.displayFileExtension && "0px"}; + } + .row_update-text { overflow: hidden; text-overflow: ellipsis; @@ -91,7 +95,7 @@ const SimpleFilesRowContent = styled(RowContent)` .row-content-link { padding-block: 12px 0; - padding-inline: 0 12px; + padding-inline: ${(props) => !props.displayFileExtension && "0px 12px"}; margin-top: ${(props) => props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"}; } @@ -99,12 +103,17 @@ const SimpleFilesRowContent = styled(RowContent)` @media ${tablet} { .row-main-container-wrapper { display: flex; - justify-content: space-between; + align-items: center; max-width: inherit; } + .mainIcons { + margin-bottom: ${(props) => props.displayFileExtension && "4px"}; + } + .badges { flex-direction: row-reverse; + padding-inline: ${(props) => props.displayFileExtension && "0px 12px"}; } .tablet-badge { @@ -143,6 +152,10 @@ const SimpleFilesRowContent = styled(RowContent)` margin: 0; } + .mainIcons { + margin-bottom: ${(props) => props.displayFileExtension && "0px"}; + } + .can-convert { margin: 0 1px; } @@ -173,6 +186,7 @@ const FilesRowContent = ({ isDefaultRoomsQuotaSet, isStatisticsAvailable, showStorageInfo, + displayFileExtension, }) => { const { contentLength, @@ -232,20 +246,21 @@ const FilesRowContent = ({ } }; - const additionalComponent = () => { - if (isRooms) return getRoomTypeName(item.roomType, t); + // const additionalComponent = () => { + // if (isRooms) return getRoomTypeName(item.roomType, t); - if (!fileExst && !contentLength && !providerKey) - return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t( - "Translations:Files", - )}`; + // if (!fileExst && !contentLength && !providerKey) + // return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t( + // "Translations:Files", + // )}`; - if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`; + // if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`; - return ""; - }; + // return ""; + // }; + + // const additionalInfo = additionalComponent(); - const additionalInfo = additionalComponent(); const mainInfo = contentComponent(); return ( @@ -255,6 +270,7 @@ const FilesRowContent = ({ isMobile={!isTablet()} isFile={fileExst || contentLength} sideColor={theme.filesSection.rowView.sideColor} + displayFileExtension={displayFileExtension} > {badgesComponent} {!isRoom && !isRooms && quickButtons} + {displayFileExtension && ( + + {fileExst} + + )} {mainInfo && ( @@ -287,7 +313,7 @@ const FilesRowContent = ({ )} - {additionalInfo && ( + {/* {additionalInfo && ( {additionalInfo} - )} + )} */} ); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index bf06ea6306..f1d918d43a 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -204,11 +204,13 @@ const StyledTableRow = styled(TableRow)` .item-file-name { padding-block: 14px; - padding-inline: 0 8px; + padding-inline: ${(props) => + props.displayFileExtension ? "0px" : "0 8px"}; } .item-file-exst { - color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; + padding-inline: 0 8px; + margin-bottom: 1px; } ${(props) => diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js index 0b00b54524..4798a552db 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -72,6 +72,7 @@ const FilesTableRow = (props) => { badgeUrl, isRecentTab, canDrag, + displayFileExtension, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -174,6 +175,7 @@ const FilesTableRow = (props) => { contextOptions={item.contextOptions} getContextModel={getContextModel} showHotkeyBorder={showHotkeyBorder} + displayFileExtension={displayFileExtension} title={ item.isFolder ? t("Translations:TitleShowFolderActions") diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js index 66d9fcb2f1..c4dd49fe25 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js @@ -26,6 +26,7 @@ import React from "react"; import { Link } from "@docspace/shared/components/link"; +import { Text } from "@docspace/shared/components/text"; import { Checkbox } from "@docspace/shared/components/checkbox"; import { TableCell } from "@docspace/shared/components/table"; import { Loader } from "@docspace/shared/components/loader"; @@ -88,10 +89,18 @@ const FileNameCell = ({ dir="auto" > {titleWithoutExt} - {displayFileExtension && ( - {fileExst} - )} + + {displayFileExtension && ( + + {fileExst} + + )} ); }; diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js index c542b569ba..f5ff0ca001 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js @@ -30,6 +30,7 @@ import { withTranslation } from "react-i18next"; import styled, { css } from "styled-components"; import { Link } from "@docspace/shared/components/link"; +import { Text } from "@docspace/shared/components/text"; import TileContent from "./sub-components/TileContent"; import withContent from "../../../../../HOCs/withContent"; @@ -42,7 +43,8 @@ const SimpleFilesTileContent = styled(TileContent)` .row-main-container { height: auto; max-width: 100%; - align-self: flex-end; + display: flex; + align-items: flex-end; } .main-icons { @@ -84,16 +86,15 @@ const SimpleFilesTileContent = styled(TileContent)` .item-file-name { max-height: 100%; line-height: 20px; - + max-width: 100px; overflow: hidden; text-overflow: ellipsis; - -webkit-line-clamp: 2; - display: -webkit-box; - -webkit-box-orient: vertical; + white-space: nowrap; + display: block; } .item-file-exst { - color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; + margin-bottom: 1px; } ${({ isRooms }) => @@ -147,10 +148,17 @@ const FilesTileContent = ({ isTextOverflow > {titleWithoutExt} - {displayFileExtension && ( - {fileExst} - )} + {displayFileExtension && ( + + {fileExst} + + )} ); From 02eb12b3451cf75210240823e6722190d097fb84 Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Wed, 21 Aug 2024 21:16:34 +0500 Subject: [PATCH 05/63] Web: Client: Section: Body. fix display file extension --- .../Section/Body/RowsView/FilesRowContent.js | 35 +++++-------------- .../Section/Body/TableView/StyledTable.js | 6 ++-- .../TableView/sub-components/FileNameCell.js | 14 ++------ .../Body/TilesView/FilesTileContent.js | 22 +++++------- 4 files changed, 22 insertions(+), 55 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js index 52e890ad59..c06171f0ca 100644 --- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js +++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js @@ -64,10 +64,6 @@ const SimpleFilesRowContent = styled(RowContent)` } } - .rowMainContainer { - margin-inline-end: ${(props) => props.displayFileExtension && "0px"}; - } - .row_update-text { overflow: hidden; text-overflow: ellipsis; @@ -95,25 +91,24 @@ const SimpleFilesRowContent = styled(RowContent)` .row-content-link { padding-block: 12px 0; - padding-inline: ${(props) => !props.displayFileExtension && "0px 12px"}; + padding-inline: 0 12px; margin-top: ${(props) => props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"}; } + .item-file-exst { + color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; + } + @media ${tablet} { .row-main-container-wrapper { display: flex; - align-items: center; + justify-content: space-between; max-width: inherit; } - .mainIcons { - margin-bottom: ${(props) => props.displayFileExtension && "4px"}; - } - .badges { flex-direction: row-reverse; - padding-inline: ${(props) => props.displayFileExtension && "0px 12px"}; } .tablet-badge { @@ -152,10 +147,6 @@ const SimpleFilesRowContent = styled(RowContent)` margin: 0; } - .mainIcons { - margin-bottom: ${(props) => props.displayFileExtension && "0px"}; - } - .can-convert { margin: 0 1px; } @@ -270,7 +261,6 @@ const FilesRowContent = ({ isMobile={!isTablet()} isFile={fileExst || contentLength} sideColor={theme.filesSection.rowView.sideColor} - displayFileExtension={displayFileExtension} > {titleWithoutExt} + {displayFileExtension && ( + {fileExst} + )}
{badgesComponent} {!isRoom && !isRooms && quickButtons} - {displayFileExtension && ( - - {fileExst} - - )}
{mainInfo && ( diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index e16871417f..0f633034e5 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -202,13 +202,11 @@ const StyledTableRow = styled(TableRow)` .item-file-name { padding-block: 14px; - padding-inline: ${(props) => - props.displayFileExtension ? "0px" : "0 8px"}; + padding-inline: 0 8px; } .item-file-exst { - padding-inline: 0 8px; - margin-bottom: 1px; + color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; } ${(props) => diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js index c4dd49fe25..fdacbd2ca0 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js @@ -89,18 +89,10 @@ const FileNameCell = ({ dir="auto" > {titleWithoutExt} + {displayFileExtension && ( + {fileExst} + )} - - {displayFileExtension && ( - - {fileExst} - - )} ); }; diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js index f5ff0ca001..7ff82134ee 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js @@ -86,15 +86,16 @@ const SimpleFilesTileContent = styled(TileContent)` .item-file-name { max-height: 100%; line-height: 20px; - max-width: 100px; + overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; - display: block; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; } .item-file-exst { - margin-bottom: 1px; + color: ${(props) => props.theme.filesSection.tableView.fileExstColor}; } ${({ isRooms }) => @@ -148,17 +149,10 @@ const FilesTileContent = ({ isTextOverflow > {titleWithoutExt} + {displayFileExtension && ( + {fileExst} + )} - {displayFileExtension && ( - - {fileExst} - - )} ); From 984a86968662abded56f53b4b2965ec107d460d3 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Fri, 23 Aug 2024 11:18:25 +0300 Subject: [PATCH 06/63] Client: Added terms and conditions component. --- .../client/public/locales/en/Confirm.json | 3 +- .../sub-components/StyledCreateUser.js | 4 +++ .../Confirm/sub-components/createUser.js | 34 +++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/client/public/locales/en/Confirm.json b/packages/client/public/locales/en/Confirm.json index b91c4a4925..68f06c0ae5 100644 --- a/packages/client/public/locales/en/Confirm.json +++ b/packages/client/public/locales/en/Confirm.json @@ -30,5 +30,6 @@ "SignUp": "Sign up", "SuccessDeactivate": "Your account has been successfully deactivated. In 10 seconds you will be redirected to the <1>site.", "SuccessReactivate": "Your account has been successfully reactivated. In 10 seconds you will be redirected to the <1>portal.", - "SuccessRemoved": "Your account has been successfully removed. In 10 seconds you will be redirected to the <1>site." + "SuccessRemoved": "Your account has been successfully removed. In 10 seconds you will be redirected to the <1>site.", + "TermsAndConditions": "By continuing, you understand and agree to our <1>Terms and conditions and <2>Privacy statement." } diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js index 8cedbcdd0c..9d0ea3e9ca 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js @@ -116,6 +116,10 @@ export const RegisterContainer = styled.div` .email-container{ ${(props) => props.registrationForm && "display:none"}; } + + .terms-conditions{ + margin: 20px 0; + } @media ${tablet} { width: 100%; } diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js index 99eb5e95f6..c0ff204ee6 100644 --- a/packages/client/src/pages/Confirm/sub-components/createUser.js +++ b/packages/client/src/pages/Confirm/sub-components/createUser.js @@ -74,6 +74,7 @@ import LanguageComboboxWrapper from "./LanguageCombobox"; import withCultureNames from "SRC_DIR/HOCs/withCultureNames"; import { setCookie } from "@docspace/shared/utils/cookie"; +import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme"; const DEFAULT_ROOM_TEXT = "{{firstName}} {{lastName}} invites you to join the room {{roomName}} for secure document collaboration."; @@ -473,6 +474,37 @@ const CreateUserForm = (props) => { } : {}; + const termsConditionsComponent = ( +
+ + + ), + 2: ( + + ), + }} + /> + +
+ ); return ( { /> + {termsConditionsComponent} +