Merge pull request #1046 from ONLYOFFICE/feature/catalog-redesign

Feature/catalog redesign

packages/client/src/components/Article/Body/Items.js

@@ -11,11 +11,17 @@ import {
 import { withTranslation } from "react-i18next";
 import DragAndDrop from "@docspace/components/drag-and-drop";
 import { isMobile } from "react-device-detect";
+import SettingsItem from "./SettingsItem";
+import AccountsItem from "./AccountsItem";
 
 const StyledDragAndDrop = styled(DragAndDrop)`
   display: contents;
 `;
 
+const CatalogDivider = styled.div`
+  height: 16px;
+`;
+
 const Item = ({
   t,
   item,
@@ -152,6 +158,7 @@ const Items = ({
   trashIsEmpty,
 
   onHide,
+  firstLoad,
 }) => {
   useEffect(() => {
     data.forEach((elem) => {
@@ -329,44 +336,11 @@ const Items = ({
         );
       });
 
-      const roomsHeader = (
-        <CatalogItem
-          key={"rooms-header"}
-          isHeader={true}
-          isFirstHeader={true}
-          showText={showText}
-          text={t("Common:Rooms")}
-        />
-      );
+      if (!firstLoad) items.splice(3, 0, <SettingsItem key="settings-item" />);
+      if (!isVisitor) items.splice(3, 0, <AccountsItem key="accounts-item" />);
 
-      const filesHeader = (
-        <CatalogItem
-          key={"files-header"}
-          isHeader={true}
-          isFirstHeader={false}
-          showText={showText}
-          text={t("Translations:Files")}
-        />
-      );
-
-      const otherHeader = (
-        <CatalogItem
-          key={"other-header"}
-          isHeader={true}
-          isFirstHeader={false}
-          showText={showText}
-          text={t("Translations:Other")}
-        />
-      );
-
-      if (isVisitor) {
-        items.length > 2 && items.splice(2, 0, filesHeader);
-      } else {
-        items.splice(3, 0, filesHeader);
-      }
-
-      items.unshift(roomsHeader);
-      items.push(otherHeader);
+      if (!isVisitor) items.splice(3, 0, <CatalogDivider key="other-header" />);
+      else items.splice(2, 0, <CatalogDivider key="other-header" />);
 
       return items;
     },
@@ -386,6 +360,8 @@ const Items = ({
       uploadEmptyFolders,
       trashIsEmpty,
       isAdmin,
+      isVisitor,
+      firstLoad,
     ]
   );
 
@@ -417,6 +393,7 @@ export default inject(
       setDragging,
       setStartDrag,
       trashIsEmpty,
+      firstLoad,
     } = filesStore;
 
     const { startUpload } = uploadDataStore;
@@ -455,6 +432,7 @@ export default inject(
       setEmptyTrashDialogVisible,
       trashIsEmpty,
       rootFolderType,
+      firstLoad,
     };
   }
 )(withTranslation(["Files", "Common", "Translations"])(observer(Items)));

packages/client/src/components/Article/Body/index.js

@@ -9,8 +9,6 @@ import Items from "./Items";
 import { isMobile, tablet } from "@docspace/components/utils/device";
 import FilesFilter from "@docspace/common/api/files/filter";
 import RoomsFilter from "@docspace/common/api/rooms/filter";
-import SettingsItem from "./SettingsItem";
-import AccountsItem from "./AccountsItem";
 import { combineUrl } from "@docspace/common/utils";
 import { isDesktop, isTablet, isMobileOnly } from "react-device-detect";
 //import ThirdPartyList from "./ThirdPartyList";
@@ -162,8 +160,7 @@ const ArticleBodyContent = (props) => {
         showText={showText}
         onHide={toggleArticleOpen}
       />
-      {!personal && !isVisitor && <AccountsItem />}
-      {!personal && !firstLoad && <SettingsItem />}
+
       {!isDesktopClient && showText && !docSpace && (
         <StyledBlock showText={showText}>
           {/* {enableThirdParty && !isVisitor && <ThirdPartyList />} */}

packages/client/src/components/QuickButtons.js

@@ -83,7 +83,7 @@ const QuickButtons = (props) => {
           hoverColor={theme.filesQuickButtons.sharedColor}
         />
       )}
-      {fileExst && !isTrashFolder && displayBadges && (
+      {/* {fileExst && !isTrashFolder && displayBadges && (
         <ColorTheme
           themeId={ThemeType.IconButton}
           iconName={iconFavorite}
@@ -96,7 +96,7 @@ const QuickButtons = (props) => {
           onClick={setFavorite}
           hoverColor={theme.filesQuickButtons.hoverColor}
         />
-      )}
+      )} */}
     </div>
   );
 };

packages/client/src/pages/Settings/Section/Body/CommonSettings.js

@@ -90,7 +90,7 @@ const CommonSettings = ({
         />
       </Box>
 
-      <Box className="settings-section">
+      {/* <Box className="settings-section">
         <Heading className="heading" level={2} size="xsmall">
           {t("AdditionalSections")}
         </Heading>
@@ -109,14 +109,14 @@ const CommonSettings = ({
           onChange={onChangeFavorites}
           isChecked={favoritesSection}
         />
-        {/* <ToggleButton
-            isDisabled={true}
-            className="toggle-btn"
-            label={t("DisplayTemplates")}
-            onChange={(e) => console.log(e)}
-            isChecked={false}
-          /> */}
-      </Box>
+        <ToggleButton
+          isDisabled={true}
+          className="toggle-btn"
+          label={t("DisplayTemplates")}
+          onChange={(e) => console.log(e)}
+          isChecked={false}
+        />
+      </Box> */}
 
       <Box className="settings-section">
         <Heading className="heading" level={2} size="xsmall">

packages/client/src/store/FilesStore.js

@@ -1079,7 +1079,7 @@ class FilesStore {
         "separator1",
         "open-location",
         "mark-read",
-        "mark-as-favorite",
+        // "mark-as-favorite",
         "remove-from-favorites",
         "download",
         "download-as",

packages/client/src/store/TreeFoldersStore.js

@@ -35,7 +35,12 @@ class TreeFoldersStore {
   getFoldersTree = () => getFoldersTree();
 
   setTreeFolders = (treeFolders) => {
-    this.treeFolders = treeFolders;
+    // this.treeFolders = treeFolders;
+
+    //TODO: remove after api fix
+    this.treeFolders = treeFolders
+      .filter((f) => f.rootFolderType !== FolderType.Recent)
+      .filter((f) => f.rootFolderType !== FolderType.Favorites);
   };
 
   setIsLoadingNodes = (isLoadingNodes) => {

packages/common/components/Loaders/ArticleFolderLoader/ArticleFolderLoader.js

@@ -12,7 +12,8 @@ const ArticleFolderLoader = ({
   className,
   style,
   showText,
-  personal,
+
+  isVisitor,
   ...rest
 }) => {
   return (
@@ -22,23 +23,29 @@ const ArticleFolderLoader = ({
       style={style}
       showText={showText}
     >
-      <StyledBlock>
-        <StyledRectangleLoader {...rest} />
-        <StyledRectangleLoader {...rest} />
-        <StyledRectangleLoader {...rest} />
-        <StyledRectangleLoader {...rest} />
-      </StyledBlock>
-      {!personal && (
+      {isVisitor ? (
         <>
           <StyledBlock>
             <StyledRectangleLoader {...rest} />
             <StyledRectangleLoader {...rest} />
           </StyledBlock>
+
           <StyledBlock>
             <StyledRectangleLoader {...rest} />
           </StyledBlock>
+        </>
+      ) : (
+        <>
           <StyledBlock>
             <StyledRectangleLoader {...rest} />
+            <StyledRectangleLoader {...rest} />
+            <StyledRectangleLoader {...rest} />
+          </StyledBlock>
+
+          <StyledBlock>
+            <StyledRectangleLoader {...rest} />
+            <StyledRectangleLoader {...rest} />
+            <StyledRectangleLoader {...rest} />
           </StyledBlock>
         </>
       )}
@@ -62,6 +69,6 @@ ArticleFolderLoader.defaultProps = {
 export default inject(({ auth }) => {
   return {
     showText: auth.settingsStore.showText,
-    personal: auth.settingsStore.personal,
+    isVisitor: auth.userStore.user.isVisitor,
   };
 })(observer(ArticleFolderLoader));

packages/editor/src/client/components/Editor.js

@@ -484,6 +484,8 @@ function Editor({
         goback: goBack,
       };
 
+      config.document.info.favorite = null;
+
       // if (personal && !fileInfo) {
       //   //TODO: add conditions for SaaS
       //   config.document.info.favorite = null;