Merge branch 'feature/virtual-rooms-1.2' of github.com:ONLYOFFICE/AppServer into feature/ip-security

2022-04-11 17:10:12 +03:00 · 2022-04-11 17:10:12 +03:00 · 27af58022d
commit 27af58022d
parent 44c2a267d4 866a6f6c26
9 changed files with 125 additions and 96 deletions
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@ -1950,7 +1950,7 @@ const Dark = {

    header: {
      backgroundColor: black,
-      background: `linear-gradient(180deg,#333333 2.81%,rgba(51, 51, 51, 0.91) 63.03%,rgba(255, 255, 255, 0) 100%)`,
+      background: `linear-gradient(180deg, #333333 2.81%, rgba(51, 51, 51, 0.9) 63.03%, rgba(51, 51, 51, 0) 100%);`,
    },
  },

--- a/products/ASC.Files/Client/src/store/ContextOptionsStore.js
+++ b/products/ASC.Files/Client/src/store/ContextOptionsStore.js
@ -63,7 +63,7 @@ class ContextOptionsStore {
    const {
      setConvertPasswordDialogVisible,
      setFormCreationInfo,
-    } = dialogsStore;
+    } = this.dialogsStore;
    const { title, id, folderId, fileExst } = item;

    const newTitle =
@ -412,7 +412,7 @@ class ContextOptionsStore {
                },
                {
                  key: "copy",
-                  label: t("Duplicate"),
+                  label: t("Common:Duplicate"),
                  onClick: () => this.onDuplicate(item, t),
                  disabled: false,
                },
