Selectors redesign

packages/asc-web-common/api/files/index.js

@@ -3,6 +3,7 @@ import axios from "axios";
 import FilesFilter from "./filter";
 import { FolderType } from "../../constants";
 import find from "lodash/find";
+import { getFolderOptions } from "../../utils";
 
 export function openEdit(fileId, version, doc, view) {
   const params = []; // doc ? `?doc=${doc}` : "";
@@ -48,19 +49,7 @@ export function getFolderPath(folderId) {
 }
 
 export function getFolder(folderId, filter) {
-  if (folderId && typeof folderId === "string") {
-    folderId = encodeURIComponent(folderId.replace(/\\\\/g, "\\"));
-  }
-
-  const params =
-    filter && filter instanceof FilesFilter
-      ? `${folderId}?${filter.toApiUrlParams()}`
-      : folderId;
-  const options = {
-    method: "get",
-    url: `/files/${params}`,
-  };
-
+  const options = getFolderOptions(folderId, filter);
   return request(options);
 }
 
@@ -181,6 +170,38 @@ export function getFoldersTree() {
   );
 }
 
+export function getCommonFoldersTree() {
+  const index = 1;
+  return request({ method: "get", url: "/files/@common" }).then(
+    (commonFolders) => {
+      return [
+        {
+          id: commonFolders.current.id,
+          key: `0-${index}`,
+          parentId: commonFolders.current.parentId,
+          title: commonFolders.current.title,
+          rootFolderType: +commonFolders.current.rootFolderType,
+          rootFolderName: "@common",
+          pathParts: commonFolders.pathParts,
+          foldersCount: commonFolders.current.foldersCount,
+          newItems: commonFolders.new,
+        },
+      ];
+    }
+  );
+}
+
+export function getThirdPartyCommonFolderTree() {
+  return request({ method: "get", url: "/files/thirdparty/common" }).then(
+    (commonThirdPartyArray) => {
+      commonThirdPartyArray.map((currentValue, index) => {
+        commonThirdPartyArray[index].key = `0-${index}`;
+      });
+      return commonThirdPartyArray;
+    }
+  );
+}
+
 export function getMyFolderList(filter = FilesFilter.getDefault()) {
   const options = {
     method: "get",

packages/asc-web-common/api/settings/index.js

@@ -415,13 +415,6 @@ export function validateTfaCode(code) {
   });
 }
 
