From ec13120919c394e830c3fd709cd6f5679534fd1a Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Fri, 1 Oct 2021 11:50:44 +0300 Subject: [PATCH] Web: ManualBackup: Changed styles according to layouts --- .../SimpleFileInput/StyledSimpleFileInput.js | 9 +++- .../src/components/SimpleFileInput/index.js | 1 + .../panels/SelectFileInput/index.js | 2 + .../panels/SelectFolderInput/index.js | 2 + .../public/locales/en/Settings.json | 6 +-- .../public/locales/ru/Settings.json | 6 +-- .../data-management/manual-backup.js | 7 --- .../data-management/styled-backup.js | 45 +++++++++++++------ .../scheduleComponent.js | 10 ++--- .../thirdPartyStorageModule.js | 14 +----- .../DocumentsModule.js | 1 + .../ThirdPartyModule.js | 2 + .../ThirdPartyStorageModule.js | 18 +------- 13 files changed, 59 insertions(+), 64 deletions(-) diff --git a/products/ASC.Files/Client/src/components/SimpleFileInput/StyledSimpleFileInput.js b/products/ASC.Files/Client/src/components/SimpleFileInput/StyledSimpleFileInput.js index eb421ddbf6..110bd95b9a 100644 --- a/products/ASC.Files/Client/src/components/SimpleFileInput/StyledSimpleFileInput.js +++ b/products/ASC.Files/Client/src/components/SimpleFileInput/StyledSimpleFileInput.js @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Base from "@appserver/components/themes/base"; const paddingRightStyle = (props) => @@ -14,7 +14,12 @@ const StyledFileInput = styled.div` outline: none; .file-text-input { width: 100%; - max-width: 820px; + max-width: ${(props) => (props.maxWidth ? props.maxWidth : "350px")}; + ${(props) => + props.fontSizeInput && + css` + font-size: ${props.fontSizeInput}; + `} } width: ${(props) => (props.scale && "100%") || diff --git a/products/ASC.Files/Client/src/components/SimpleFileInput/index.js b/products/ASC.Files/Client/src/components/SimpleFileInput/index.js index 426c3dd2bc..b109868fb3 100644 --- a/products/ASC.Files/Client/src/components/SimpleFileInput/index.js +++ b/products/ASC.Files/Client/src/components/SimpleFileInput/index.js @@ -96,6 +96,7 @@ SimpleFileInput.propTypes = { isDisabled: PropTypes.bool, /** Used as HTML `name` property */ name: PropTypes.string, + fontSizeInput: PropTypes.string, }; SimpleFileInput.defaultProps = { diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js b/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js index 6416b95c3e..5b0dd33357 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFileInput/index.js @@ -49,6 +49,7 @@ class SelectFileInputBody extends React.PureComponent { loadingLabel, header, zIndex, + fontSizeInput, } = this.props; const { fileName } = this.state; @@ -61,6 +62,7 @@ class SelectFileInputBody extends React.PureComponent { isDisabled={isDisabled} isError={isError} onClickInput={onClickInput} + fontSizeInput={fontSizeInput} /> {isPanelVisible && ( diff --git a/products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js b/products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js index 05c193596f..33319a4f5d 100644 --- a/products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js +++ b/products/ASC.Files/Client/src/components/panels/SelectFolderInput/index.js @@ -96,6 +96,7 @@ class SelectFolderInputBody extends React.PureComponent { header, headerName, footer, + fontSizeInput, } = this.props; const { isLoading, baseFolderPath, fullFolderPath } = this.state; @@ -108,6 +109,7 @@ class SelectFolderInputBody extends React.PureComponent { isDisabled={isLoading || isSavingProcess || isDisabled} isError={isError} onClickInput={onClickInput} + fontSizeInput={fontSizeInput} /> {t("ThirdPartyResourceDescription")} - - {t("ThirdPartyResourceNoteDescription")} - - {isCheckedThirdParty && ( {t("ThirdPartyStorageDescription")} - - {t("ThirdPartyStorageNoteDescription")} - {isCheckedThirdPartyStorage && ( props.isDisabled && `color: #A3A9AE`} + + .backup_combo { + margin-top: 16px; + width: 100%; + max-width: 350px; + .combo-button-label { + width: 100%; + max-width: 350px; + } + } + .backup_text-input { + margin: 10px 0; + width: 100%; + max-width: 350px; + font-size: 13px; } `; + +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` .category-item-description { ${(props) => props.isDisabled && `color: #A3A9AE`} diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/scheduleComponent.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/scheduleComponent.js index cacbca176c..e8500a3eaf 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/scheduleComponent.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/scheduleComponent.js @@ -40,7 +40,7 @@ const ScheduleComponent = ({ scaled={false} scaledOptions={true} size="content" - className="backup_combobox " + className="schedule-backup_combobox " /> {weeklySchedule && ( )} {monthlySchedule && ( @@ -72,7 +72,7 @@ const ScheduleComponent = ({ scaledOptions={true} dropDownMaxHeight={300} size="content" - className="backup_combobox month_options" + className="schedule-backup_combobox month_options" /> )}
@@ -105,7 +105,7 @@ const ScheduleComponent = ({ scaledOptions={true} dropDownMaxHeight={300} size="content" - className="backup_combobox max_copies" + className="schedule-backup_combobox max_copies" />
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js index 41c5b21d47..08f09b5224 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js @@ -21,19 +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"; - -const StyledComponent = styled.div` - .backup_combo { - margin-top: 16px; - width: 100%; - max-width: 820px; - } - .backup_text-input { - margin: 10px 0; - width: 100%; - max-width: 820px; - } -`; +import { StyledComponent } from "../styled-backup"; let googleStorageId = "GoogleCloud"; let inputValueArray; diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/DocumentsModule.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/DocumentsModule.js index ba9d30f02f..78fb036d1d 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/DocumentsModule.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/DocumentsModule.js @@ -82,6 +82,7 @@ class DocumentsModule extends React.Component { isSavingProcess={isCopyingLocal} foldersType="common" isCommonWithoutProvider + fontSizeInput={"13px"} />
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyModule.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyModule.js index 5a29c47396..171633baa5 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyModule.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyModule.js @@ -99,6 +99,7 @@ class ThirdPartyModule extends React.Component { target="_blank" isHovered={true} href={helpUrlCreatingBackup} + fontSize="12px" > {t("Common:LearnMore")} @@ -115,6 +116,7 @@ class ThirdPartyModule extends React.Component { isError={isError} folderPath={folderPath} foldersType="third-party" + fontSizeInput={"13px"} />
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js index 4fc7a3d28e..374341146d 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/ThirdPartyStorageModule.js @@ -15,22 +15,7 @@ import AmazonStorage from "./storages/AmazonStorage"; import { getOptions } from "../utils/getOptions"; import { ThirdPartyStorages } from "@appserver/common/constants"; import { getFromSessionStorage } from "../../../utils"; -const StyledComponent = styled.div` - .backup_combo { - margin-top: 16px; - width: 100%; - max-width: 820px; - .combo-button-label { - width: 100%; - max-width: 820px; - } - } - .backup_text-input { - margin: 10px 0; - width: 100%; - max-width: 820px; - } -`; +import { StyledComponent } from "../styled-backup"; let selectedStorageFromSessionStorage = ""; let selectedIdFromSessionStorage = ""; @@ -175,6 +160,7 @@ class ThirdPartyStorageModule extends React.PureComponent { target="_blank" isHovered={true} href={helpUrlCreatingBackup} + fontSize="12px" > {t("Common:LearnMore")}