From 1b6a7ab2bafb69d40fbd75973e4a65603f30f489 Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Mon, 28 Mar 2022 22:18:16 +0300
Subject: [PATCH] Web:Studio:Added SettingsPageLayout, SettingsPageMobileView
 components.

---
 .../categories/common/SettingsPageLayout.js   | 76 +++++++++++++++++++
 .../common/SettingsPageMobileView.js          | 37 +++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js
 create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js
new file mode 100644
index 0000000000..73185cd794
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js
@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { Base } from "@appserver/components/themes";
+import { isSmallTablet } from "@appserver/components/utils/device";
+
+const StyledComponent = styled.div`
+  .combo-button-label {
+    max-width: 100%;
+  }
+
+  .settings-block {
+    margin-bottom: 24px;
+  }
+
+  .category-description {
+    line-height: 20px;
+    color: #657077;
+    margin-bottom: 20px;
+  }
+
+  .category-item-wrapper:not(:last-child) {
+    border-bottom: 1px solid #eceef1;
+    margin-bottom: 24px;
+  }
+
+  .category-item-description {
+    color: ${(props) => props.theme.studio.settings.common.descriptionColor};
+    font-size: 12px;
+    max-width: 1024px;
+  }
+
+  .category-item-heading {
+    display: flex;
+    align-items: center;
+    padding-bottom: 16px;
+  }
+
+  .category-item-title {
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    margin-right: 4px;
+  }
+
+  @media (min-width: 600px) {
+    .settings-block {
+      max-width: 350px;
+      height: auto;
+    }
+  }
+`;
+
+StyledComponent.defaultProps = { theme: Base };
+
+const SettingsPageLayout = ({ children }) => {
+  const [mobileView, setMobileView] = useState();
+
+  const checkInnerWidth = () => {
+    if (isSmallTablet()) {
+      setMobileView(true);
+    } else {
+      setMobileView(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", checkInnerWidth);
+    return () => window.removeEventListener("resize", checkInnerWidth);
+  }, [checkInnerWidth]);
+
+  //TODO: Add menu, hide along the route
+  const isMobile = !!(isSmallTablet() || mobileView);
+  return <>{children(isMobile)}</>;
+};
+
+export default SettingsPageLayout;
diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js
new file mode 100644
index 0000000000..6b35c082a9
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageMobileView.js
@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import { Base } from "@appserver/components/themes";
+
+const StyledComponent = styled.div`
+  .combo-button-label {
+    max-width: 100%;
+  }
+
+  .category-item-wrapper {
+    padding-top: 20px;
+
+    .category-item-heading {
+      padding-bottom: 8px;
+    }
+
+    .category-item-description {
+      color: #657077;
+      font-size: 13px;
+      max-width: 1024px;
+    }
+
+    .inherit-title-link {
+      margin-right: 4px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+  }
+`;
+
+StyledComponent.defaultProps = { theme: Base };
+
+const SettingsPageMobileView = ({ children }) => {
+  return <StyledComponent>{children}</StyledComponent>;
+};
+
+export default SettingsPageMobileView;