Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js

@@ -2,19 +2,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 
-import { isMobileOnly } from "react-device-detect";
-import { mobile } from "@appserver/components/utils/device";
+import { isMobile } from "react-device-detect";
+import { tablet } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 
 import Selector from "./sub-components/Selector";
 import Backdrop from "@appserver/components/backdrop";
 
-const mobileView = css`
-  top: 64px;
-
-  width: 100% !important;
-  height: calc(100% - 64px) !important;
-`;
+import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
 
 const StyledBlock = styled.div`
   position: fixed;
@@ -32,11 +27,22 @@ const StyledBlock = styled.div`
 
   background: ${(props) => props.theme.filterInput.filter.background};
 
-  @media ${mobile} {
-    ${mobileView}
+  @media ${tablet} {
+    max-width: calc(100% - 69px);
   }
 
-  ${isMobileOnly && mobileView}
+  ${isMobile &&
+  css`
+    max-width: calc(100% - 69px);
+  `}
+
+  @media (max-width: 428px) {
+    bottom: 0;
+    top: unset;
+    height: calc(100% - 64px);
+    width: 100%;
+    max-width: 100%;
+  }
 
   .people-selector {
     height: 100%;
@@ -51,6 +57,48 @@ const StyledBlock = styled.div`
 
 StyledBlock.defaultProps = { theme: Base };
 
+const StyledControlContainer = styled.div`
+  display: flex;
+
+  width: 24px;
+  height: 24px;
+  position: absolute;
+
+  border-radius: 100px;
+  cursor: pointer;
+
+  align-items: center;
+  justify-content: center;
+  z-index: 450;
+
+  top: 14px;
+  left: -34px;
+
+  ${isMobile &&
+  css`
+    top: 14px;
+  `}
+
+  @media (max-width: 428px) {
+    top: -34px;
+    right: 10px;
+    left: unset;
+  }
+`;
+
+StyledControlContainer.defaultProps = { theme: Base };
+
+const StyledCrossIcon = styled(CrossIcon)`
+  width: 17px;
+  height: 17px;
+  z-index: 455;
+  path {
+    fill: ${(props) => props.theme.catalog.control.fill};
+  }
+`;
+
+StyledCrossIcon.defaultProps = { theme: Base };
+
 class AdvancedSelector extends React.Component {
   constructor(props) {
     super(props);
@@ -83,6 +131,10 @@ class AdvancedSelector extends React.Component {
                 />
                 <StyledBlock>
                   <Selector {...this.props} />
+
+                  <StyledControlContainer onClick={this.onClose}>
+                    <StyledCrossIcon />
+                  </StyledControlContainer>
                 </StyledBlock>
               </>
             )}

packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js

@@ -201,6 +201,10 @@ const FilterBlock = ({
                 headerLabel={headerLabel}
               />
             )}
+
+            <StyledControlContainer onClick={hideFilterBlock}>
+              <StyledCrossIcon />
+            </StyledControlContainer>
           </StyledFilterBlock>
         </>
       ) : (
@@ -242,6 +246,10 @@ const FilterBlock = ({
               onClick={onFilterAction}
             />
           </StyledFilterBlockFooter>
+
+          <StyledControlContainer onClick={hideFilterBlock}>
+            <StyledCrossIcon />
+          </StyledControlContainer>
         </StyledFilterBlock>
       )}
 
@@ -250,10 +258,6 @@ const FilterBlock = ({
         withBackground={true}
         onClick={hideFilterBlock}
       />
-
-      <StyledControlContainer onClick={hideFilterBlock}>
-        <StyledCrossIcon />
-      </StyledControlContainer>
     </>
   );
 };

packages/asc-web-common/components/FilterInput/sub-components/StyledFilterBlock.js

@@ -1,19 +1,12 @@
 import Text from "@appserver/components/text";
 import styled, { css } from "styled-components";
-import { isMobileOnly } from "react-device-detect";
+import { isMobileOnly, isMobile } from "react-device-detect";
 
 import ToggleButton from "@appserver/components/toggle-button";
-import { mobile } from "@appserver/components/utils/device";
+import { mobile, tablet } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
 
-const mobileView = css`
-  top: 64px;
-
-  width: 100% !important;
-  height: calc(100% - 64px) !important;
-`;
-
 const StyledFilterBlock = styled.div`
   position: fixed;
   top: 0;
@@ -29,11 +22,22 @@ const StyledFilterBlock = styled.div`
 
   background: ${(props) => props.theme.filterInput.filter.background};
 
-  @media ${mobile} {
-    ${mobileView}
+  @media ${tablet} {
+    max-width: calc(100% - 69px);
   }
 
-  ${isMobileOnly && mobileView}
+  ${isMobile &&
+  css`
+    max-width: calc(100% - 69px);
+  `}
+
+  @media (max-width: 428px) {
+    bottom: 0;
+    top: unset;
+    height: calc(100% - 64px);
+    width: 100%;
+    max-width: 100%;
+  }
 
   .people-selector {
     height: 100%;
@@ -247,62 +251,51 @@ const StyledFilterBlockFooter = styled.div`
   align-items: center;
   justify-content: center;
 
-  @media ${mobile} {
+  @media (max-width: 428px) {
     width: 100%;
   }
-
-  ${isMobileOnly &&
-  css`
-    width: 100%;
-  `}
 `;
 
 StyledFilterBlockFooter.defaultProps = { theme: Base };
 
 const StyledControlContainer = styled.div`
-  background: ${(props) => props.theme.catalog.control.background};
+  display: flex;
+
   width: 24px;
   height: 24px;
-  position: fixed;
-  top: 30px;
-  right: 10px;
+  position: absolute;
+
   border-radius: 100px;
   cursor: pointer;
-  display: flex;
+
   align-items: center;
   justify-content: center;
-  z-index: 999;
-  display: none;
+  z-index: 450;
 
-  @media ${mobile} {
-    display: flex;
-  }
+  top: 14px;
+  left: -34px;
 
-  ${isMobileOnly &&
+  ${isMobile &&
   css`
-    display: flex;
+    top: 14px;
   `}
+
+  @media (max-width: 428px) {
+    top: -34px;
+    right: 10px;
+    left: unset;
+  }
 `;
 
 StyledControlContainer.defaultProps = { theme: Base };
 
 const StyledCrossIcon = styled(CrossIcon)`
-  width: 12px;
-  height: 12px;
+  width: 17px;
+  height: 17px;
+  z-index: 455;
   path {
     fill: ${(props) => props.theme.catalog.control.fill};
   }
-
-  display: none;
-
-  @media ${mobile} {
-    display: flex;
-  }
-
-  ${isMobileOnly &&
-  css`
-    display: flex;
-  `}
 `;
 
 StyledCrossIcon.defaultProps = { theme: Base };

packages/asc-web-components/context-menu/index.js

@@ -350,9 +350,6 @@ class ContextMenu extends Component {
 
     return (
       <>
-        {this.props.withBackdrop && (
-          <Backdrop visible={this.state.visible} withBackground={true} />
-        )}
         <Portal element={element} appendTo={this.props.appendTo} />
       </>
     );

products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js

@@ -94,7 +94,7 @@ const SectionBodyContent = ({
     <Error403 />
   ) : isErrorSettings ? (
     <Error520 />
-  ) : (
+  ) : !isPersonal ? (
     <div>
       <TabsContainer
         elements={elements}
@@ -102,6 +102,8 @@ const SectionBodyContent = ({
         selectedItem={selectedTab()}
       />
     </div>
+  ) : (
+    <div>{elements[0].content}</div>
   );
 };
 

products/ASC.Files/Client/src/pages/Settings/index.js

@@ -19,6 +19,7 @@ const PureSettings = ({
   setFirstLoad,
   capabilities,
   tReady,
+  isPersonal,
 }) => {
   const [title, setTitle] = useState("");
   const { setting } = match.params;
@@ -28,7 +29,9 @@ const PureSettings = ({
   }, [setFirstLoad]);
 
   useEffect(() => {
-    setTitle(t("Common:Settings"));
+    isPersonal
+      ? setTitle(t("ThirdPartySettings"))
+      : setTitle(t("Common:Settings"));
   }, [t, tReady]);
 
   useEffect(() => {
@@ -80,22 +83,25 @@ const PureSettings = ({
 
 const Settings = withTranslation(["Settings", "Common"])(PureSettings);
 
-export default inject(({ filesStore, settingsStore, treeFoldersStore }) => {
-  const { setFirstLoad, isLoading } = filesStore;
-  const { setSelectedNode } = treeFoldersStore;
-  const {
-    getFilesSettings,
-    isLoadedSettingsTree,
-    thirdPartyStore,
-  } = settingsStore;
-  const { capabilities } = thirdPartyStore;
+export default inject(
+  ({ auth, filesStore, settingsStore, treeFoldersStore }) => {
+    const { setFirstLoad, isLoading } = filesStore;
+    const { setSelectedNode } = treeFoldersStore;
+    const {
+      getFilesSettings,
+      isLoadedSettingsTree,
+      thirdPartyStore,
+    } = settingsStore;
+    const { capabilities } = thirdPartyStore;
 
-  return {
-    isLoading,
-    isLoadedSettingsTree,
-    setFirstLoad,
-    setSelectedNode,
-    getFilesSettings,
-    capabilities,
-  };
-})(withRouter(observer(Settings)));
+    return {
+      isLoading,
+      isLoadedSettingsTree,
+      setFirstLoad,
+      setSelectedNode,
+      getFilesSettings,
+      capabilities,
+      isPersonal: auth.settingsStore.personal,
+    };
+  }
+)(withRouter(observer(Settings)));