Web: Backup: Added loaders.
This commit is contained in:
parent
cad67a6f57
commit
42bbecd463
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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,
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user