@ -436,7 +436,7 @@ class ContextOptionsStore {
            },
            {
              key: "copy",
-              label: t("Duplicate"),
+              label: t("Common:Duplicate"),
              icon: "/static/images/copy.react.svg",
              onClick: () => this.onDuplicate(item, t),
              disabled: false,
--- a/products/ASC.Files/Client/src/store/HotkeyStore.js
+++ b/products/ASC.Files/Client/src/store/HotkeyStore.js
@ -49,7 +49,7 @@ class HotkeyStore {

    if (!hotkeyCaret) {
      const scroll = document.getElementsByClassName("section-scroll");
-      scroll && scroll[0].focus();
+      scroll && scroll[0] && scroll[0].focus();
    }

    if (!hotkeyCaret && selection.length) {
--- a/web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Body/index.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/Layout/Article/Body/index.js
@ -6,6 +6,10 @@ import { withTranslation } from "react-i18next";

 import { isArrayEqual } from "@appserver/components/utils/array";

+import { isMobileOnly } from "react-device-detect";
+
+import { isMobile } from "@appserver/components/utils/device";
+
 import {
  //getKeyByLink,
  settingsTree,
@ -55,7 +59,7 @@ class ArticleBodyContent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (!isArrayEqual(prevState.selectedKeys, this.state.selectedKeys)) {
      const { selectedKeys } = this.state;
-      console.log(selectedKeys);
+
      const { match, history } = this.props;
      const settingsPath = getSelectedLinkByKey(selectedKeys[0], settingsTree);
      const newPath = match.path + settingsPath;
@ -66,13 +70,17 @@ class ArticleBodyContent extends React.Component {
  onSelect = (value) => {
    const { selectedKeys } = this.state;

-    console.log(selectedKeys, value);
+    const { toggleArticleOpen } = this.props;

    if (isArrayEqual([value], selectedKeys)) {
      return;
    }

    this.setState({ selectedKeys: [value + "-0"] });
+
+    if (isMobileOnly || isMobile()) {
+      toggleArticleOpen();
+    }
  };

  mapKeys = (tKey) => {
@ -145,5 +153,6 @@ class ArticleBodyContent extends React.Component {
 export default inject(({ auth }) => {
  return {
    showText: auth.settingsStore.showText,
+    toggleArticleOpen: auth.settingsStore.toggleArticleOpen,
  };
 })(withRouter(withTranslation("Settings")(observer(ArticleBodyContent))));
--- a/web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/loaderSectionHeader.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/loaderSectionHeader.js
@ -1,9 +1,16 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";
 import { isDesktop as isDesktopUtils } from "@appserver/components/utils/device";
 import { isTablet } from "react-device-detect";

+const tabletStyles = css`
+  padding-top: 12px;
+  .loader {
+    width: 184px;
+  }
+`;
+
 const StyledLoader = styled.div`
  padding-top: 8px;

@ -12,18 +19,12 @@ const StyledLoader = styled.div`
  }

  @media (min-width: 600px) {
-    padding-top: 12px;
-    .loader {
-      width: 184px;
-    }
+    ${tabletStyles}
  }

  ${isTablet &&
  css`
-    padding-top: 12px;
-    .loader {
-      width: 184px;
-    }
+    ${tabletStyles}
  `}

  @media (min-width: 1025px) {
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
@ -13,6 +13,8 @@ import { setDocumentTitle } from "../../../../../helpers/utils";
 import LoaderDescriptionCustomization from "./sub-components/loaderDescriptionCustomization";

 const StyledComponent = styled.div`
+  width: 100%;
+
  .combo-button-label {
    max-width: 100%;
  }
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomization.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomization.js
@ -1,7 +1,57 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";

+import { isTablet } from "react-device-detect";
+
+const tabletStyles = css`
+  .header {
+    display: block;
+    width: ${(props) =>
+      props.lngTZSettings
+        ? "283px"
+        : props.welcomePage
+        ? "201px"
+        : props.portalRenaming
+        ? "150px"
+        : 0};
+    padding-bottom: 16px;
+  }
+
+  .description {
+    display: none;
+  }
+
+  .title {
+    display: block;
+    width: ${(props) =>
+      props.lngTZSettings
+        ? "65px"
+        : props.welcomePage
+        ? "31px"
+        : props.portalRenaming
+        ? "113px"
+        : 0};
+  }
+
+  .combo-box {
+    display: block;
+    width: 350px;
+  }
+
+  .field-container {
+    display: block;
+    width: 350px;
+  }
+
+  .save-cancel-buttons {
+    display: block;
+    position: static;
+    width: 350px;
+    padding: 0;
+  }
+`;
+
 const StyledLoader = styled.div`
  .header {
    display: none;
@ -14,26 +64,22 @@ const StyledLoader = styled.div`

  .title {
    width: ${(props) => (props.portalRenaming ? "49px" : "63.7px")};
-    height: 20px;
    padding-bottom: 4px;
  }

  .title-long {
    display: block;
    width: 68px;
-    height: 20px;
    padding-bottom: 4px;
  }

  .combo-box {
    display: block;
-    height: 32px;
    width: 100%;
    padding-bottom: 24px;
  }

  .field-container {
-    height: 20px;
    width: 100%;
    padding-bottom: 12px;
  }
@ -48,87 +94,50 @@ const StyledLoader = styled.div`
  }

  @media (min-width: 600px) {
-    .header {
-      display: block;
-      width: ${(props) =>
-        props.lngTZSettings
-          ? "283px"
-          : props.welcomePage
-          ? "201px"
-          : props.portalRenaming
-          ? "150px"
-          : 0};
-      height: 22px;
-      padding-bottom: 16px;
-    }
-
-    .description {
-      display: none;
-    }
-
-    .title {
-      display: block;
-      width: ${(props) =>
-        props.lngTZSettings
-          ? "65px"
-          : props.welcomePage
-          ? "31px"
-          : props.portalRenaming
-          ? "113px"
-          : 0};
-      height: 20px;
-    }
-
-    .combo-box {
-      display: block;
-      width: 350px;
-    }
-
-    .field-container {
-      display: block;
-      height: 20px;
-      width: 350px;
-    }
-
-    .save-cancel-buttons {
-      display: block;
-      position: static;
-      width: 350px;
-      height: 32px;
-      padding: 0 0 24px 0;
-    }
+    ${tabletStyles}
  }
+
+  ${isTablet &&
+  `
+    ${tabletStyles}
+  `}
 `;

-const loaderCustomization = ({
+const LoaderCustomization = ({
  lngTZSettings,
  portalRenaming,
  welcomePage,
 }) => {
+  const heightSaveCancelButtons = window.innerWidth < 600 ? "40px" : "32px";
+
  return (
    <StyledLoader
      lngTZSettings={lngTZSettings}
      portalRenaming={portalRenaming}
      welcomePage={welcomePage}
+      className="category-item-wrapper"
    >
-      <Loaders.Rectangle className="header" />
+      <Loaders.Rectangle height="22px" className="header" />

      {portalRenaming && (
        <Loaders.Rectangle height="80px" className="description" />
      )}

-      <Loaders.Rectangle className="title" />
-      <Loaders.Rectangle className="combo-box" />
+      <Loaders.Rectangle height="20px" className="title" />
+      <Loaders.Rectangle height="32px" className="combo-box" />
      {lngTZSettings && (
        <>
-          <Loaders.Rectangle className="field-container" />
-          <Loaders.Rectangle className="title-long" />
-          <Loaders.Rectangle className="combo-box" />
+          <Loaders.Rectangle height="20px" className="field-container" />
+          <Loaders.Rectangle height="20px" className="title-long" />
+          <Loaders.Rectangle height="32px" className="combo-box" />
        </>
      )}
-      <Loaders.Rectangle height="40px" className="save-cancel-buttons" />
+      <Loaders.Rectangle
+        height={heightSaveCancelButtons}
+        className="save-cancel-buttons"
+      />
    </StyledLoader>
  );
 };

-export default loaderCustomization;
+export default LoaderCustomization;
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomizationNavbar.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomizationNavbar.js
@ -5,7 +5,6 @@ import Loaders from "@appserver/common/components/Loaders";
 const StyledLoader = styled.div`
  .title-long {
    width: 283px;
-    height: 22px;
    padding-bottom: 8px;
  }

@ -16,32 +15,30 @@ const StyledLoader = styled.div`

  .link {
    width: 57px;
-    height: 20px;
    padding-bottom: 20px;
  }

  .title {
    display: block;
    width: 132px;
-    height: 22px;
    padding-bottom: 8px;
  }
 `;

-const loaderCustomizationNavbar = () => {
+const LoaderCustomizationNavbar = () => {
  return (
    <StyledLoader>
-      <Loaders.Rectangle className="title-long" />
+      <Loaders.Rectangle height="22px" className="title-long" />
      <Loaders.Rectangle height="100px" className="width" />
-      <Loaders.Rectangle className="link" />
+      <Loaders.Rectangle height="20px" className="link" />

-      <Loaders.Rectangle className="title" />
+      <Loaders.Rectangle height="22px" className="title" />
      <Loaders.Rectangle height="80px" className="width" />

-      <Loaders.Rectangle className="title" />
+      <Loaders.Rectangle height="22px" className="title" />
      <Loaders.Rectangle height="20px" className="width" />
    </StyledLoader>
  );
 };

-export default loaderCustomizationNavbar;
+export default LoaderCustomizationNavbar;
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderDescriptionCustomization.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderDescriptionCustomization.js
@ -1,14 +1,25 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";
+import { isTablet } from "react-device-detect";
+
+const tabletStyles = css`
+  .description {
+    width: 684px;
+    padding-bottom: 20px;
+  }
+`;

 const StyledLoader = styled.div`
  @media (min-width: 600px) {
-    .description {
-      width: 684px;
-      padding-bottom: 20px;
-    }
+    ${tabletStyles}
  }
+
+  ${isTablet &&
+  css`
+    ${tabletStyles}
+  `}
+
  @media (min-width: 1024px) {
    .description {
      width: 700px;
@ -16,12 +27,12 @@ const StyledLoader = styled.div`
  }
 `;

-const loaderDescriptionCustomization = () => {
+const LoaderDescriptionCustomization = () => {
  return (
    <StyledLoader>
-      <Loaders.Rectangle className="description" />
+      <Loaders.Rectangle height="40px" className="description" />
    </StyledLoader>
  );
 };

-export default loaderDescriptionCustomization;
+export default LoaderDescriptionCustomization;