Merge branch 'develop' into feature/invite-accounts

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

@@ -6,9 +6,6 @@ import CatalogItem from "@docspace/components/catalog-item";
 import { FolderType, ShareAccessRights } from "@docspace/common/constants";
 import { withTranslation } from "react-i18next";
 import DragAndDrop from "@docspace/components/drag-and-drop";
-import withLoader from "../../../HOCs/withLoader";
-import Loaders from "@docspace/common/components/Loaders";
-import Loader from "@docspace/components/loader";
 import { isMobile } from "react-device-detect";
 
 const StyledDragAndDrop = styled(DragAndDrop)`
@@ -34,7 +31,7 @@ const Item = ({
   labelBadge,
   iconBadge,
 }) => {
-  const [isDragActive, setIsDragActive] = React.useState(false);
+  const [isDragActive, setIsDragActive] = useState(false);
 
   const isDragging = dragging ? showDragItems(item) : false;
 
@@ -125,6 +122,7 @@ const Items = ({
   data,
   showText,
   pathParts,
+  rootFolderType,
   selectedTreeNode,
   onClick,
   onBadgeClick,
@@ -161,6 +159,13 @@ const Items = ({
       if (selectedTreeNode.length > 0) {
         const isMainFolder = dataMainTree.indexOf(selectedTreeNode[0]) !== -1;
 
+        if (
+          rootFolderType === FolderType.Rooms &&
+          item.rootFolderType === FolderType.Rooms
+        ) {
+          return true;
+        }
+
         if (pathParts && pathParts.includes(item.id) && !isMainFolder)
           return true;
 
@@ -173,7 +178,7 @@ const Items = ({
         return `${item.id}` === selectedTreeNode[0];
       }
     },
-    [selectedTreeNode, pathParts, docSpace]
+    [selectedTreeNode, pathParts, docSpace, rootFolderType]
   );
   const getEndOfBlock = React.useCallback(
     (item) => {
@@ -417,7 +422,7 @@ export default inject(
       isPrivacyFolder,
     } = treeFoldersStore;
 
-    const { id } = selectedFolderStore;
+    const { id, pathParts, rootFolderType } = selectedFolderStore;
     const { moveDragItems, uploadEmptyFolders } = filesActionsStore;
     const { setEmptyTrashDialogVisible } = dialogsStore;
 
@@ -430,7 +435,7 @@ export default inject(
       currentId: id,
       showText: auth.settingsStore.showText,
       docSpace: auth.settingsStore.docSpace,
-      pathParts: selectedFolderStore.pathParts,
+      pathParts,
       data: treeFolders,
       selectedTreeNode,
       draggableItems: dragging ? selection : null,
@@ -442,6 +447,7 @@ export default inject(
       uploadEmptyFolders,
       setEmptyTrashDialogVisible,
       trashIsEmpty,
+      rootFolderType,
     };
   }
 )(withTranslation(["Files", "Common", "Translations"])(observer(Items)));

packages/client/src/pages/FormGallery/TilesView/StyledTileView.js

@@ -388,7 +388,13 @@ const MainContainer = styled.div`
 
 const StyledCard = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+