-export function getCommonThirdPartyList() {
-  const options = {
-    method: "get",
-    url: "/files/thirdparty/common",
-  };
-  return request(options);
-}
 export function getBackupStorage() {
   const options = {
     method: "get",

packages/asc-web-common/components/Loaders/ListLoader/ListItemLoader.js

@@ -3,7 +3,14 @@ import PropTypes from "prop-types";
 import { StyledRow } from "./StyledListLoader";
 import RectangleLoader from "../RectangleLoader";
 
-const ListItemLoader = ({ id, className, style, isRectangle, ...rest }) => {
+const ListItemLoader = ({
+  id,
+  className,
+  style,
+  withoutFirstRectangle,
+  withoutLastRectangle,
+  ...rest
+}) => {
   const {
     title,
     borderRadius,
@@ -16,8 +23,14 @@ const ListItemLoader = ({ id, className, style, isRectangle, ...rest }) => {
   } = rest;
 
   return (
-    <StyledRow id={id} className={className} style={style}>
-      {isRectangle && (
+    <StyledRow
+      id={id}
+      className={className}
+      style={style}
+      withoutFirstRectangle={withoutFirstRectangle}
+      withoutLastRectangle={withoutLastRectangle}
+    >
+      {!withoutFirstRectangle && (
         <RectangleLoader
           title={title}
           width="16"
@@ -60,18 +73,20 @@ const ListItemLoader = ({ id, className, style, isRectangle, ...rest }) => {
         animate={animate}
       />
 
-      <RectangleLoader
-        title={title}
-        width="16"
-        height="16"
-        borderRadius={borderRadius}
-        backgroundColor={backgroundColor}
-        foregroundColor={foregroundColor}
-        backgroundOpacity={backgroundOpacity}
-        foregroundOpacity={foregroundOpacity}
-        speed={speed}
-        animate={animate}
-      />
+      {!withoutLastRectangle && (
+        <RectangleLoader
+          title={title}
+          width="16"
+          height="16"
+          borderRadius={borderRadius}
+          backgroundColor={backgroundColor}
+          foregroundColor={foregroundColor}
+          backgroundOpacity={backgroundOpacity}
+          foregroundOpacity={foregroundOpacity}
+          speed={speed}
+          animate={animate}
+        />
+      )}
     </StyledRow>
   );
 };
@@ -80,14 +95,16 @@ ListItemLoader.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
-  isRectangle: PropTypes.bool,
+  withoutFirstRectangle: PropTypes.bool,
+  withoutLastRectangle: PropTypes.bool,
 };
 
 ListItemLoader.defaultProps = {
   id: undefined,
   className: undefined,
   style: undefined,
-  isRectangle: true,
+  withoutFirstRectangle: false,
+  withoutLastRectangle: false,
 };
 
 export default ListItemLoader;

packages/asc-web-common/components/Loaders/ListLoader/StyledListLoader.js

@@ -9,21 +9,26 @@ const StyledRow = styled.div`
   width: 100%;
   display: grid;
   grid-template-columns: 16px 32px 1fr 16px;
+  ${(props) =>
+    props.withoutFirstRectangle &&
+    props.withoutLastRectangle &&
+    "grid-template-columns: 32px 1fr"};
+  ${(props) =>
+    props.withoutFirstRectangle &&
+    !props.withoutLastRectangle &&
+    "grid-template-columns: 32px 1fr 16px"};
   grid-template-rows: 1fr;
   grid-column-gap: 8px;
   margin-bottom: 16px;
   justify-items: center;
   align-items: center;
-
   .list-loader_rectangle {
     padding-right: 4px;
   }
-
   .list-loader_rectangle-content {
     width: 32px;
     height: 32px;
   }
-
   .list-loader_rectangle-row {
     margin-right: auto;
     max-width: 167px;

packages/asc-web-common/components/Loaders/NewTreeFolderLoader/StyledTreeFolder.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { desktop } from "@appserver/components/utils/device";
+
+const StyledTreeFolder = styled.div`
+  padding-right: 16px;
+`;
+
+const StyledLoader = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 8px 16px 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 6px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+
+  .tree-node-loader_additional-rectangle {
+    padding-top: 4px;
+  }
+
+  ${(props) => props.paddingLeft && `padding-left: ${props.paddingLeft}`};
+`;
+
+export { StyledLoader, StyledTreeFolder };

packages/asc-web-common/components/Loaders/NewTreeFolderLoader/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StyledTreeFolder, StyledLoader } from "./StyledTreeFolder";
+import TreeNodeLoader from "../TreeNodeLoader";
+
+const NewTreeFolderLoader = ({ id, className, style, ...rest }) => {
+  return (
+    <StyledTreeFolder id={id} className={className} style={style}>
+      <StyledLoader>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+      <StyledLoader paddingLeft={"16px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+
+      <StyledLoader paddingLeft={"32px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+      <StyledLoader paddingLeft={"32px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+      <StyledLoader paddingLeft={"32px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+
+      <StyledLoader>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+      <StyledLoader paddingLeft={"16px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+      <StyledLoader paddingLeft={"16px"}>
+        <TreeNodeLoader {...rest} withRectangle />
+      </StyledLoader>
+    </StyledTreeFolder>
+  );
+};
+
+NewTreeFolderLoader.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+};
+
+NewTreeFolderLoader.defaultProps = {
+  id: undefined,
+  className: undefined,
+  style: undefined,
+};
+
+export default NewTreeFolderLoader;

packages/asc-web-common/components/Loaders/TreeNodeLoader/TreeNodeLoader.js

@@ -11,6 +11,7 @@ const TreeNodeLoader = ({
   foregroundOpacity,
   speed,
   animate,
+  withRectangle = false,
 }) => {
   return (
     <>
@@ -25,6 +26,23 @@ const TreeNodeLoader = ({
         speed={speed}
         animate={animate}
       />
+
+      {withRectangle && (
+        <RectangleLoader
+          title={title}
+          width="16"
+          height="16"
+          borderRadius={borderRadius}
+          backgroundColor={backgroundColor}
+          foregroundColor={foregroundColor}
+          backgroundOpacity={backgroundOpacity}
+          foregroundOpacity={foregroundOpacity}
+          speed={speed}
+          animate={animate}
+          className="tree-node-loader_additional-rectangle"
+        />
+      )}
+
       <RectangleLoader
         title={title}
         width="100%"

packages/asc-web-common/components/Loaders/index.js

@@ -7,6 +7,7 @@ import ArticleButton from "./ArticleButtonLoader";
 import ArticleFolder from "./ArticleFolderLoader";
 import ArticleGroup from "./ArticleGroupsLoader";
 import TreeFolders from "./TreeFolderLoader";
+import NewTreeFolders from "./NewTreeFolderLoader";
 import TreeSettingsLoader from "./TreeSettingsLoader";
 import Row from "./RowLoader";
 import Rows from "./RowsLoader";
@@ -46,4 +47,5 @@ export default {
   ArticleFolder,
   ArticleGroup,
   ListLoader,
+  NewTreeFolders,
 };

packages/asc-web-common/utils/index.js

@@ -324,3 +324,22 @@ export function convertLanguage(key) {
 
   return key;
 }
+
+import FilesFilter from "../api/files/filter";
+export function getFolderOptions(folderId, filter) {
+  if (folderId && typeof folderId === "string") {
+    folderId = encodeURIComponent(folderId.replace(/\\\\/g, "\\"));
+  }
+
+  const params =
+    filter && filter instanceof FilesFilter
+      ? `${folderId}?${filter.toApiUrlParams()}`
+      : folderId;
+
+  const options = {
+    method: "get",
+    url: `/files/${params}`,
+  };
+
+  return options;
+}

packages/asc-web-components/button/index.js

@@ -37,7 +37,14 @@ Button.propTypes = {
   /** Size of button.     
 
    The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices. */
-  size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
+  size: PropTypes.oneOf([
+    "extraSmall",
+    "small",
+    "normal",
+    "medium",
+    "normalDesktop",
+    "normalTouchscreen",
+  ]),
   /** Scale width of button to 100% */
   scale: PropTypes.bool,
   /** Icon node element */

packages/asc-web-components/modal-dialog/index.js

@@ -177,7 +177,9 @@ class ModalDialog extends React.Component {
                   <BodyBox paddingProp={modalBodyPadding}>
                     {body ? body.props.children : null}
                   </BodyBox>
-                  <Box>{footer ? footer.props.children : null}</Box>
+                  <Box className="modal-dialog-modal-footer">
+                    {footer ? footer.props.children : null}
+                  </Box>
                 </>
               )}
             </Content>

packages/asc-web-components/themes/base.js

@@ -519,6 +519,7 @@ const Base = {
     minHeight: "47px",
     width: "100%",
     borderBottom: globalColors.grayLightMid,
+    backgroundColor: globalColors.lightHover,
     minWidth: "160px",
     overflow: "hidden",
     textOverflow: "ellipsis",

packages/asc-web-components/themes/dark.js

@@ -517,6 +517,7 @@ const Dark = {
     minHeight: "47px",
     width: "100%",
     borderBottom: "#474747",
+    backgroundColor: globalColors.veryDarkGrey,
     minWidth: "160px",
     overflow: "hidden",
     textOverflow: "ellipsis",