Merge pull request #294 from ONLYOFFICE/feature/translations-loaders

Feature/translations loaders
ONLYOFFICE · Jul 2, 2021 · 5a16c5a · 5a16c5a
2 parents a1f5596 + 658b705
commit 5a16c5a
Show file tree

Hide file tree

Showing 74 changed files with 717 additions and 438 deletions.
diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/DialogAsideLoader.js
@@ -0,0 +1,41 @@
+import React from "react";
+import Loaders from "../../Loaders";
+import StyledDialogAsideLoader from "./StyledDialogAsideLoader";
+import Aside from "@appserver/components/aside";
+import Backdrop from "@appserver/components/backdrop";
+
+const DialogAsideLoader = ({ isPanel, withoutAside }) => {
+  const zIndex = 310;
+
+  const renderClearDialogAsideLoader = () => {
+    return (
+      <StyledDialogAsideLoader visible isPanel={isPanel}>
+        <div className="dialog-loader-header">
+          <Loaders.Rectangle />
+        </div>
+        <div className="dialog-loader-body">
+          <Loaders.Rectangle height="200px" />
+        </div>
+
+        <div className="dialog-loader-footer">
+          <Loaders.Rectangle />
+        </div>
+      </StyledDialogAsideLoader>
+    );
+  };
+
+  return withoutAside ? (
+    renderClearDialogAsideLoader()
+  ) : (
+    <>
+      <Backdrop visible isAside />
+      <StyledDialogAsideLoader visible isPanel={isPanel}>
+        <Aside className="dialog-aside-loader" visible zIndex={zIndex}>
+          {renderClearDialogAsideLoader()}
+        </Aside>
+      </StyledDialogAsideLoader>
+    </>
+  );
+};
+
+export default DialogAsideLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/StyledDialogAsideLoader.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/StyledDialogAsideLoader.js
@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+
+const StyledDialogAsideLoader = styled.div`
+  ${(props) =>
+    props.isPanel &&
+    css`
+      .dialog-aside-loader {
+        padding: 0;
+        transform: translateX(${(props) => (props.visible ? "0" : "500px")});
+        width: 500px;
+
+        @media (max-width: 550px) {
+          width: 320px;
+          transform: translateX(${(props) => (props.visible ? "0" : "320px")});
+        }
+      }
+    `}
+
+  ${(props) =>
+    props.isPanel
+      ? css`
+          .dialog-loader-header {
+            padding: 12px 16px;
+          }
+
+          .dialog-loader-body {
+            padding: 16px;
+          }
+
+          .dialog-loader-footer {
+            padding: 12px 16px;
+            position: fixed;
+            bottom: 0;
+            width: 468px;
+
+            @media (max-width: 550px) {
+              width: 288px;
+            }
+          }
+        `
+      : css`
+          .dialog-loader-header {
+            border-bottom: 1px solid rgb(222, 226, 230);
+            padding: 12px 0;
+          }
+
+          .dialog-loader-body {
+            padding: 16px 0;
+          }
+
+          .dialog-loader-footer {
+            position: fixed;
+            bottom: 16px;
+            width: 293px;
+          }
+        `}
+`;
+
+export default StyledDialogAsideLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogAsideLoader/index.js b/packages/asc-web-common/components/Loaders/DialogAsideLoader/index.js
@@ -0,0 +1 @@
+export default from "./DialogAsideLoader";
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js b/packages/asc-web-common/components/Loaders/DialogLoader/DialogLoader.js
@@ -0,0 +1,32 @@
+import React from "react";
+import Loaders from "../../Loaders";
+import StyledDialogLoader from "./StyledDialogLoader";
+
+const DialogLoader = () => {
+  return (
+    <StyledDialogLoader>
+      <div className="dialog-loader-header">
+        <Loaders.Rectangle height="28px" width="470px" />
+        <Loaders.Rectangle
+          className="dialog-loader-icon"
+          height="28px"
+          width="28px"
+        />
+      </div>
+      <div className="dialog-loader-body">
+        <Loaders.Rectangle height="150px" />
+      </div>
+
+      <div className="dialog-loader-footer">
+        <Loaders.Rectangle height="30px" width="120px" />
+        <Loaders.Rectangle
+          className="dialog-loader-icon"
+          height="30px"
+          width="100px"
+        />
+      </div>
+    </StyledDialogLoader>
+  );
+};
+
+export default DialogLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/StyledDialogLoader.js b/packages/asc-web-common/components/Loaders/DialogLoader/StyledDialogLoader.js
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+const StyledDialogLoader = styled.div`
+  .dialog-loader-header {
+    border-bottom: 1px solid rgb(222, 226, 230);
+    display: flex;
+    padding: 12px 0;
+  }
+
+  .dialog-loader-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 12px;
+  }
+
+  .dialog-loader-footer {
+    display: flex;
+    padding-top: 12px;
+  }
+
+  .dialog-loader-icon {
+    margin-left: auto;
+  }
+`;
+
+export default StyledDialogLoader;
diff --git a/packages/asc-web-common/components/Loaders/DialogLoader/index.js b/packages/asc-web-common/components/Loaders/DialogLoader/index.js
@@ -0,0 +1 @@
+export default from "./DialogLoader";
diff --git a/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js b/packages/asc-web-common/components/Loaders/TreeFolderLoader/TreeFolderLoader.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { StyledTreeFolder, StyledContainer } from "./StyledTreeFolderLoader";
 import RectangleLoader from "../RectangleLoader";
-import CircleLoader from "../CircleLoader";
+import TreeNodeLoader from "../TreeNodeLoader";
 
 const TreeFolderLoader = ({ id, className, style, ...rest }) => {
   const {
@@ -19,173 +19,19 @@ const TreeFolderLoader = ({ id, className, style, ...rest }) => {
   return (
     <div id={id} className={className} style={style}>
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <CircleLoader
-          title={title}
-          height="32"
-          radius="3"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledTreeFolder>
-        <CircleLoader
-          title={title}
-          radius="3"
-          height="32"
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
-        <RectangleLoader
-          title={title}
-          width="100%"
-          height="24"
-          borderRadius={borderRadius}
-          backgroundColor={backgroundColor}
-          foregroundColor={foregroundColor}
-          backgroundOpacity={backgroundOpacity}
-          foregroundOpacity={foregroundOpacity}
-          speed={speed}
-          animate={animate}
-        />
+        <TreeNodeLoader {...rest} />
       </StyledTreeFolder>
 
       <StyledContainer>