From 017b9e912cca06f7bc48c5af621323a59c8ed75d Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 17 Nov 2021 17:41:46 +0300 Subject: [PATCH 1/9] Web: Files: add menu in trash --- .../src/pages/Home/Section/Header/index.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index b7e3ff21c1..a2bdc07560 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -242,6 +242,7 @@ class SectionHeaderContent extends React.Component { }; onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true); + onRestoreAllAction = () => console.log("Restore all"); getContextOptionsFolder = () => { const { t } = this.props; @@ -292,6 +293,26 @@ class SectionHeaderContent extends React.Component { ]; }; + getContextOptionsTrash = () => { + const { t } = this.props; + return [ + { + key: "clear-trash", + label: t("EmptyRecycleBin"), + icon: "images/clear.active.react.svg", + onClick: this.onEmptyTrashAction, + disabled: false, + }, + { + key: "restore-all", + label: t("Translations:Restore"), + icon: "images/move.react.svg", + onClick: this.onRestoreAllAction, + disabled: false, + }, + ]; + }; + onBackToParentFolder = () => { const { setIsLoading, parentId, filter, fetchFiles } = this.props; setIsLoading(true); @@ -352,6 +373,7 @@ class SectionHeaderContent extends React.Component { isTabletView, personal, viewAs, + isRecycleBinFolder, } = this.props; const menuItems = this.getMenuItems(); @@ -449,6 +471,19 @@ class SectionHeaderContent extends React.Component { /> ) )} + {isRecycleBinFolder && ( + + )} )} @@ -468,6 +503,7 @@ export default inject( selectedFolderStore, filesActionsStore, settingsStore, + treeFoldersStore, }) => { const { setSelected, @@ -490,8 +526,10 @@ export default inject( setMoveToPanelVisible, setCopyPanelVisible, setDeleteDialogVisible, + setEmptyTrashDialogVisible, } = dialogsStore; + const { isRecycleBinFolder } = treeFoldersStore; const { deleteAction, downloadAction, getHeaderMenu } = filesActionsStore; return { @@ -524,6 +562,9 @@ export default inject( downloadAction, getHeaderMenu, getCheckboxItemLabel, + + isRecycleBinFolder, + setEmptyTrashDialogVisible, }; } )( From 4894779a1786018ce997145a8875b46084dcb390 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 17 Nov 2021 17:42:59 +0300 Subject: [PATCH 2/9] Web: Files: add restore all --- .../Client/src/pages/Home/Section/Header/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index a2bdc07560..38945c2e28 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -242,7 +242,10 @@ class SectionHeaderContent extends React.Component { }; onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true); - onRestoreAllAction = () => console.log("Restore all"); + onRestoreAllAction = () => { + this.props.setSelected("all"); + this.props.setMoveToPanelVisible(true); + }; getContextOptionsFolder = () => { const { t } = this.props; @@ -374,6 +377,7 @@ class SectionHeaderContent extends React.Component { personal, viewAs, isRecycleBinFolder, + isEmptyFilesList, } = this.props; const menuItems = this.getMenuItems(); @@ -471,7 +475,7 @@ class SectionHeaderContent extends React.Component { /> ) )} - {isRecycleBinFolder && ( + {isRecycleBinFolder && !isEmptyFilesList && ( Date: Wed, 17 Nov 2021 17:43:27 +0300 Subject: [PATCH 3/9] Web: Files: delete action --- products/ASC.Files/Client/src/store/FilesActionsStore.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/products/ASC.Files/Client/src/store/FilesActionsStore.js b/products/ASC.Files/Client/src/store/FilesActionsStore.js index da21f310cb..78a99d491e 100644 --- a/products/ASC.Files/Client/src/store/FilesActionsStore.js +++ b/products/ASC.Files/Client/src/store/FilesActionsStore.js @@ -843,11 +843,7 @@ class FilesActionStore { label: t("Translations:Restore"), onClick: () => setMoveToPanelVisible(true), }) - .set("delete", deleteOption) - .set("emptyRecycleBin", { - label: t("EmptyRecycleBin"), - onClick: () => setEmptyTrashDialogVisible(true), - }); + .set("delete", deleteOption); return this.convertToArray(itemsCollection); }; getHeaderMenu = (t) => { From a4e21a2319a2add870c747ce9d411312263fba00 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Thu, 18 Nov 2021 15:24:28 +0300 Subject: [PATCH 4/9] Web: Component: Added modal dialog height property. --- .../components/Loaders/DialogLoader/DialogLoader.js | 4 ++-- packages/asc-web-components/modal-dialog/index.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js b/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js index a94b6b8b1e..8679b77e6d 100644 --- a/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js +++ b/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js @@ -2,7 +2,7 @@ import React from "react"; import Loaders from "../../Loaders"; import StyledDialogLoader from "./StyledDialogLoader"; -const DialogLoader = () => { +const DialogLoader = ({ bodyHeight = "150px" }) => { return (
@@ -14,7 +14,7 @@ const DialogLoader = () => { />
- +
diff --git a/packages/asc-web-components/modal-dialog/index.js b/packages/asc-web-components/modal-dialog/index.js index 80cebd5443..1077f42e1c 100644 --- a/packages/asc-web-components/modal-dialog/index.js +++ b/packages/asc-web-components/modal-dialog/index.js @@ -110,6 +110,7 @@ class ModalDialog extends React.Component { isLoading, contentPaddingBottom, removeScroll, + modalDialogHeight, } = this.props; let header = null; @@ -150,7 +151,7 @@ class ModalDialog extends React.Component { > {isLoading ? ( - + ) : ( <> @@ -246,6 +247,7 @@ ModalDialog.propTypes = { id: PropTypes.string, style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), contentPaddingBottom: PropTypes.string, + modalDialogHeight: PropTypes.string, }; ModalDialog.defaultProps = { From 594b767a3d8b9b73489ce7e36508f471f2521871 Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Thu, 18 Nov 2021 15:26:48 +0300 Subject: [PATCH 5/9] Web: Files: Fixed loaders according layouts. --- .../panels/SelectFileDialog/AsideView.js | 21 ++--- .../panels/SelectFileDialog/FilesListBody.js | 27 +++++-- .../panels/SelectFileDialog/ModalView.js | 79 +++++++++---------- .../src/components/panels/StyledPanels.js | 27 +++++-- 4 files changed, 89 insertions(+), 65 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js index b6d5492b34..408fe51754 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js @@ -61,7 +61,7 @@ const SelectFileDialogAsideView = ({ //className="select-file-modal-dialog" //style={{ maxWidth: "890px" }} contentHeight="100%" - displayType="aside" + displayType={DISPLAY_TYPE} //bodyPadding="0" removeScroll > @@ -69,7 +69,10 @@ const SelectFileDialogAsideView = ({ {headerName ? headerName : t("SelectFile")} - +
{header}
{/* @@ -109,15 +112,13 @@ const SelectFileDialogAsideView = ({ selectedFile={selectedFile} /> ) : isAvailableFolderList ? ( -
- + - {`${t("Common:LoadingProcessing")} ${t( - "Common:LoadingDescription" - )}`}
) : (
diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js index 996e7b596a..d38dfe6c68 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js @@ -10,7 +10,7 @@ import { inject, observer } from "mobx-react"; import FilesListRow from "./FilesListRow"; import EmptyContainer from "../../EmptyContainer/EmptyContainer"; import i18n from "./i18n"; - +import Loaders from "@appserver/common/components/Loaders"; import { I18nextProvider } from "react-i18next"; const FilesListBody = ({ @@ -52,18 +52,33 @@ const FilesListBody = ({ }, [isNextPageLoading, filesList, displayType]); const renderLoader = useCallback( - (style) => { + (style, index) => { return (
-
- - {loadingText} +
+ {index > 10 ? ( + <> + + {loadingText} + + ) : ( + + )}
); }, [loadingText] ); + const isFileChecked = useCallback( (file) => { const checked = selectedFile ? file.id === selectedFile.id : false; @@ -76,7 +91,7 @@ const FilesListBody = ({ const isLoaded = isItemLoaded(index); if (!isLoaded) { - return renderLoader(style); + return renderLoader(style, index); } const file = filesList[index]; diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js index b6e3710c52..9f216c098b 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js @@ -12,7 +12,7 @@ import Text from "@appserver/components/text"; import { isArrayEqual } from "@appserver/components/utils/array"; import { FolderType } from "@appserver/common/constants"; import { getFoldersTree } from "@appserver/common/api/files"; - +import Loaders from "@appserver/common/components/Loaders"; const exceptSortedByTagsFolders = [ FolderType.Recent, FolderType.TRASH, @@ -193,55 +193,48 @@ class SelectFileDialogModalView extends React.Component { style={{ maxWidth: "725px" }} displayType="modal" bodyPadding="0" + isLoading={isLoading} + modalDialogHeight="277px" > {headerName ? headerName : t("SelectFile")} - - {!isLoading ? ( -
-
{header}
-
- +
+
{header}
+
+ +
+
+ {selectedFolder && ( + -
-
- {selectedFolder && ( - - )} -
+ )}
- ) : ( -
- - {`${t("Common:LoadingProcessing")} ${t( - "Common:LoadingDescription" - )}`} -
- )} +
diff --git a/products/ASC.Files/Client/src/components/panels/StyledPanels.js b/products/ASC.Files/Client/src/components/panels/StyledPanels.js index 6cead86003..bad3886852 100644 --- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js +++ b/products/ASC.Files/Client/src/components/panels/StyledPanels.js @@ -668,10 +668,12 @@ const StyledSelectFilePanel = styled.div` ${(props) => props.displayType === "aside" && css` - margin-left: -16px; - margin-right: -16px; - .nav-thumb-vertical { - margin-left: -7px !important;`} + margin-left: -16px; + margin-right: -16px; + .nav-thumb-vertical { + margin-left: -7px !important; + } + `} } .select-file-dialog_aside_body-files_list { height: 100%; @@ -720,7 +722,20 @@ const StyledSelectFilePanel = styled.div` padding: 7px 0px; } .panel-loader-wrapper { - margin-top: 8px; + ${(props) => + props.displayType === "modal" && + css` + margin-top: 16px; + `}; + .first-row-content__mobile { + width: ${(props) => (props.displayType === "aside" ? "147px" : "402px")}; + } + .second-row-content__mobile { + width: 229px; + } + } + .loader-wrapper_margin { + margin-left: 16px; } .select-file-dialog_modal-loader { height: 290px; @@ -746,7 +761,7 @@ const StyledSelectFilePanel = styled.div` .modal-dialog_body { display: grid; grid-template-columns: 212px 489px; - height: 300px; + height: 280px; // grid-column-gap: 8px; grid-template-areas: "children children" "tree files-list"; .modal-dialog_tree-body { From 68ab26ed6d25b95286c029a99edbe775711c286f Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Thu, 18 Nov 2021 16:21:28 +0300 Subject: [PATCH 6/9] Web: Files: Fixed loaders. --- .../panels/SelectFileDialog/FilesListBody.js | 54 ++++++++++++------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js index d38dfe6c68..cbd79dd7e2 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/FilesListBody.js @@ -12,7 +12,7 @@ import EmptyContainer from "../../EmptyContainer/EmptyContainer"; import i18n from "./i18n"; import Loaders from "@appserver/common/components/Loaders"; import { I18nextProvider } from "react-i18next"; - +let countLoad; const FilesListBody = ({ filesList, onSelectFile, @@ -32,6 +32,7 @@ const FilesListBody = ({ const filesListRef = useRef(null); useEffect(() => { + countLoad = 0; if (filesListRef && filesListRef.current) { filesListRef.current.resetloadMoreItemsCache(true); } @@ -48,37 +49,48 @@ const FilesListBody = ({ const loadMoreItems = useCallback(() => { if (isNextPageLoading) return; + countLoad++; loadNextPage && loadNextPage(); }, [isNextPageLoading, filesList, displayType]); - - const renderLoader = useCallback( - (style, index) => { + + const renderPageLoader = useCallback( + (style) => { + console.log("renderLoader"); return (
- {index > 10 ? ( - <> - - {loadingText} - - ) : ( - - )} + + {loadingText} +
+
+ ); + }, + [loadingText] + ); + const renderFirstLoader = useCallback( + (style) => { + console.log("loader"); + return ( +
+
+
); }, [loadingText] ); - const isFileChecked = useCallback( (file) => { const checked = selectedFile ? file.id === selectedFile.id : false; @@ -86,12 +98,14 @@ const FilesListBody = ({ }, [selectedFile] ); + const Item = useCallback( ({ index, style }) => { const isLoaded = isItemLoaded(index); if (!isLoaded) { - return renderLoader(style, index); + if (countLoad > 1) return renderPageLoader(style); + return renderFirstLoader(style); } const file = filesList[index]; @@ -128,7 +142,7 @@ const FilesListBody = ({
); }, - [filesList, selectedFile, displayType, renderLoader] + [filesList, selectedFile, displayType, renderFirstLoader, renderPageLoader] ); return (
From 8c8bf95faeb6e2bd851190ba86c307411818b0e9 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 18 Nov 2021 17:39:12 +0300 Subject: [PATCH 7/9] Web: Files: fixed empty trash --- .../src/pages/Home/Section/Header/index.js | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index 38945c2e28..5253b98336 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -82,7 +82,21 @@ const StyledContainer = styled.div` @media ${tablet} { & > div:first-child { - padding: 8px 8px 8px 8px; + //padding: 8px 8px 8px 8px; + margin-right: -8px; + } + } + } + + .trash-button { + margin-bottom: -1px; + + @media (min-width: 1024px) { + margin-left: 8px; + } + + @media ${tablet} { + & > div:first-child { margin-right: -8px; } } @@ -242,6 +256,7 @@ class SectionHeaderContent extends React.Component { }; onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true); + //TODO: add restore all api method onRestoreAllAction = () => { this.props.setSelected("all"); this.props.setMoveToPanelVisible(true); @@ -476,17 +491,17 @@ class SectionHeaderContent extends React.Component { ) )} {isRecycleBinFolder && !isEmptyFilesList && ( - + + + )} )} From c3cc75401ca171a956734c3154955f43c4c8a579 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 18 Nov 2021 17:41:38 +0300 Subject: [PATCH 8/9] Web: Files: fix comment --- .../ASC.Files/Client/src/pages/Home/Section/Header/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index 5253b98336..aaa5667782 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -82,7 +82,7 @@ const StyledContainer = styled.div` @media ${tablet} { & > div:first-child { - //padding: 8px 8px 8px 8px; + padding: 8px 8px 8px 8px; margin-right: -8px; } } From d5fb86fd41d0fb36502614f996ca920713d695c3 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 18 Nov 2021 17:47:11 +0300 Subject: [PATCH 9/9] Web: Files: delete useless --- .../src/pages/Home/Section/Header/index.js | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index aaa5667782..4e3a30670d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -256,11 +256,6 @@ class SectionHeaderContent extends React.Component { }; onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true); - //TODO: add restore all api method - onRestoreAllAction = () => { - this.props.setSelected("all"); - this.props.setMoveToPanelVisible(true); - }; getContextOptionsFolder = () => { const { t } = this.props; @@ -311,26 +306,6 @@ class SectionHeaderContent extends React.Component { ]; }; - getContextOptionsTrash = () => { - const { t } = this.props; - return [ - { - key: "clear-trash", - label: t("EmptyRecycleBin"), - icon: "images/clear.active.react.svg", - onClick: this.onEmptyTrashAction, - disabled: false, - }, - { - key: "restore-all", - label: t("Translations:Restore"), - icon: "images/move.react.svg", - onClick: this.onRestoreAllAction, - disabled: false, - }, - ]; - }; - onBackToParentFolder = () => { const { setIsLoading, parentId, filter, fetchFiles } = this.props; setIsLoading(true);