IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Backup: Added loaders.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2022-07-15 15:54:30 +03:00
parent cad67a6f57
commit 42bbecd463
7 changed files with 465 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
packages/asc-web-common/components/Loaders/AutoBackupLoader/StyledAutoBackup.js Normal file
View File

@ -0,0 +1,68 @@
import styled from "styled-components";
import { mobile, tablet } from "@appserver/components/utils/device";
const StyledAutoBackup = styled.div`
width: 100%;
.auto-backup-loader_main {
display: grid;
grid-template-rows: max-content max-content max-content;
grid-gap: 8px;
width: 100%;
.auto-backup-loader_title {
max-width: 118px;
}
.auto-backup-loader_title-description {
display: block;
max-width: 700px;
width: 100%;
height: 16px;
@media ${mobile} {
height: 32px;
}
}
.auto-backup-loader_toggle {
max-width: 718px;
height: 64px;
}
}
.auto-backup-loader_menu {
margin-top: 24px;
display: grid;
grid-template-rows: repeat(5, max-content);
grid-template-columns: 16px 1fr;
width: 100%;
grid-column-gap: 8px;
.auto-backup-loader_option {
height: 40px;
max-width: 700px;
@media ${tablet} {
height: 54px;
}
}
.auto-backup-loader_option-description {
margin-top: 8px;
height: 32px;
max-width: 350px;
}
.auto-backup-loader_option-description-second {
margin-top: 16px;
height: 20px;
max-width: 119px;
}
.auto-backup-loader_option-description-third,
.auto-backup-loader_option-description-fourth {
margin-top: 4px;
height: 32px;
max-width: 350px;
}
}
`;
export default StyledAutoBackup;

149
packages/asc-web-common/components/Loaders/AutoBackupLoader/index.js Normal file
View File

@ -0,0 +1,149 @@
import React from "react";
import RectangleLoader from "../RectangleLoader/RectangleLoader";
import StyledAutoBackup from "./StyledAutoBackup";
const AutoBackupLoader = ({ id, className, style, isRectangle, ...rest }) => {
const {
title,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledAutoBackup>
<div className="auto-backup-loader_main">
<RectangleLoader
className="auto-backup-loader_title"
title={title}
width="100%"
height="22"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="auto-backup-loader_title-description"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="auto-backup-loader_toggle"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
<div className="auto-backup-loader_menu">
<RectangleLoader
title={title}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="auto-backup-loader_option"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<div></div>
<RectangleLoader
className="auto-backup-loader_option-description"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<div></div>
<RectangleLoader
className="auto-backup-loader_option-description-second"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<div></div>
<RectangleLoader
className="auto-backup-loader_option-description-third"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<div></div>
<RectangleLoader
className="auto-backup-loader_option-description-fourth"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
</StyledAutoBackup>
);
};
export default AutoBackupLoader;

71
packages/asc-web-common/components/Loaders/DataBackupLoader/StyledDataBackup.js Normal file
View File

@ -0,0 +1,71 @@
import styled from "styled-components";
import { mobile, tablet } from "@appserver/components/utils/device";
const StyledDataBackup = styled.div`
width: 100%;
.data-backup-loader_main {
display: grid;
grid-template-rows: 1fr;
grid-gap: 8px;
width: 100%;
.data-backup-loader_title {
max-width: 118px;
}
.data-backup-loader_title-description {
display: block;
max-width: 700px;
width: 100%;
height: 16px;
@media ${mobile} {
height: 32px;
}
}
}
.data-backup-loader {
margin-top: 24px;
display: grid;
grid-template-rows: repeat(5, max-content);
grid-template-columns: 16px 1fr;
width: 100%;
grid-column-gap: 8px;
.data-backup-loader_menu,
.data-backup-loader_menu-higher,
.data-backup-loader_menu-last {
height: 40px;
max-width: 700px;
width: 100%;
margin-bottom: 16px;
}
.data-backup-loader_menu-higher {
height: 72px;
@media ${mobile} {
height: 120px;
}
}
.data-backup-loader_menu-last {
height: 56px;
@media ${mobile} {
height: 88px;
}
}
.data-backup-loader_menu-description {
margin-bottom: 16px;
height: 32px;
max-width: 285px;
width: 100%;
@media ${tablet} {
height: 40px;
}
}
}
`;
export default StyledDataBackup;

168
packages/asc-web-common/components/Loaders/DataBackupLoader/index.js Normal file
View File

