Web: ManualBackup: Changed styles according to layouts

2021-10-01 11:50:44 +03:00 · 2021-10-01 11:50:44 +03:00 · ec13120919
commit ec13120919
parent 2c56a3af90
13 changed files with 59 additions and 64 deletions
--- 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%") ||
--- 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 = {
--- 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 && (
--- 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}
        />

        <SelectFolderDialog
--- a/web/ASC.Web.Client/public/locales/en/Settings.json
+++ b/web/ASC.Web.Client/public/locales/en/Settings.json
@ -98,11 +98,9 @@
  "DocumentsModuleDescription": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> Common Documents.",
  "IncludeMail": "Include Mail in backup (last 30 days)",
  "ThirdPartyResource": "Third-party resource",
-  "ThirdPartyResourceDescription": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> (DropBox, Box.com, OneDrive or Google Drive).",
-  "ThirdPartyResourceNoteDescription": "You need to connect your cloud drive account to {{organizationName}} Common Documents folder before you will be able to save your backup there.",
+  "ThirdPartyResourceDescription": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> (DropBox, Box.com, OneDrive or Google Drive). You need to connect your cloud drive account to {{organizationName}} Common Documents folder before you will be able to save your backup there.",
  "ThirdPartyStorage": "Third-party storage",
-  "ThirdPartyStorageDescription": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>.",
-  "ThirdPartyStorageNoteDescription": "The corresponding service must be previously connected in the Integration section. Otherwise the following settings will be disabled.",
+  "ThirdPartyStorageDescription": "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>. The corresponding service must be previously connected in the Integration section. Otherwise the following settings will be disabled.",
  "DisableAutomaticBackup": "Disable",
  "EnableAutomaticBackup": "Enable",
  "MonthlyPeriodSchedule": "Every month",
--- a/web/ASC.Web.Client/public/locales/ru/Settings.json
+++ b/web/ASC.Web.Client/public/locales/ru/Settings.json
@ -98,11 +98,9 @@
  "DocumentsModuleDescription": "Резервная копия будет сохранена в разделе 'Общие документы'.",
  "IncludeMail": "Включить почту в резервную копию (за последние 30 дней)",
  "ThirdPartyResource": "Сторонний ресурс",
-  "ThirdPartyResourceDescription": "Резервная копия может быть сохранена на вашем облачном диске (DropBox, Box.com, OneDrive or Google Drive).",
-  "ThirdPartyResourceNoteDescription": "Прежде чем Вы сможете сохранять резервные копии в стороннем аккаунте (Dropbox, Box.com, OneDrive или Google Drive), потребуется подключить его к папке 'Общие' {{organizationName}}.",
+  "ThirdPartyResourceDescription": "Резервная копия может быть сохранена на вашем облачном диске (DropBox, Box.com, OneDrive or Google Drive). Прежде чем Вы сможете сохранять резервные копии в стороннем аккаунте (Dropbox, Box.com, OneDrive или Google Drive), потребуется подключить его к папке 'Общие' {{organizationName}}.",
  "ThirdPartyStorage": "Стороннее хранилище",
-  "ThirdPartyStorageDescription": "Резервная копия может быть сохранена на стороннем хранилище.",
-  "ThirdPartyStorageNoteDescription": "Соответствующий сервис необходимо предварительно подключить в разделе 'Интеграция'. В противном случае указанные ниже настройки будут неактивны.",
+  "ThirdPartyStorageDescription": "Резервная копия может быть сохранена на стороннем хранилище. Соответствующий сервис необходимо предварительно подключить в разделе 'Интеграция'. В противном случае указанные ниже настройки будут неактивны.",
  "DisableAutomaticBackup": "Запрещать",
  "EnableAutomaticBackup": "Давать возможность",
  "MonthlyPeriodSchedule": "Каждый месяц",
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/manual-backup.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/manual-backup.js
@ -493,10 +493,6 @@ class ManualBackup extends React.Component {
          <Text className="category-item-description">
            {t("ThirdPartyResourceDescription")}
          </Text>
-          <Text className="category-item-description note_description">
-            {t("ThirdPartyResourceNoteDescription")}
-          </Text>
-
          {isCheckedThirdParty && (
            <ThirdPartyModule
              maxProgress={maxProgress}
@ -523,9 +519,6 @@ class ManualBackup extends React.Component {
          <Text className="category-item-description">
            {t("ThirdPartyStorageDescription")}
          </Text>
-          <Text className="category-item-description note_description">
-            {t("ThirdPartyStorageNoteDescription")}
-          </Text>
          {isCheckedThirdPartyStorage && (
            <ThirdPartyStorageModule
              maxProgress={maxProgress}
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/styled-backup.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/styled-backup.js
@ -2,15 +2,10 @@ import styled from "styled-components";
 import commonSettingsStyles from "../../utils/commonSettingsStyles";

 const StyledComponent = styled.div`
-  ${commonSettingsStyles}
-
  .manual-backup_buttons {
    margin-top: 16px;
  }

-  .backup_combobox {
-    margin-top: 8px;
-  }
  .inherit-title-link {
    margin-bottom: 8px;
  }
@ -27,15 +22,16 @@ const StyledComponent = styled.div`
  .radio-button_text {
    margin-right: 7px;
    margin-left: 8px;
-    //font-size: 19px;
+    font-size: 13px;
    font-weight: 600;
  }
  .backup_radio-button {
    margin-bottom: 8px;
  }
-  .backup_combobox {
+  .schedule-backup_combobox {
    display: inline-block;
    margin-right: 8px;
+    margin-top: 8px;
  }

  .input-with-folder-path {
@ -46,7 +42,7 @@ const StyledComponent = styled.div`
  .input-with-folder-path,
  .text-input-with-folder-path {
    width: 100%;
-    max-width: 820px;
+    max-width: 350px;
  }
  .restore-source {
    font-weight: 600;
@ -75,17 +71,40 @@ const StyledComponent = styled.div`
    text-decoration: underline;
    cursor: pointer;
  }
+
  .restore-backup_input {
    margin: 16px 0;
    max-width: 820px;
  }
-`;
-const StyledModules = styled.div`
-  margin-bottom: 40px;
-  .category-item-description {
-    ${(props) => 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`}
--- 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 && (
          <ComboBox
@ -55,7 +55,7 @@ const ScheduleComponent = ({
            scaled={false}
            scaledOptions={true}
            size="content"
-            className="backup_combobox"
+            className="schedule-backup_combobox"
          />
        )}
        {monthlySchedule && (
@ -72,7 +72,7 @@ const ScheduleComponent = ({
            scaledOptions={true}
            dropDownMaxHeight={300}
            size="content"
-            className="backup_combobox month_options"
+            className="schedule-backup_combobox month_options"
          />
        )}
        <ComboBox
@ -88,7 +88,7 @@ const ScheduleComponent = ({
          scaledOptions={true}
          dropDownMaxHeight={300}
          size="content"
-          className="backup_combobox time_options"
+          className="schedule-backup_combobox time_options"
        />
      </div>
      <div className="maxCopiesOption">
@ -105,7 +105,7 @@ const ScheduleComponent = ({
          scaledOptions={true}
          dropDownMaxHeight={300}
          size="content"
-          className="backup_combobox max_copies"
+          className="schedule-backup_combobox max_copies"
        />
      </div>
    </StyledScheduleComponent>
--- 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;
--- 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"}
        />

        <div className="manual-backup_buttons">
--- 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")}
          </Link>
@ -115,6 +116,7 @@ class ThirdPartyModule extends React.Component {
          isError={isError}
          folderPath={folderPath}
          foldersType="third-party"
+          fontSizeInput={"13px"}
        />

        <div className="manual-backup_buttons">
--- 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")}
          </Link>