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

packages/asc-web-common/components/Section/sub-components/section-body.js

@@ -215,7 +215,7 @@ class SectionBody extends React.Component {
               <div className="section-wrapper">
                 <div className="section-wrapper-content" {...focusProps}>
                   {children}
-                  <StyledSpacer pinned={pinned} />
+                  <StyledSpacer pinned={pinned} className="settings-mobile" />
                 </div>
               </div>
             </Scrollbar>
@@ -223,7 +223,11 @@ class SectionBody extends React.Component {
             <div className="section-wrapper">
               <div className="section-wrapper-content" {...focusProps}>
                 {children}
-                <StyledSpacer pinned={pinned} isHomepage={isHomepage} />
+                <StyledSpacer
+                  pinned={pinned}
+                  isHomepage={isHomepage}
+                  className="settings-mobile"
+                />
               </div>
             </div>
           )

packages/asc-web-components/save-cancel-buttons/index.js

@@ -45,7 +45,7 @@ class SaveCancelButtons extends React.Component {
       cancelButtonLabel,
       sectionWidth,
       hasChanged,
-      border,
+      hasScroll,
       className,
       id,
     } = this.props;
@@ -61,7 +61,7 @@ class SaveCancelButtons extends React.Component {
         displaySettings={displaySettings}
         sectionWidth={sectionWidth}
         showReminder={showReminder}
-        border={border}
+        hasScroll={hasScroll}
       >
         <div className="buttons-flex">
           <Button
@@ -108,7 +108,7 @@ SaveCancelButtons.propTypes = {
   displaySettings: PropTypes.bool,
   sectionWidth: PropTypes.number,
   hasChanged: PropTypes.bool,
-  border: PropTypes.bool,
+  hasScroll: PropTypes.bool,
 };
 
 SaveCancelButtons.defaultProps = {

packages/asc-web-components/save-cancel-buttons/styled-save-cancel-buttons.js

@@ -9,7 +9,7 @@ const displaySettings = css`
   flex-direction: column-reverse;
   align-items: flex-start;
   border-top: ${(props) =>
-    props.border && !props.showReminder ? "1px solid #ECEEF1" : "none"};
+    props.hasScroll && !props.showReminder ? "1px solid #ECEEF1" : "none"};
 
   .buttons-flex {
     display: flex;
@@ -27,14 +27,17 @@ const displaySettings = css`
 
   .unsaved-changes {
     position: absolute;
-    padding-top: 16px
+    padding-top: 16px;
     font-size: 12px;
     font-weight: 600;
+    width: 100%;
+    bottom: 56px;
+    background-color: white;
   }
 
   ${(props) =>
     props.showReminder &&
-    props.border &&
+    props.hasScroll &&
     css`
       .unsaved-changes {
         background-color: white;
@@ -44,26 +47,18 @@ const displaySettings = css`
         padding-top: 16px;
       }
     `}
-
-    @media (orientation: landscape) {
-      display: flex;
-
-      .unsaved-changes {
-        font-size: 12px;
-        position: static;
-        padding-bottom: 16px;
-      }
-  }
 `;
 
-const staticButtons = `
+const tabletButtons = `
   position: static;
+  display: flex;
   max-width: none;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  padding-top: 0;
   padding-bottom: 24px;
-
+ 
   .buttons-flex {
     width: auto;
   }
@@ -76,8 +71,11 @@ const staticButtons = `
   }
 
   .unsaved-changes {
+    border-top: none;
     margin-left: 8px;
     margin-bottom: 0;
+    position: static;
+    padding-top: 0px;
   }
 `;
 
@@ -110,7 +108,7 @@ const StyledSaveCancelButtons = styled.div`
     ((!isMobile && props.sectionWidth > 375 && props.sectionWidth <= 1024) ||
       isTablet) &&
     `
-      ${staticButtons}
+      ${tabletButtons}
     `}
 
   @media ${tablet} {
@@ -131,13 +129,17 @@ const StyledSaveCancelButtons = styled.div`
     !isTablet &&
     props.sectionWidth > 1024 &&
     `
-      ${staticButtons}
+      ${tabletButtons}
       .save-button, .cancel-button {
         font-size: 13px;
         line-height: 20px;
         padding-top: 5px;
         padding-bottom: 5px;
       }
+
+      .unsaved-changes {
+        padding-bottom: 0;
+      }
     `}
 `;
 StyledSaveCancelButtons.defaultProps = { theme: Base };

web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import FieldContainer from "@appserver/components/field-container";
 import ToggleButton from "@appserver/components/toggle-button";
 import ComboBox from "@appserver/components/combobox";
@@ -21,6 +21,7 @@ import config from "../../../../../../package.json";
 import history from "@appserver/common/history";
 import { isMobile } from "react-device-detect";
 import { Consumer } from "@appserver/components/utils/context";
+import Scrollbar from "@appserver/components/scrollbar";
 
 const mapTimezonesToArray = (timezones) => {
   return timezones.map((timezone) => {
@@ -32,16 +33,61 @@ const findSelectedItemByKey = (items, selectedItemKey) => {
   return items.find((item) => item.key === selectedItemKey);
 };
 
-const StyledComponent = styled.div`
-  /* .section-wrapper-content {
-    min-height: 0px;
-  } */
-  .settings-block {
-    overflow: auto;
-    min-height: calc(100vh - 164px);
-    height: calc(100vh - 164px);
-  }
+const menuHeight = "48px";
+const sectionHeight = "50px";
+const paddingSectionWrapperContent = "22px";
+const saveCancelButtons = "56px";
+//const minHeight = "64px";
+const flex = "4px";
 
+const heightScrollbar = css`calc(
+      100vh -
+        (
+          ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+            ${saveCancelButtons} + ${flex}
+        )
+    )`;
+
+const landscapeMobile = css`
+  ${(props) =>
+    (isMobile || props.sectionWidth <= 375) &&
+    css`
+      max-width: 343px;
+
+      .settings-block {
+        height: auto;
+      }
+    `}
+`;
+
+const portraitMobile = css`
+  ${(props) =>
+    (isMobile || props.sectionWidth <= 375) &&
+    css`
+      .settings-block {
+        height: calc(
+          100vh -
+            (
+              ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+                ${saveCancelButtons} + ${flex}
+            )
+        );
+      }
+    `}
+`;
+
+const StyledScrollbar = styled(Scrollbar)`
+  height: calc(
+    100vh -
+      (
+        ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} +
+          ${saveCancelButtons} + ${flex}
+      )
+  );
+  width: 343;
+`;
+
+const StyledComponent = styled.div`
   .combo-button-label {
     max-width: 100%;
     font-weight: 400;
@@ -64,13 +110,12 @@ const StyledComponent = styled.div`
     line-height: 20px;
   }
 
+  @media (orientation: portrait) {
+    ${portraitMobile}
+  }
+
   @media (orientation: landscape) {
-    max-width: 343px;
-    .settings-block {
-      overflow: hidden;
-      min-height: auto;
-      height: auto;
-    }
+    ${landscapeMobile}
   }
 `;
 
@@ -128,7 +173,7 @@ class LanguageAndTimeZone extends React.Component {
       hasChanged: false,
       showReminder: false,
       sectionWidth: null,
-      border: false,
+      hasScroll: false,
     };
   }
 
@@ -188,7 +233,7 @@ class LanguageAndTimeZone extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { timezones, timezoneDefault, languageDefault, border } = this.state;
+    const { timezones, timezoneDefault, languageDefault } = this.state;
     const {
       i18n,
       language,
@@ -205,12 +250,21 @@ class LanguageAndTimeZone extends React.Component {
 
         if (this.settingsDiv.scrollHeight > height) {
           this.setState({
-            border: true,
+            hasScroll: true,
           });
         }
       }
     }
 
+    // TODO: Переделать, убрать div c 64 высотой
+    const settingsMobile = document.getElementsByClassName(
+      "settings-mobile"
+    )[0];
+
+    if (settingsMobile) {
+      settingsMobile.style.display = "none";
+    }
+
     if (timezones.length && !prevState.isLoadedData) {
       this.setState({ isLoadedData: true });
     }
@@ -362,13 +416,61 @@ class LanguageAndTimeZone extends React.Component {
       timezone,
       showReminder,
       hasChanged,
-      border,
+      hasScroll,
     } = this.state;
 
     const tooltipLanguageTimeSettings = (
       <LanguageTimeSettingsTooltip theme={theme} t={t} />
     );
 
+    const settingsBlock = (
+      <div className="settings-block">
+        <FieldContainer
+          id="fieldContainerLanguage"
+          labelText={`${t("Common:Language")}:`}
+          isVertical={true}
+        >
+          <ComboBox
+            id="comboBoxLanguage"
+            options={cultureNames}
+            selectedOption={language}
+            onSelect={this.onLanguageSelect}
+            isDisabled={isLoading}
+            noBorder={false}
+            scaled={true}
+            scaledOptions={true}
+            dropDownMaxHeight={300}
+            className="dropdown-item-width"
+          />
+        </FieldContainer>
+        <div className="field-container-flex">
+          <div className="field-title">{`${t("Automatic time zone")}`}</div>
+          <ToggleButton
+            className="toggle"
+            onChange={() => toastr.info(<>Not implemented</>)}
+          />
+        </div>
+        <FieldContainer
+          id="fieldContainerTimezone"
+          labelText={`${t("TimeZone")}:`}
+          isVertical={true}
+        >
+          <ComboBox
+            id="comboBoxTimezone"
+            options={timezones}
+            selectedOption={timezone}
+            onSelect={this.onTimezoneSelect}
+            isDisabled={isLoading}
+            noBorder={false}
+            scaled={true}
+            scaledOptions={true}
+            dropDownMaxHeight={300}
+            className="dropdown-item-width"
+          />
+        </FieldContainer>
+      </div>
+    );
+
     return (
       <Consumer>
         {(context) => {
@@ -376,7 +478,7 @@ class LanguageAndTimeZone extends React.Component {
           return !isLoadedData ? (
             <Loader className="pageLoader" type="rombs" size="40px" />
           ) : (
-            <StyledComponent>
+            <StyledComponent sectionWidth={context.sectionWidth}>
               {`${context.sectionWidth}` > 375 && !isMobile && (
                 <div className="category-item-heading">
                   <div className="category-item-title">
@@ -389,53 +491,18 @@ class LanguageAndTimeZone extends React.Component {
                   />
                 </div>
               )}
-              <div className="settings-block">
-                <FieldContainer
-                  id="fieldContainerLanguage"
-                  labelText={`${t("Common:Language")}:`}
-                  isVertical={true}
+              {hasScroll ? (
+                <StyledScrollbar
+                  style={{
+                    height: { heightScrollbar },
+                    width: 343,
+                  }}
                 >
-                  <ComboBox
-                    id="comboBoxLanguage"
-                    options={cultureNames}
-                    selectedOption={language}
-                    onSelect={this.onLanguageSelect}
-                    isDisabled={isLoading}
-                    noBorder={false}
-                    scaled={true}
-                    scaledOptions={true}
-                    dropDownMaxHeight={300}
-                    className="dropdown-item-width"
-                  />
-                </FieldContainer>
-                <div className="field-container-flex">
-                  <div className="field-title">{`${t(
-                    "Automatic time zone"
-                  )}`}</div>
-                  <ToggleButton
-                    className="toggle"
-                    onChange={() => toastr.info(<>Not implemented</>)}
-                  />
-                </div>
-                <FieldContainer
-                  id="fieldContainerTimezone"
-                  labelText={`${t("TimeZone")}:`}
-                  isVertical={true}
-                >
-                  <ComboBox
-                    id="comboBoxTimezone"
-                    options={timezones}
-                    selectedOption={timezone}
-                    onSelect={this.onTimezoneSelect}
-                    isDisabled={isLoading}
-                    noBorder={false}
-                    scaled={true}
-                    scaledOptions={true}
-                    dropDownMaxHeight={300}
-                    className="dropdown-item-width"
-                  />
-                </FieldContainer>
-              </div>
+                  {settingsBlock}
+                </StyledScrollbar>
+              ) : (
+                <> {settingsBlock}</>
+              )}
               <SaveCancelButtons
                 className="save-cancel-buttons"
                 onSaveClick={this.onSaveLngTZSettings}
@@ -447,7 +514,7 @@ class LanguageAndTimeZone extends React.Component {
                 displaySettings={true}
                 hasChanged={hasChanged}
                 sectionWidth={context.sectionWidth}
-                border={border}
+                hasScroll={hasScroll}
               />
             </StyledComponent>
           );