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

Web: Separating styles for modules.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-10-01 12:34:53 +03:00
parent 7bd43d92c6
commit da05a2c8a6
8 changed files with 101 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/automatic-backup.js
View File

@ -22,7 +22,7 @@ import { AppServerConfig } from "@appserver/common/constants";
import { combineUrl } from "@appserver/common/utils";
import FloatingButton from "@appserver/common/components/FloatingButton";
import { StyledModules, StyledComponent } from "./styled-backup";
import { StyledModules, StyledAutoBackup } from "./styled-backup";
import ThirdPartyModule from "./sub-components-automatic-backup/thirdPartyModule";
import DocumentsModule from "./sub-components-automatic-backup/documentsModule";
import ThirdPartyStorageModule from "./sub-components-automatic-backup/thirdPartyStorageModule";
@ -667,7 +667,7 @@ class AutomaticBackup extends React.PureComponent {
return isLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (
<StyledComponent>
<StyledAutoBackup>
<RadioButtonGroup
className="automatic-backup_main "
name={"0"}
@ -767,9 +767,6 @@ class AutomaticBackup extends React.PureComponent {
<Text className="category-item-description">
{t("ThirdPartyResourceDescription")}
</Text>
<Text className="category-item-description note_description">
{t("ThirdPartyResourceNoteDescription")}
</Text>
{isShowThirdParty && (
<ThirdPartyModule
@ -822,9 +819,7 @@ class AutomaticBackup extends React.PureComponent {
<Text className="category-item-description">
{t("ThirdPartyStorageDescription")}
</Text>
<Text className="category-item-description note_description">
{t("ThirdPartyStorageNoteDescription")}
</Text>
{isShowThirdPartyStorage && (
<ThirdPartyStorageModule
isCopyingToLocal={isCopyingToLocal}
@ -887,7 +882,7 @@ class AutomaticBackup extends React.PureComponent {
onClick={this.onClickFloatingButton}
/>
)}
</StyledComponent>
</StyledAutoBackup>
);
}
}

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

@ -11,7 +11,7 @@ import ThirdPartyStorageModule from "./sub-components-manual-backup/ThirdPartySt
import FloatingButton from "@appserver/common/components/FloatingButton";
import RadioButton from "@appserver/components/radio-button";
import { StyledModules, StyledComponent } from "./styled-backup";
import { StyledModules, StyledManualBackup } from "./styled-backup";
import SelectFolderDialog from "files/SelectFolderDialog";
import Loader from "@appserver/components/loader";
import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
@ -388,7 +388,7 @@ class ManualBackup extends React.Component {
return isLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (
<StyledComponent>
<StyledManualBackup>
<StyledModules>
<RadioButton
fontSize="13px"
@ -536,7 +536,7 @@ class ManualBackup extends React.Component {
percent={downloadingProgress}
/>
)}
</StyledComponent>
</StyledManualBackup>
);
}
}

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

@ -8,13 +8,12 @@ import Checkbox from "@appserver/components/checkbox";
import Text from "@appserver/components/text";
import RadioButton from "@appserver/components/radio-button";
import SelectFolderDialog from "files/SelectFolderDialog";
import { StyledComponent } from "./styled-backup";
import { StyledRestoreBackup, StyledRestoreModules } from "./styled-backup";
import BackupListModalDialog from "./sub-components-restore-backup/backupListModalDialog";
import Documents from "./sub-components-restore-backup/documents";
import ThirdPartyResources from "./sub-components-restore-backup/thirdPartyResources";
import ThirdPartyStorages from "./sub-components-restore-backup/thirdPartyStorages";
import LocalFile from "./sub-components-restore-backup/localFile";
import { StyledRestoreModules } from "./styled-backup";
import toastr from "@appserver/components/toast/toastr";
import { startRestore } from "../../../../../../../../packages/asc-web-common/api/portal";
@ -294,7 +293,7 @@ class RestoreBackup extends React.Component {
return isLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (
<StyledComponent>
<StyledRestoreBackup>
<Text className="category-item-description">
{t("DataRestoreDescription")}
</Text>
@ -438,7 +437,7 @@ class RestoreBackup extends React.Component {
size="medium"
tabIndex={10}
/>
</StyledComponent>
</StyledRestoreBackup>
);
}
}

152
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/styled-backup.js
View File

@ -1,24 +1,7 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import commonSettingsStyles from "../../utils/commonSettingsStyles";
const StyledComponent = styled.div`
.manual-backup_buttons {
margin-top: 16px;
}
.inherit-title-link {
margin-bottom: 8px;
}
.note_description {
margin-top: 8px;
}
.automatic-backup_main {
margin-bottom: 30px;
.radio-button_text {
font-size: 13px;
}
}
const commonStyles = css`
.radio-button_text {
margin-right: 7px;
margin-left: 8px;
@ -28,52 +11,6 @@ const StyledComponent = styled.div`
.backup_radio-button {
margin-bottom: 8px;
}
.schedule-backup_combobox {
display: inline-block;
margin-right: 8px;
margin-top: 8px;
}
.input-with-folder-path {
margin-top: 16px;
margin-bottom: 8px;
width: 100%;
max-width: 350px;
}
.restore-source {
font-weight: 600;
margin-top: 30px;
margin-bottom: 15px;
font-size: 15px;
}
.restore-warning {
font-weight: 600;
margin-top: 18px;
margin-bottom: 15px;
font-size: 19px;
color: #c30;
}
.restore-warning_link {
margin: 15px 0;
}
.restore-backup-checkbox {
margin-bottom: 24px;
}
.restore-backup-checkbox_notification {
margin-top: 15px;
}
.restore-backup_list {
color: #316daa;
text-decoration: underline;
cursor: pointer;
}
.restore-backup_input {
margin: 16px 0;
max-width: 820px;
}
.backup_combo {
margin-top: 16px;
width: 100%;
@ -91,15 +28,82 @@ const StyledComponent = styled.div`
}
`;
const StyledManualBackup = styled.div`
${commonStyles}
.manual-backup_buttons {
margin-top: 16px;
}
`;
const StyledAutoBackup = styled.div`
${commonStyles}
.automatic-backup_main {
margin-bottom: 30px;
.radio-button_text {
font-size: 13px;
}
}
.schedule-backup_combobox {
display: inline-block;
margin-right: 8px;
margin-top: 8px;
}
.input-with-folder-path {
margin-top: 16px;
margin-bottom: 8px;
width: 100%;
max-width: 350px;
}
`;
const StyledRestoreBackup = styled.div`
${commonStyles}
.restore-source {
// restore
font-weight: 600;
margin-top: 30px;
margin-bottom: 15px;
font-size: 15px;
}
.restore-warning {
// restore
font-weight: 600;
margin-top: 18px;
margin-bottom: 15px;
font-size: 19px;
color: #c30;
}
.restore-warning_link {
// restore
margin: 15px 0;
}
.restore-backup-checkbox {
// restore
margin-bottom: 24px;
}
.restore-backup-checkbox_notification {
// restore
margin-top: 15px;
}
.restore-backup_list {
// restore
color: #316daa;
text-decoration: underline;
cursor: pointer;
}
.restore-backup_input {
// restore
margin: 16px 0;
max-width: 820px;
}
`;
const StyledModules = styled.div`
margin-bottom: 32px;
.category-item-description {
${(props) => props.isDisabled && `color: #A3A9AE`}
max-width: 476px;
font-size: 12px;
line-height: 15px;
}
`;
const StyledRestoreModules = styled.div`
@ -235,9 +239,11 @@ const StyledBackupList = styled.div`
`;
export {
StyledModules,
StyledComponent,
StyledRestoreBackup,
StyledScheduleComponent,
StyledBackup,
StyledRestoreModules,
StyledBackupList,
StyledManualBackup,
StyledAutoBackup,
};

6
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/documentsModule.js
View File

@ -11,7 +11,7 @@ import {
import toastr from "@appserver/components/toast/toastr";
import { saveToSessionStorage, getFromSessionStorage } from "../.././../utils";
import { StyledComponent } from "../styled-backup";
import { StyledAutoBackup } from "../styled-backup";
import TextInput from "@appserver/components/text-input";
let numberPeriodFromSessionStorage = null;
@ -607,9 +607,9 @@ class DocumentsModule extends React.Component {
isSavingProcess={isLoadingData}
/>
) : (
<StyledComponent>
<StyledAutoBackup>
<TextInput className="input-with-folder-path" isDisabled={true} />
</StyledComponent>
</StyledAutoBackup>
)}
<ScheduleComponent
weeklySchedule={weeklySchedule}

6
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyModule.js
View File

@ -15,7 +15,7 @@ import TextInput from "@appserver/components/text-input";
import Box from "@appserver/components/box";
import Link from "@appserver/components/link";
import { saveToSessionStorage, getFromSessionStorage } from "../.././../utils";
import { StyledComponent } from "../styled-backup";
import { StyledAutoBackup } from "../styled-backup";
let numberPeriodFromSessionStorage = null;
let dayFromSessionStorage = "";
@ -611,9 +611,9 @@ class ThirdPartyModule extends React.Component {
isSavingProcess={isLoadingData}
/>
) : (
<StyledComponent>
<StyledAutoBackup>
<TextInput className="input-with-folder-path" isDisabled={true} />
</StyledComponent>
</StyledAutoBackup>
)}
<ScheduleComponent
weeklySchedule={weeklySchedule}

6
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js
View File

@ -21,7 +21,7 @@ import AmazonStorage from "./amazonStorage";
import { saveToSessionStorage, getFromSessionStorage } from "../.././../utils";
import ScheduleComponent from "../sub-components-automatic-backup/scheduleComponent";
import { ThirdPartyStorages } from "@appserver/common/constants";
import { StyledComponent } from "../styled-backup";
import { StyledAutoBackup } from "../styled-backup";
let googleStorageId = "GoogleCloud";
let inputValueArray;
@ -727,7 +727,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
} = this.state;
return (
<StyledComponent>
<StyledAutoBackup>
<Box marginProp="16px 0 16px 0">
<Link
color="#316DAA"
@ -843,7 +843,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
onSelectWeekDay={this.onSelectWeekDay}
onSelectPeriod={this.onSelectPeriod}
/>
</StyledComponent>
</StyledAutoBackup>
);
}
}

6
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js
View File

@ -15,7 +15,7 @@ import AmazonStorage from "./storages/AmazonStorage";
import { getOptions } from "../utils/getOptions";
import { ThirdPartyStorages } from "@appserver/common/constants";
import { getFromSessionStorage } from "../../../utils";
import { StyledComponent } from "../styled-backup";
import { StyledManualBackup } from "../styled-backup";
let selectedStorageFromSessionStorage = "";
let selectedIdFromSessionStorage = "";
@ -153,7 +153,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
} = this.state;
return (
<StyledComponent>
<StyledManualBackup>
<Box marginProp="16px 0 16px 0">
<Link
color="#316DAA"
@ -224,7 +224,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
isInvalidForm={this.isInvalidForm}
/>
)}
</StyledComponent>
</StyledManualBackup>
);
}
}