@ -0,0 +1,168 @@
import React from "react";
import RectangleLoader from "../RectangleLoader/RectangleLoader";
import StyledDataBackup from "./StyledDataBackup";
const DataBackupLoader = ({ id, className, style, isRectangle, ...rest }) => {
const {
title,
borderRadius,
backgroundColor,
foregroundColor,
backgroundOpacity,
foregroundOpacity,
speed,
animate,
} = rest;
return (
<StyledDataBackup>
<div className="data-backup-loader_main">
<RectangleLoader
className="data-backup-loader_title"
title={title}
width="100%"
height="22"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="data-backup-loader_title-description"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
<div className="data-backup-loader">
<RectangleLoader
title={title}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="data-backup-loader_menu"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<div></div>
<RectangleLoader
className="data-backup-loader_menu-description"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="data-backup-loader_menu"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="data-backup-loader_menu-higher"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="16"
height="16"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
className="data-backup-loader_menu-last"
title={title}
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</div>
</StyledDataBackup>
);
};
export default DataBackupLoader;

4
packages/asc-web-common/components/Loaders/index.js
View File

@ -27,6 +27,8 @@ import SharingPanelLoader from "./SharingPanelLoader";
import SharingPanelLoaderModal from "./SharingPanelLoader/modal";
import InfoPanelBodyLoader from "./InfoPanelBodyLoader";
import InfoPanelHeaderLoader from "./InfoPanelHeaderLoader";
import DataBackupLoader from "./DataBackupLoader";
import AutoBackupLoader from "./AutoBackupLoader";
export default {
Rectangle,
@ -58,4 +60,6 @@ export default {
SharingPanelLoaderModal,
InfoPanelBodyLoader,
InfoPanelHeaderLoader,
DataBackupLoader,
AutoBackupLoader,
};

7
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/auto-backup/index.js
View File

@ -1,6 +1,5 @@
import React from "react";
import moment from "moment";
import { isMobileOnly } from "react-device-detect";
import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import RadioButton from "@appserver/components/radio-button";
@ -10,7 +9,6 @@ import {
getBackupSchedule,
createBackupSchedule,
} from "@appserver/common/api/portal";
import Loader from "@appserver/components/loader";
import toastr from "@appserver/components/toast/toastr";
import {
BackupStorageType,
@ -24,6 +22,7 @@ import DocumentsModule from "./sub-components/DocumentsModule";
import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
import { getThirdPartyCommonFolderTree } from "@appserver/common/api/files";
import ButtonContainer from "./sub-components/ButtonContainer";
import AutoBackupLoader from "@appserver/common/components/Loaders/AutoBackupLoader";
const {
DocumentModuleType,
@ -409,7 +408,7 @@ class AutomaticBackup extends React.PureComponent {
};
return isInitialLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
<AutoBackupLoader />
) : (
<StyledAutoBackup theme={theme}>
<div className="backup_modules-header_wrapper">
@ -510,7 +509,7 @@ class AutomaticBackup extends React.PureComponent {
}
export default inject(({ auth, backup }) => {
const { language, settingsStore } = auth;
const { organizationName, theme } = settingsStore;
const { organizationName, theme } = settingsStore;
const {
backupSchedule,
commonThirdPartyList,

5
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/index.js
View File

@ -1,13 +1,11 @@
import React from "react";
import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
import { inject, observer } from "mobx-react";
import Text from "@appserver/components/text";
import Button from "@appserver/components/button";
import { startBackup } from "@appserver/common/api/portal";
import RadioButton from "@appserver/components/radio-button";
import toastr from "@appserver/components/toast/toastr";
import Loader from "@appserver/components/loader";
import { BackupStorageType } from "@appserver/common/constants";
import ThirdPartyModule from "./sub-components/ThirdPartyModule";
import DocumentsModule from "./sub-components/DocumentsModule";
@ -15,6 +13,7 @@ import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
import { StyledModules, StyledManualBackup } from "./../StyledBackup";
import { saveToSessionStorage, getFromSessionStorage } from "../../../../utils";
import { getThirdPartyCommonFolderTree } from "@appserver/common/api/files";
import DataBackupLoader from "@appserver/common/components/Loaders/DataBackupLoader";
let selectedStorageType = "";
@ -216,7 +215,7 @@ class ManualBackup extends React.Component {
};
return isInitialLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
<DataBackupLoader />
) : (
<StyledManualBackup>
<div className="backup_modules-header_wrapper">