Web:Client:Fixed applying mobile styles for mobile in horizontal position.
This commit is contained in:
parent
907408ab2e
commit
e4a2411ad5
@ -1,6 +1,5 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { isSmallTablet } from "@docspace/components/utils/device";
|
||||
|
||||
const withLoading = (WrappedComponent) => {
|
||||
@ -19,6 +18,8 @@ const withLoading = (WrappedComponent) => {
|
||||
setIsBurgerLoading,
|
||||
} = props;
|
||||
|
||||
const [mobileView, setMobileView] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoadedArticleBody) {
|
||||
setIsBurgerLoading(false);
|
||||
@ -27,11 +28,25 @@ const withLoading = (WrappedComponent) => {
|
||||
}
|
||||
}, [isLoadedArticleBody, setIsBurgerLoading]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", checkInnerWidth);
|
||||
|
||||
return () => window.removeEventListener("resize", checkInnerWidth);
|
||||
}, []);
|
||||
|
||||
const checkInnerWidth = () => {
|
||||
if (isSmallTablet()) {
|
||||
setMobileView(true);
|
||||
} else {
|
||||
setMobileView(false);
|
||||
}
|
||||
};
|
||||
|
||||
const pathname = location.pathname;
|
||||
const index = pathname.lastIndexOf("/");
|
||||
const setting = pathname.slice(index + 1);
|
||||
|
||||
const viewMobile = isSmallTablet() || isMobileOnly;
|
||||
const viewMobile = !!(isSmallTablet() && mobileView);
|
||||
|
||||
const isLoadedCustomizationSettings =
|
||||
isLoadedCustomization &&
|
||||
@ -88,7 +103,13 @@ const withLoading = (WrappedComponent) => {
|
||||
? isLoadedCustomizationNavbarSettings
|
||||
: isLoadedCustomizationSettings;
|
||||
|
||||
return <WrappedComponent {...props} isLoadedPage={isLoadedPage} />;
|
||||
return (
|
||||
<WrappedComponent
|
||||
{...props}
|
||||
viewMobile={viewMobile}
|
||||
isLoadedPage={isLoadedPage}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return inject(({ common, auth }) => {
|
||||
|
@ -5,10 +5,8 @@ import { inject, observer } from "mobx-react";
|
||||
import withCultureNames from "@docspace/common/hoc/withCultureNames";
|
||||
import LanguageAndTimeZone from "./Customization/language-and-time-zone";
|
||||
import WelcomePageSettings from "./Customization/welcome-page-settings";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import PortalRenaming from "./Customization/portal-renaming";
|
||||
import DNSSettings from "./Customization/dns-settings";
|
||||
import { isSmallTablet } from "@docspace/components/utils/device";
|
||||
import CustomizationNavbar from "./customization-navbar";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
||||
@ -66,16 +64,19 @@ const StyledComponent = styled.div`
|
||||
StyledComponent.defaultProps = { theme: Base };
|
||||
|
||||
const Customization = (props) => {
|
||||
const { t, isLoaded, tReady, setIsLoadedCustomization, isLoadedPage } = props;
|
||||
const [mobileView, setMobileView] = useState(true);
|
||||
const {
|
||||
t,
|
||||
isLoaded,
|
||||
tReady,
|
||||
setIsLoadedCustomization,
|
||||
isLoadedPage,
|
||||
viewMobile,
|
||||
} = props;
|
||||
|
||||
const isLoadedSetting = isLoaded && tReady;
|
||||
|
||||
useEffect(() => {
|
||||
setDocumentTitle(t("Customization"));
|
||||
window.addEventListener("resize", checkInnerWidth);
|
||||
|
||||
return () => window.removeEventListener("resize", checkInnerWidth);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@ -84,17 +85,7 @@ const Customization = (props) => {
|
||||
}
|
||||
}, [isLoadedSetting]);
|
||||
|
||||
const checkInnerWidth = () => {
|
||||
if (isSmallTablet()) {
|
||||
setMobileView(true);
|
||||
} else {
|
||||
setMobileView(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isMobile = !!((isSmallTablet() || isMobileOnly) && mobileView);
|
||||
|
||||
return isMobile ? (
|
||||
return viewMobile ? (
|
||||
<CustomizationNavbar isLoadedPage={isLoadedPage} />
|
||||
) : (
|
||||
<StyledComponent>
|
||||
@ -105,13 +96,13 @@ const Customization = (props) => {
|
||||
{t("Settings:CustomizationDescription")}
|
||||
</div>
|
||||
)}
|
||||
<LanguageAndTimeZone isMobileView={isMobile} />
|
||||
<LanguageAndTimeZone isMobileView={viewMobile} />
|
||||
<StyledSettingsSeparator />
|
||||
<WelcomePageSettings isMobileView={isMobile} />
|
||||
<WelcomePageSettings isMobileView={viewMobile} />
|
||||
<StyledSettingsSeparator />
|
||||
<DNSSettings isMobileView={isMobile} />
|
||||
<DNSSettings isMobileView={viewMobile} />
|
||||
<StyledSettingsSeparator />
|
||||
<PortalRenaming isMobileView={isMobile} />
|
||||
<PortalRenaming isMobileView={viewMobile} />
|
||||
</StyledComponent>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user