+  ${({ isSingle }) =>
+    !isSingle &&
+    css`
+      grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+    `};
+
   height: ${({ cardHeight }) => `${cardHeight}px`};
 `;
 

packages/client/src/pages/FormGallery/TilesView/sub-components/InfiniteGrid.js

@@ -1,17 +1,22 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { inject, observer } from "mobx-react";
 import InfiniteLoaderComponent from "@docspace/components/infinite-loader";
 import { StyledCard, StyledItem } from "../StyledTileView";
 import Loaders from "@docspace/common/components/Loaders";
 import uniqueid from "lodash/uniqueId";
 
-const Card = ({ children, ...rest }) => {
+const Card = ({ children, countTilesInRow, ...rest }) => {
   const horizontalGap = 16;
   const fileHeight = 220 + horizontalGap;
   const cardHeight = fileHeight;
 
   return (
-    <StyledCard className="Card" cardHeight={cardHeight} {...rest}>
+    <StyledCard
+      className="Card"
+      cardHeight={cardHeight}
+      isSingle={countTilesInRow}
+      {...rest}
+    >
       {children}
     </StyledCard>
   );
@@ -37,7 +42,7 @@ const InfiniteGrid = (props) => {
     ...rest
   } = props;
 
-  const countTilesInRow = getCountTilesInRow();
+  const [countTilesInRow, setCountTilesInRow] = useState(getCountTilesInRow());
 
   let cards = [];
   const list = [];
@@ -51,6 +56,24 @@ const InfiniteGrid = (props) => {
     if (clear) cards = [];
   };
 
+  const setTilesCount = () => {
+    const newCount = getCountTilesInRow();
+    if (countTilesInRow !== newCount) setCountTilesInRow(newCount);
+  };
+
+  const onResize = () => {
+    setTilesCount();
+  };
+
+  useEffect(() => {
+    setTilesCount();
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  });
+
   React.Children.map(children, (child) => {
     if (child) {
       if (cards.length && cards.length === countTilesInRow) {
@@ -59,7 +82,11 @@ const InfiniteGrid = (props) => {
       }
 
       const cardKey = uniqueid("card-item_");
-      cards.push(<Card key={cardKey}>{child}</Card>);
+      cards.push(
+        <Card countTilesInRow={countTilesInRow} key={cardKey}>
+          {child}
+        </Card>
+      );
     }
   });
 

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/InfiniteGrid.js

@@ -13,7 +13,7 @@ const HeaderItem = ({ children, className, ...rest }) => {
   );
 };
 
-const Card = ({ children, ...rest }) => {
+const Card = ({ children, countTilesInRow, ...rest }) => {
   const getItemSize = (child) => {
     const isFile = child?.props?.className?.includes("file");
     const isFolder = child?.props?.className?.includes("folder");
@@ -37,7 +37,12 @@ const Card = ({ children, ...rest }) => {
   const cardHeight = getItemSize(children);
 
   return (
-    <StyledCard className="Card" cardHeight={cardHeight} {...rest}>
+    <StyledCard
+      isSingle={countTilesInRow}
+      className="Card"
+      cardHeight={cardHeight}
+      {...rest}
+    >
       {children}
     </StyledCard>
   );
@@ -143,7 +148,11 @@ const InfiniteGrid = (props) => {
         }
 
         const cardKey = uniqueid("card-item_");
-        cards.push(<Card key={cardKey}>{child}</Card>);
+        cards.push(
+          <Card countTilesInRow={countTilesInRow} key={cardKey}>
+            {child}
+          </Card>
+        );
       }
     }
   });

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/StyledInfiniteGrid.js

@@ -14,7 +14,11 @@ const paddingCss = css`
 
 const StyledCard = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+  ${({ isSingle }) =>
+    !isSingle &&
+    css`
+      grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
+    `};
   height: ${({ cardHeight }) => `${cardHeight}px`};
 `;
 

packages/client/src/pages/Home/index.js

@@ -10,6 +10,7 @@ import {
   hideLoader,
   frameCallbackData,
   frameCallCommand,
+  getObjectByLocation,
 } from "@docspace/common/utils";
 import FilesFilter from "@docspace/common/api/files/filter";
 import { getGroup } from "@docspace/common/api/groups";
@@ -80,10 +81,13 @@ class PureHome extends React.Component {
       return;
     }
 
+    const isRoomFolder = getObjectByLocation(window.location)?.folder;
+
     if (
-      categoryType == CategoryType.Shared ||
-      categoryType == CategoryType.SharedRoom ||
-      categoryType == CategoryType.Archive
+      (categoryType == CategoryType.Shared ||
+        categoryType == CategoryType.SharedRoom ||
+        categoryType == CategoryType.Archive) &&
+      !isRoomFolder
     ) {
       filterObj = RoomsFilter.getFilter(window.location);
 

packages/common/components/Article/styled-article.js

@@ -23,6 +23,8 @@ const StyledArticle = styled.article`
 
   //padding: 0 20px;
 
+  border-right: ${(props) => props.theme.catalog.verticalLine};
+
   @media ${tablet} {
     min-width: ${(props) => (props.showText ? "243px" : "60px")};
     max-width: ${(props) => (props.showText ? "243px" : "60px")};
@@ -63,6 +65,8 @@ const StyledArticle = styled.article`
     padding: 0;
     top: ${(props) => (props.isBannerVisible ? "-16px" : "64px")} !important;
     height: calc(100% - 64px) !important;
+
+    border-right: none;
   `}
 
   z-index: ${(props) =>
@@ -77,7 +81,7 @@ const StyledArticle = styled.article`
     .scroll-body {
       overflow-x: hidden !important;
       height: calc(100% - 200px);
-      padding: 0 20px;
+      padding: 0 20px !important;
 
       @media ${tablet} {
         height: calc(100% - 150px);
@@ -278,16 +282,19 @@ const StyledArticleProfile = styled.div`
   justify-content: center;
 
   border-top: ${(props) => props.theme.catalog.profile.borderTop};
+  border-right: ${(props) => props.theme.catalog.verticalLine}
   background-color: ${(props) => props.theme.catalog.profile.background};
 
   @media ${tablet} {
     padding: 16px 14px;
   }
 
-  ${isTablet &&
-  css`
-    padding: 16px 14px;
-  `}
+  ${
+    isTablet &&
+    css`
+      padding: 16px 14px;
+    `
+  }
 
   .profile-avatar {
     cursor: pointer;

packages/components/themes/base.js

@@ -1858,6 +1858,8 @@ const Base = {
 
     headerBurgerColor: "#657077",
 
+    verticalLine: "1px solid #eceef1",
+
     profile: {
       borderTop: "1px solid #eceef1",
       background: "#f3f4f4",

packages/components/themes/dark.js

@@ -1854,6 +1854,8 @@ const Dark = {
 
     headerBurgerColor: "#606060",
 
+    verticalLine: "1px solid #474747",
+
     profile: {
       borderTop: "1px solid #474747",
       background: "#3D3D3D",