IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Studio:Refactoring the Customization component.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-03-23 22:11:15 +03:00
parent 9660b325e9
commit c3af9b1998
1 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js
View File

@ -7,8 +7,7 @@ import LanguageAndTimeZone from "./language-and-time-zone";
import CustomTitles from "./custom-titles";
import PortalRenaming from "./portal-renaming";
import { Base } from "@appserver/components/themes";
import { isMobile } from "react-device-detect";
import { Consumer } from "@appserver/components/utils/context";
import { isSmallTablet } from "@appserver/components/utils/device";
const StyledComponent = styled.div`
.combo-button-label {
@ -17,7 +16,6 @@ const StyledComponent = styled.div`
.settings-block {
margin-bottom: 24px;
max-width: 350px;
}
.category-description {
@ -49,6 +47,13 @@ const StyledComponent = styled.div`
line-height: 22px;
margin-right: 4px;
}
@media (min-width: 601px) {
.settings-block {
max-width: 350px;
height: auto;
}
}
`;
StyledComponent.defaultProps = { theme: Base };
@ -57,7 +62,7 @@ const Customization = ({ t }) => {
const [mobileView, setMobileView] = useState();
const checkInnerWidth = () => {
if (window.innerWidth <= 375) {
if (window.innerWidth < 600) {
setMobileView(true);
} else {
setMobileView(false);
@ -69,29 +74,23 @@ const Customization = ({ t }) => {
return () => window.removeEventListener("resize", checkInnerWidth);
}, [checkInnerWidth]);
return (
<Consumer>
{(context) =>
`${context.sectionWidth}` <= 375 || isMobile || mobileView ? (
<CustomizationNavbar />
) : (
<StyledComponent>
<div className="category-description">{`${t(
"Settings:CustomizationDescription"
)}`}</div>
<div className="category-item-wrapper">
<LanguageAndTimeZone />
</div>
{/* <div className="category-item-wrapper">
return isSmallTablet() || mobileView ? (
<CustomizationNavbar />
) : (
<StyledComponent>
<div className="category-description">{`${t(
"Settings:CustomizationDescription"
)}`}</div>
<div className="category-item-wrapper">
<LanguageAndTimeZone />
</div>
{/* <div className="category-item-wrapper">
<CustomTitles />
</div>
<div className="category-item-wrapper">
<PortalRenaming />
</div> */}
</StyledComponent>
)
}
</Consumer>
</StyledComponent>
);
};