From 5831f29ec93557f16a40d608e0b0f2688608f1ae Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 28 Mar 2022 18:46:38 +0300 Subject: [PATCH 1/7] Web: Components: Themes: fix toggle content icon color --- packages/asc-web-components/themes/dark.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index c1eabd7d5d..48218f1668 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -1592,7 +1592,7 @@ const Dark = { contentPadding: "10px 0px 0px 0px", arrowMargin: "4px 8px 4px 0px", transform: "rotate(180deg)", - iconColor: black, + iconColor: white, childrenContent: { color: black, From 66c5d14883b778ca4f90eab43de832c84a5786c1 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:14:34 +0300 Subject: [PATCH 2/7] Web:Studio:Added isMobileViewLanguageTimeSettings to LanguageAndTimeZone component. Added the checkScrollSettingsBlock function to the LanguageAndTimeZone component. --- .../language-and-time-zone.js | 602 ++++++++++++++++++ 1 file changed, 602 insertions(+) create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js new file mode 100644 index 0000000000..3809de707c --- /dev/null +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js @@ -0,0 +1,602 @@ +import React from "react"; +import { withTranslation } from "react-i18next"; +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"; +import Loader from "@appserver/components/loader"; +import toastr from "@appserver/components/toast/toastr"; +import HelpButton from "@appserver/components/help-button"; +import SaveCancelButtons from "@appserver/components/save-cancel-buttons"; +import { saveToSessionStorage, getFromSessionStorage } from "../../../utils"; +import { setDocumentTitle } from "../../../../../../helpers/utils"; +import { inject, observer } from "mobx-react"; +import { LANGUAGE } from "@appserver/common/constants"; +import { convertLanguage } from "@appserver/common/utils"; +import withCultureNames from "@appserver/common/hoc/withCultureNames"; +import { LanguageTimeSettingsTooltip } from "../sub-components/common-tooltips"; +import { combineUrl } from "@appserver/common/utils"; +import { AppServerConfig } from "@appserver/common/constants"; +import config from "../../../../../../../package.json"; +import history from "@appserver/common/history"; +import { isMobileOnly } from "react-device-detect"; +import Scrollbar from "@appserver/components/scrollbar"; +import Text from "@appserver/components/text"; +import Box from "@appserver/components/box"; +import Link from "@appserver/components/link"; +import ArrowRightIcon from "../../../../../../../public/images/arrow.right.react.svg"; +import { isSmallTablet } from "@appserver/components/utils/device"; +import commonIconsStyles from "@appserver/components/utils/common-icons-style"; +import { Base } from "@appserver/components/themes"; +import checkScrollSettingsBlock from "../utils"; +const mapTimezonesToArray = (timezones) => { + return timezones.map((timezone) => { + return { key: timezone.id, label: timezone.displayName }; + }); +}; + +const findSelectedItemByKey = (items, selectedItemKey) => { + return items.find((item) => item.key === selectedItemKey); +}; + +const menuHeight = "48px"; +const sectionHeight = "50px"; +const paddingSectionWrapperContent = "22px"; +const saveCancelButtons = "56px"; +const flex = "4px"; + +const StyledArrowRightIcon = styled(ArrowRightIcon)` + ${commonIconsStyles} + path { + fill: ${(props) => props.theme.studio.settings.common.arrowColor}; + } +`; + +StyledArrowRightIcon.defaultProps = { theme: Base }; + +const StyledScrollbar = styled(Scrollbar)` + height: calc( + 100vh - + ( + ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} + + ${saveCancelButtons} + ${flex} + ) + ) !important; + width: 100% !important; +`; + +const StyledComponent = styled.div` + .combo-button-label { + max-width: 100%; + font-weight: 400; + } + + .field-container-flex { + display: flex; + justify-content: space-between; + margin-top: 8px; + margin-bottom: 12px; + } + + .toggle { + position: inherit; + grid-gap: inherit; + } + + .field-title { + font-weight: 600; + line-height: 20px; + } + + @media (max-width: 599px) { + ${(props) => + props.hasScroll && + css` + width: ${isMobileOnly ? "100vw" : "calc(100vw - 52px)"}; + left: -16px; + position: relative; + + .settings-block { + width: ${isMobileOnly ? "calc(100vw - 32px)" : "calc(100vw - 84px)"}; + max-width: none; + padding-left: 16px; + } + `} + } + + @media (min-width: 600px) { + .settings-block { + max-width: 350px; + height: auto; + } + } + + @media (orientation: landscape) and (max-width: 600px) { + ${isMobileOnly && + css` + .settings-block { + height: auto; + } + `} + } +`; + +let languageFromSessionStorage = ""; +let languageDefaultFromSessionStorage = ""; +let timezoneFromSessionStorage = ""; +let timezoneDefaultFromSessionStorage = ""; + +const settingNames = ["language", "timezone"]; + +class LanguageAndTimeZone extends React.Component { + constructor(props) { + super(props); + + const { + portalLanguage, + portalTimeZoneId, + rawTimezones, + cultureNames, + /*organizationName,*/ + t, + //i18n, + } = props; + + const timezones = mapTimezonesToArray(rawTimezones); + const language = findSelectedItemByKey( + cultureNames, + convertLanguage(portalLanguage || cultureNames[0]) + ); + const timezone = findSelectedItemByKey( + timezones, + portalTimeZoneId || timezones[0] + ); + + languageFromSessionStorage = getFromSessionStorage("language"); + languageDefaultFromSessionStorage = getFromSessionStorage( + "languageDefault" + ); + timezoneFromSessionStorage = getFromSessionStorage("timezone"); + timezoneDefaultFromSessionStorage = getFromSessionStorage( + "timezoneDefault" + ); + + setDocumentTitle(t("Customization")); + + this.state = { + isLoadedData: false, + isLoading: false, + timezones, + timezone: timezoneFromSessionStorage || timezone, + timezoneDefault: timezoneDefaultFromSessionStorage || timezone, + language: languageFromSessionStorage || language, + languageDefault: languageDefaultFromSessionStorage || language, + isLoadingGreetingSave: false, + isLoadingGreetingRestore: false, + hasChanged: false, + showReminder: false, + hasScroll: false, + }; + } + + componentDidMount() { + const { + cultureNames, + portalLanguage, + portalTimeZoneId, + getPortalTimezones, + } = this.props; + const { timezones, isLoadedData } = this.state; + + window.addEventListener("resize", this.checkInnerWidth); + + if (!timezones.length) { + getPortalTimezones().then(() => { + const timezones = mapTimezonesToArray(this.props.rawTimezones); + + const language = + languageFromSessionStorage || + findSelectedItemByKey(cultureNames, portalLanguage) || + cultureNames[0]; + const timezone = + timezoneFromSessionStorage || + findSelectedItemByKey(timezones, portalTimeZoneId) || + timezones[0]; + + const languageDefault = + findSelectedItemByKey(cultureNames, portalLanguage) || + cultureNames[0]; + const timezoneDefault = + findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0]; + + this.setState({ + language, + timezones, + timezone, + languageDefault, + timezoneDefault, + }); + + if (!timezoneDefault) { + this.setState({ + timezoneDefault: timezone, + }); + } + if (!languageDefault) { + this.setState({ + languageDefault: language, + }); + } + }); + } + if (timezones.length && !isLoadedData) { + this.setState({ isLoadedData: true }); + } + } + + componentDidUpdate(prevProps, prevState) { + const { + timezones, + timezoneDefault, + languageDefault, + hasScroll, + } = this.state; + + const { + i18n, + language, + nameSchemaId, + getCurrentCustomSchema, + cultureNames, + } = this.props; + + const checkScroll = checkScrollSettingsBlock(); + + window.addEventListener("resize", checkScroll); + const scrollLngTZSettings = checkScroll(); + + if (scrollLngTZSettings !== hasScroll) { + this.setState({ + hasScroll: scrollLngTZSettings, + }); + } + + // TODO: Remove div with height 64 and remove settings-mobile class + const settingsMobile = document.getElementsByClassName( + "settings-mobile" + )[0]; + + if (settingsMobile) { + settingsMobile.style.display = "none"; + } + + if (timezones.length && !prevState.isLoadedData) { + this.setState({ isLoadedData: true }); + } + if (language !== prevProps.language) { + i18n + .changeLanguage(language) + .then(() => { + const newLocaleSelectedLanguage = + findSelectedItemByKey(cultureNames, this.state.language.key) || + cultureNames[0]; + this.setState({ + language: languageFromSessionStorage || newLocaleSelectedLanguage, + }); + }) + //.then(() => getModules(clientStore.dispatch)) + .then(() => getCurrentCustomSchema(nameSchemaId)); + } + if (timezoneDefault && languageDefault) { + this.checkChanges(); + } + } + + componentWillUnmount() { + window.removeEventListener( + "resize", + this.checkInnerWidth, + checkScrollSettingsBlock + ); + } + + onLanguageSelect = (language) => { + this.setState({ language }); + if (this.settingIsEqualInitialValue("language", language)) { + saveToSessionStorage("language", ""); + saveToSessionStorage("languageDefault", ""); + } else { + saveToSessionStorage("language", language); + } + this.checkChanges(); + }; + + onTimezoneSelect = (timezone) => { + this.setState({ timezone }); + if (this.settingIsEqualInitialValue("timezone", timezone)) { + saveToSessionStorage("timezone", ""); + saveToSessionStorage("timezoneDefault", ""); + } else { + saveToSessionStorage("timezone", timezone); + } + + this.checkChanges(); + }; + + onSaveLngTZSettings = () => { + const { t, setLanguageAndTime, user, language: lng } = this.props; + const { language, timezone } = this.state; + + this.setState({ isLoading: true }, function () { + setLanguageAndTime(language.key, timezone.key) + .then( + () => + !user.cultureName && + localStorage.setItem(LANGUAGE, language.key || "en") + ) + .then(() => toastr.success(t("SuccessfullySaveSettingsMessage"))) + .then( + () => !user.cultureName && lng !== language.key && location.reload() + ) + .catch((error) => toastr.error(error)) + .finally(() => this.setState({ isLoading: false })); + }); + + this.setState({ + showReminder: false, + timezoneDefault: this.state.timezone, + languageDefault: this.state.language, + }); + + saveToSessionStorage("languageDefault", language); + saveToSessionStorage("timezoneDefault", timezone); + }; + + onCancelClick = () => { + settingNames.forEach((settingName) => { + const valueFromSessionStorage = getFromSessionStorage(settingName); + + if ( + valueFromSessionStorage && + !this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) + ) { + const defaultValue = this.state[settingName + "Default"]; + + this.setState({ [settingName]: defaultValue }); + saveToSessionStorage(settingName, ""); + } + }); + + this.setState({ + showReminder: false, + }); + + this.checkChanges(); + }; + + settingIsEqualInitialValue = (settingName, value) => { + const defaultValue = JSON.stringify(this.state[settingName + "Default"]); + const currentValue = JSON.stringify(value); + return defaultValue === currentValue; + }; + + checkChanges = () => { + let hasChanged = false; + + settingNames.forEach((settingName) => { + const valueFromSessionStorage = getFromSessionStorage(settingName); + if ( + valueFromSessionStorage && + !this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) + ) + hasChanged = true; + }); + + if (hasChanged !== this.state.hasChanged) { + this.setState({ + hasChanged: hasChanged, + showReminder: hasChanged, + }); + } + }; + + checkInnerWidth = () => { + if (!isSmallTablet()) { + history.push( + combineUrl( + AppServerConfig.proxyURL, + config.homepage, + "/settings/common/customization" + ) + ); + return true; + } + }; + + onClickLink = (e) => { + e.preventDefault(); + history.push(e.target.pathname); + }; + + render() { + const { + t, + theme, + cultureNames, + isMobileView, + helpUrlCommonSettings, + } = this.props; + const { + isLoadedData, + language, + isLoading, + timezones, + timezone, + showReminder, + hasScroll, + } = this.state; + + const tooltipLanguageTimeSettings = ( + + ); + + const isMobileViewLanguageTimeSettings = ( +
+
+ + {t("StudioTimeLanguageSettings")} + + +
+ + {t("LanguageAndTimeZoneSettingsDescription")} + + + + {t("Common:LearnMore")} + + +
+ ); + const settingsBlock = ( +
+ + + +
+
{`${t("Automatic time zone")}`}
+ toastr.info(<>Not implemented)} + /> +
+ + + +
+ ); + + return !isLoadedData ? ( + + ) : isMobileView ? ( + isMobileViewLanguageTimeSettings + ) : ( + + {/* Added isMobileView */} + {this.checkInnerWidth() && !isMobileView && ( +
+
+ {t("StudioTimeLanguageSettings")} +
+ +
+ )} + {(isMobileOnly && isSmallTablet()) || isSmallTablet() ? ( + {settingsBlock} + ) : ( + <> {settingsBlock} + )} + + + ); + } +} + +export default inject(({ auth, setup }) => { + const { + culture, + timezone, + timezones, + //cultures, + nameSchemaId, + organizationName, + greetingSettings, + //getPortalCultures, + getPortalTimezones, + getCurrentCustomSchema, + helpUrlCommonSettings, + } = auth.settingsStore; + + const { user } = auth.userStore; + + const { setLanguageAndTime } = setup; + + return { + theme: auth.settingsStore.theme, + user, + portalLanguage: culture, + portalTimeZoneId: timezone, + language: culture, + rawTimezones: timezones, + //rawCultures: cultures, + greetingSettings, + nameSchemaId, + organizationName, + //getPortalCultures, + setLanguageAndTime, + getCurrentCustomSchema, + getPortalTimezones, + helpUrlCommonSettings, + }; +})( + withCultureNames( + withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone)) + ) +); From 2112d4d02a9d24eaf28735e9a605654b12a39590 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:15:41 +0300 Subject: [PATCH 3/7] Web:Studio:Created a settingsCustomization folder. Moved the CustomTitles, LanguageAndTimeZone, PortalRenaming components there. --- .../common/language-and-time-zone.js | 570 ------------------ .../custom-titles.js | 6 +- .../portal-renaming.js | 2 +- .../src/components/pages/Settings/index.js | 6 +- 4 files changed, 8 insertions(+), 576 deletions(-) delete mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js rename web/ASC.Web.Client/src/components/pages/Settings/categories/common/{ => settingsCustomization}/custom-titles.js (97%) rename web/ASC.Web.Client/src/components/pages/Settings/categories/common/{ => settingsCustomization}/portal-renaming.js (98%) diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js deleted file mode 100644 index 6a76a761fb..0000000000 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js +++ /dev/null @@ -1,570 +0,0 @@ -import React from "react"; -import { withTranslation } from "react-i18next"; -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"; -import Loader from "@appserver/components/loader"; -import toastr from "@appserver/components/toast/toastr"; -import HelpButton from "@appserver/components/help-button"; -import SaveCancelButtons from "@appserver/components/save-cancel-buttons"; -import { saveToSessionStorage, getFromSessionStorage } from "../../utils"; -import { setDocumentTitle } from "../../../../../helpers/utils"; -import { inject, observer } from "mobx-react"; -import { LANGUAGE } from "@appserver/common/constants"; -import { convertLanguage } from "@appserver/common/utils"; -import withCultureNames from "@appserver/common/hoc/withCultureNames"; -import { LanguageTimeSettingsTooltip } from "./sub-components/common-tooltips"; -import { combineUrl } from "@appserver/common/utils"; -import { AppServerConfig } from "@appserver/common/constants"; -import config from "../../../../../../package.json"; -import history from "@appserver/common/history"; -import { isMobileOnly } from "react-device-detect"; -import Scrollbar from "@appserver/components/scrollbar"; - -const mapTimezonesToArray = (timezones) => { - return timezones.map((timezone) => { - return { key: timezone.id, label: timezone.displayName }; - }); -}; - -const findSelectedItemByKey = (items, selectedItemKey) => { - return items.find((item) => item.key === selectedItemKey); -}; - -const menuHeight = "48px"; -const sectionHeight = "50px"; -const paddingSectionWrapperContent = "22px"; -const saveCancelButtons = "56px"; -const flex = "4px"; - -const StyledScrollbar = styled(Scrollbar)` - height: calc( - 100vh - - ( - ${menuHeight} + ${sectionHeight} + ${paddingSectionWrapperContent} + - ${saveCancelButtons} + ${flex} - ) - ) !important; - width: 100% !important; -`; - -const StyledComponent = styled.div` - .combo-button-label { - max-width: 100%; - font-weight: 400; - } - - .field-container-flex { - display: flex; - justify-content: space-between; - margin-top: 8px; - margin-bottom: 12px; - } - - .toggle { - position: inherit; - grid-gap: inherit; - } - - .field-title { - font-weight: 600; - line-height: 20px; - } - - @media (max-width: 599px) { - ${(props) => - props.hasScroll && - css` - width: ${isMobileOnly ? "100vw" : "calc(100vw - 52px)"}; - left: -16px; - position: relative; - - .settings-block { - width: ${isMobileOnly ? "calc(100vw - 32px)" : "calc(100vw - 84px)"}; - max-width: none; - padding-left: 16px; - } - `} - } - - @media (min-width: 600px) { - .settings-block { - max-width: 350px; - height: auto; - } - } - - @media (orientation: landscape) and (max-width: 600px) { - ${isMobileOnly && - css` - .settings-block { - height: auto; - } - `} - } -`; - -let languageFromSessionStorage = ""; -let languageDefaultFromSessionStorage = ""; -let timezoneFromSessionStorage = ""; -let timezoneDefaultFromSessionStorage = ""; - -const settingNames = ["language", "timezone"]; - -class LanguageAndTimeZone extends React.Component { - constructor(props) { - super(props); - - const { - portalLanguage, - portalTimeZoneId, - rawTimezones, - cultureNames, - /*organizationName,*/ - t, - //i18n, - } = props; - - const timezones = mapTimezonesToArray(rawTimezones); - const language = findSelectedItemByKey( - cultureNames, - convertLanguage(portalLanguage || cultureNames[0]) - ); - const timezone = findSelectedItemByKey( - timezones, - portalTimeZoneId || timezones[0] - ); - - languageFromSessionStorage = getFromSessionStorage("language"); - languageDefaultFromSessionStorage = getFromSessionStorage( - "languageDefault" - ); - timezoneFromSessionStorage = getFromSessionStorage("timezone"); - timezoneDefaultFromSessionStorage = getFromSessionStorage( - "timezoneDefault" - ); - setDocumentTitle(t("Customization")); - - this.state = { - isLoadedData: false, - isLoading: false, - timezones, - timezone: timezoneFromSessionStorage || timezone, - timezoneDefault: timezoneDefaultFromSessionStorage || timezone, - language: languageFromSessionStorage || language, - languageDefault: languageDefaultFromSessionStorage || language, - isLoadingGreetingSave: false, - isLoadingGreetingRestore: false, - hasChanged: false, - showReminder: false, - sectionWidth: null, - hasScroll: false, - heightSettingsBlock: null, - heightScrollBody: null, - }; - } - - componentDidMount() { - const { - cultureNames, - portalLanguage, - portalTimeZoneId, - getPortalTimezones, - } = this.props; - const { timezones, isLoadedData } = this.state; - - window.addEventListener("resize", this.checkInnerWidth); - - if (!timezones.length) { - getPortalTimezones().then(() => { - const timezones = mapTimezonesToArray(this.props.rawTimezones); - - const language = - languageFromSessionStorage || - findSelectedItemByKey(cultureNames, portalLanguage) || - cultureNames[0]; - const timezone = - timezoneFromSessionStorage || - findSelectedItemByKey(timezones, portalTimeZoneId) || - timezones[0]; - - const languageDefault = - findSelectedItemByKey(cultureNames, portalLanguage) || - cultureNames[0]; - const timezoneDefault = - findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0]; - - this.setState({ - language, - timezones, - timezone, - languageDefault, - timezoneDefault, - }); - - if (!timezoneDefault) { - this.setState({ - timezoneDefault: timezone, - }); - } - if (!languageDefault) { - this.setState({ - languageDefault: language, - }); - } - }); - } - if (timezones.length && !isLoadedData) { - this.setState({ isLoadedData: true }); - } - } - - componentDidUpdate(prevProps, prevState) { - const { timezones, timezoneDefault, languageDefault } = this.state; - const { - i18n, - language, - nameSchemaId, - getCurrentCustomSchema, - cultureNames, - } = this.props; - - this.checkHeightSettingsBlock(); - window.addEventListener("resize", this.checkHeightSettingsBlock); - - // TODO: Remove div with height 64 and remove settings-mobile class - const settingsMobile = document.getElementsByClassName( - "settings-mobile" - )[0]; - - if (settingsMobile) { - settingsMobile.style.display = "none"; - } - - if (timezones.length && !prevState.isLoadedData) { - this.setState({ isLoadedData: true }); - } - if (language !== prevProps.language) { - i18n - .changeLanguage(language) - .then(() => { - const newLocaleSelectedLanguage = - findSelectedItemByKey(cultureNames, this.state.language.key) || - cultureNames[0]; - this.setState({ - language: languageFromSessionStorage || newLocaleSelectedLanguage, - }); - }) - //.then(() => getModules(clientStore.dispatch)) - .then(() => getCurrentCustomSchema(nameSchemaId)); - } - if (timezoneDefault && languageDefault) { - this.checkChanges(); - } - } - - componentWillUnmount() { - window.removeEventListener( - "resize", - this.checkInnerWidth, - this.checkHeightSettingsBlock - ); - } - - onLanguageSelect = (language) => { - this.setState({ language }); - if (this.settingIsEqualInitialValue("language", language)) { - saveToSessionStorage("language", ""); - saveToSessionStorage("languageDefault", ""); - } else { - saveToSessionStorage("language", language); - } - this.checkChanges(); - }; - - onTimezoneSelect = (timezone) => { - this.setState({ timezone }); - if (this.settingIsEqualInitialValue("timezone", timezone)) { - saveToSessionStorage("timezone", ""); - saveToSessionStorage("timezoneDefault", ""); - } else { - saveToSessionStorage("timezone", timezone); - } - - this.checkChanges(); - }; - - onSaveLngTZSettings = () => { - const { t, setLanguageAndTime, user, language: lng } = this.props; - const { language, timezone } = this.state; - - this.setState({ isLoading: true }, function () { - setLanguageAndTime(language.key, timezone.key) - .then( - () => - !user.cultureName && - localStorage.setItem(LANGUAGE, language.key || "en") - ) - .then(() => toastr.success(t("SuccessfullySaveSettingsMessage"))) - .then( - () => !user.cultureName && lng !== language.key && location.reload() - ) - .catch((error) => toastr.error(error)) - .finally(() => this.setState({ isLoading: false })); - }); - - this.setState({ - showReminder: false, - timezoneDefault: this.state.timezone, - languageDefault: this.state.language, - }); - - saveToSessionStorage("languageDefault", language); - saveToSessionStorage("timezoneDefault", timezone); - }; - - onCancelClick = () => { - settingNames.forEach((settingName) => { - const valueFromSessionStorage = getFromSessionStorage(settingName); - - if ( - valueFromSessionStorage && - !this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) - ) { - const defaultValue = this.state[settingName + "Default"]; - - this.setState({ [settingName]: defaultValue }); - saveToSessionStorage(settingName, ""); - } - }); - - this.setState({ - showReminder: false, - }); - - this.checkChanges(); - }; - - settingIsEqualInitialValue = (settingName, value) => { - const defaultValue = JSON.stringify(this.state[settingName + "Default"]); - const currentValue = JSON.stringify(value); - return defaultValue === currentValue; - }; - - checkChanges = () => { - let hasChanged = false; - - settingNames.forEach((settingName) => { - const valueFromSessionStorage = getFromSessionStorage(settingName); - if ( - valueFromSessionStorage && - !this.settingIsEqualInitialValue(settingName, valueFromSessionStorage) - ) - hasChanged = true; - }); - - if (hasChanged !== this.state.hasChanged) { - this.setState({ - hasChanged: hasChanged, - showReminder: hasChanged, - }); - } - }; - - checkInnerWidth = () => { - if (window.innerWidth > 600) { - history.push( - combineUrl( - AppServerConfig.proxyURL, - config.homepage, - "/settings/common/customization" - ) - ); - return true; - } - }; - - checkHeightSettingsBlock = () => { - if (this.settingsDiv && this.scrollBody) return; - - this.settingsDiv = document.getElementsByClassName("settings-block")[0]; - - if (!this.settingsDiv) return; - - this.scrollBody = this.settingsDiv.closest(".scroll-body"); - - if (!this.scrollBody) return; - - const height = getComputedStyle(this.settingsDiv).height.slice(0, -2); - const heightScrollBody = getComputedStyle(this.scrollBody).height.slice( - 0, - -2 - ); - - if ( - this.state.heightSettingsBlock === height && - this.state.heightScrollBody === heightScrollBody - ) { - return; - } - - this.setState({ - heightSettingsBlock: height, - }); - this.setState({ - heightScrollBody: heightScrollBody, - }); - - if (parseInt(height, 10) > parseInt(heightScrollBody, 10)) { - this.setState({ - hasScroll: true, - }); - } else { - this.setState({ - hasScroll: false, - }); - } - }; - - render() { - const { t, theme, cultureNames } = this.props; - const { - isLoadedData, - language, - isLoading, - timezones, - timezone, - showReminder, - hasScroll, - } = this.state; - - const tooltipLanguageTimeSettings = ( - - ); - - const settingsBlock = ( -
- - - -
-
{`${t("Automatic time zone")}`}
- toastr.info(<>Not implemented)} - /> -
- - - -
- ); - - return !isLoadedData ? ( - - ) : ( - - {this.checkInnerWidth() && ( -
-
- {t("StudioTimeLanguageSettings")} -
- -
- )} - {(isMobileOnly && window.innerWidth < 600) || - window.innerWidth < 600 ? ( - {settingsBlock} - ) : ( - <> {settingsBlock} - )} - - - ); - } -} - -export default inject(({ auth, setup }) => { - const { - culture, - timezone, - timezones, - //cultures, - nameSchemaId, - organizationName, - greetingSettings, - //getPortalCultures, - getPortalTimezones, - getCurrentCustomSchema, - } = auth.settingsStore; - - const { user } = auth.userStore; - - const { setLanguageAndTime } = setup; - - return { - theme: auth.settingsStore.theme, - user, - portalLanguage: culture, - portalTimeZoneId: timezone, - language: culture, - rawTimezones: timezones, - //rawCultures: cultures, - greetingSettings, - nameSchemaId, - organizationName, - //getPortalCultures, - setLanguageAndTime, - getCurrentCustomSchema, - getPortalTimezones, - }; -})( - withCultureNames( - withTranslation(["Settings", "Common"])(observer(LanguageAndTimeZone)) - ) -); diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/custom-titles.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js similarity index 97% rename from web/ASC.Web.Client/src/components/pages/Settings/categories/common/custom-titles.js rename to web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js index 66c69dc2c0..328dc71d51 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/custom-titles.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js @@ -8,10 +8,10 @@ import TextInput from "@appserver/components/text-input"; import HelpButton from "@appserver/components/help-button"; import SaveCancelButtons from "@appserver/components/save-cancel-buttons"; import { showLoader, hideLoader } from "@appserver/common/utils"; -import { saveToSessionStorage, getFromSessionStorage } from "../../utils"; -import { setDocumentTitle } from "../../../../../helpers/utils"; +import { saveToSessionStorage, getFromSessionStorage } from "../../../utils"; +import { setDocumentTitle } from "../../../../../../helpers/utils"; import { inject, observer } from "mobx-react"; -import { CustomTitlesTooltip } from "./sub-components/common-tooltips"; +import { CustomTitlesTooltip } from "../sub-components/common-tooltips"; const StyledComponent = styled.div` .settings-block { diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/portal-renaming.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js similarity index 98% rename from web/ASC.Web.Client/src/components/pages/Settings/categories/common/portal-renaming.js rename to web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js index 53bce961b0..e8b2d86b5b 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/portal-renaming.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/portal-renaming.js @@ -23,7 +23,7 @@ const StyledComponent = styled.div` `; const PortalRenaming = ({ t, theme, sectionWidth }) => { - // todo: Изменить на false + // TODO: Change false const [isLoadedData, setIsLoadedData] = useState(true); const onSavePortalRename = () => { diff --git a/web/ASC.Web.Client/src/components/pages/Settings/index.js b/web/ASC.Web.Client/src/components/pages/Settings/index.js index 0d773fc4c7..7cff369434 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/index.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/index.js @@ -19,9 +19,11 @@ const CustomizationSettings = lazy(() => import("./categories/common/customization") ); const LanguageAndTimeZoneSettings = lazy(() => - import("./categories/common/language-and-time-zone") + import("./categories/common/settingsCustomization/language-and-time-zone") +); +const CustomTitles = lazy(() => + import("./categories/common/settingsCustomization/custom-titles") ); -const CustomTitles = lazy(() => import("./categories/common/custom-titles")); const TeamTemplate = lazy(() => import("./categories/common/team-template")); const ThirdPartyServices = lazy(() => import("./categories/integration/thirdPartyServicesSettings") From 51039fa773ea2d779b015198018899c33ac781b3 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:16:36 +0300 Subject: [PATCH 4/7] Web:Studio:Removed CustomizationNavbar component. --- .../categories/common/customization-navbar.js | 123 ------------------ 1 file changed, 123 deletions(-) delete mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js deleted file mode 100644 index a5b451e54f..0000000000 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization-navbar.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from "react"; -import { withTranslation } from "react-i18next"; -import styled from "styled-components"; -import Text from "@appserver/components/text"; -import Box from "@appserver/components/box"; -import Link from "@appserver/components/link"; -import ArrowRightIcon from "../../../../../../public/images/arrow.right.react.svg"; -import commonIconsStyles from "@appserver/components/utils/common-icons-style"; -import { combineUrl } from "@appserver/common/utils"; -import { inject, observer } from "mobx-react"; -import { AppServerConfig } from "@appserver/common/constants"; -import withCultureNames from "@appserver/common/hoc/withCultureNames"; -import { Base } from "@appserver/components/themes"; -import history from "@appserver/common/history"; - -const StyledArrowRightIcon = styled(ArrowRightIcon)` - ${commonIconsStyles} - path { - fill: ${(props) => props.theme.studio.settings.common.arrowColor}; - } -`; - -StyledArrowRightIcon.defaultProps = { theme: Base }; - -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 CustomizationNavbar = ({ t, theme, helpUrlCommonSettings }) => { - const onClickLink = (e) => { - e.preventDefault(); - history.push(e.target.pathname); - }; - - return ( - -
-
- - {t("StudioTimeLanguageSettings")} - - -
- - {t("LanguageAndTimeZoneSettingsDescription")} - - - - {t("Common:LearnMore")} - - -
-
-
- - {t("CustomTitlesWelcome")} - - -
- - {t("CustomTitlesSettingsDescription")} - -
- - ); -}; - -export default inject(({ auth }) => { - const { helpUrlCommonSettings, theme } = auth.settingsStore; - return { - theme, - helpUrlCommonSettings, - }; -})( - withCultureNames( - observer(withTranslation(["Settings", "Common"])(CustomizationNavbar)) - ) -); From 1b6a7ab2bafb69d40fbd75973e4a65603f30f489 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:18:16 +0300 Subject: [PATCH 5/7] 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 {children}; +}; + +export default SettingsPageMobileView; From fe65e040cbdd6b407e1629c3e942ca5267a94cbd Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:22:29 +0300 Subject: [PATCH 6/7] Web:Studio:Refactoring of the Customization component. Added SettingsPageLayout, SettingsPageMobileView components. --- .../categories/common/customization.js | 67 ++++++++----------- 1 file changed, 27 insertions(+), 40 deletions(-) diff --git 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 index 11550fba87..560b87fd41 100644 --- 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 @@ -1,15 +1,15 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { withTranslation } from "react-i18next"; import styled from "styled-components"; import withCultureNames from "@appserver/common/hoc/withCultureNames"; -import CustomizationNavbar from "./customization-navbar"; -import LanguageAndTimeZone from "./language-and-time-zone"; -import CustomTitles from "./custom-titles"; -import PortalRenaming from "./portal-renaming"; -import { Base } from "@appserver/components/themes"; -import { isSmallTablet } from "@appserver/components/utils/device"; +import LanguageAndTimeZone from "./settingsCustomization/language-and-time-zone"; +import CustomTitles from "./settingsCustomization/custom-titles"; +import PortalRenaming from "./settingsCustomization/portal-renaming"; +import SettingsPageLayout from "./SettingsPageLayout"; +import SettingsPageMobileView from "./SettingsPageMobileView"; + +import { Base } from "@appserver/components/themes"; -import commonSettingsStyles from "../../utils/commonSettingsStyles"; const StyledComponent = styled.div` .combo-button-label { max-width: 100%; @@ -60,38 +60,25 @@ const StyledComponent = styled.div` StyledComponent.defaultProps = { theme: Base }; const Customization = ({ t }) => { - const [mobileView, setMobileView] = useState(); - - const checkInnerWidth = () => { - if (window.innerWidth < 600) { - setMobileView(true); - } else { - setMobileView(false); - } - }; - - useEffect(() => { - window.addEventListener("resize", checkInnerWidth); - return () => window.removeEventListener("resize", checkInnerWidth); - }, [checkInnerWidth]); - - return isSmallTablet() || mobileView ? ( - - ) : ( - -
{`${t( - "Settings:CustomizationDescription" - )}`}
-
- -
- {/*
- -
-
- -
*/} - + return ( + + {(isMobile) => + isMobile ? ( + + + {/* */} + + ) : ( + +
{`${t( + "Settings:CustomizationDescription" + )}`}
+ + {/* */} + + ) + } + ); }; From 0bc5bc13f698fbed72d0f12da37a0b1d32ce34f6 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 28 Mar 2022 22:24:21 +0300 Subject: [PATCH 7/7] Web:Studio:Moved the checkScrollSettingsBlock function to a separate utils.js file. --- .../pages/Settings/categories/common/utils.js | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js new file mode 100644 index 0000000000..74a2d117f2 --- /dev/null +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/utils.js @@ -0,0 +1,38 @@ +const checkScrollSettingsBlock = () => { + let initHeight = 0; + let initHeightScroll = 0; + + const settingsDiv = document.getElementsByClassName("settings-block")?.[0]; + const scrollBody = settingsDiv?.closest(".scroll-body"); + + const height = parseInt( + !!settingsDiv ? getComputedStyle(settingsDiv).height.slice(0, -2) : 0, + 0 + ); + + const heightScroll = parseInt( + !!scrollBody ? getComputedStyle(scrollBody).height.slice(0, -2) : 0, + 0 + ); + + return () => { + if (height === initHeight && heightScroll !== initHeightScroll) { + return; + } + + if (height !== initHeight) { + initHeight = height; + } + if (heightScroll !== initHeightScroll) { + initHeightScroll = heightScroll; + } + + if (height > heightScroll) { + return true; + } else { + return false; + } + }; +}; + +export default checkScrollSettingsBlock;