Client:PortalSettings:Common Fixed customization
This commit is contained in:
parent
8bdc80e3d0
commit
fe3cff32ff
@ -34,7 +34,7 @@ import { Button } from "@docspace/shared/components/button";
|
|||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { isMobile } from "@docspace/shared/utils";
|
import { isMobileDevice } from "@docspace/shared/utils";
|
||||||
import checkScrollSettingsBlock from "../utils";
|
import checkScrollSettingsBlock from "../utils";
|
||||||
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
||||||
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
||||||
@ -167,7 +167,7 @@ const DNSSettings = (props) => {
|
|||||||
setDNSName(value);
|
setDNSName(value);
|
||||||
};
|
};
|
||||||
const checkInnerWidth = useCallback(() => {
|
const checkInnerWidth = useCallback(() => {
|
||||||
if (!isMobile()) {
|
if (!isMobileDevice()) {
|
||||||
setIsCustomizationView(true);
|
setIsCustomizationView(true);
|
||||||
|
|
||||||
const currentUrl = window.location.href.replace(
|
const currentUrl = window.location.href.replace(
|
||||||
@ -183,7 +183,7 @@ const DNSSettings = (props) => {
|
|||||||
} else {
|
} else {
|
||||||
setIsCustomizationView(false);
|
setIsCustomizationView(false);
|
||||||
}
|
}
|
||||||
}, [isMobile, setIsCustomizationView]);
|
}, [isMobileDevice, setIsCustomizationView]);
|
||||||
|
|
||||||
const domainExampleText = " ourcompany.com";
|
const domainExampleText = " ourcompany.com";
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ import { COOKIE_EXPIRATION_YEAR } from "@docspace/shared/constants";
|
|||||||
import { LANGUAGE } from "@docspace/shared/constants";
|
import { LANGUAGE } from "@docspace/shared/constants";
|
||||||
import { setCookie } from "@docspace/shared/utils/cookie";
|
import { setCookie } from "@docspace/shared/utils/cookie";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { isMobile } from "@docspace/shared/utils";
|
import { isMobileDevice } from "@docspace/shared/utils";
|
||||||
import checkScrollSettingsBlock from "../utils";
|
import checkScrollSettingsBlock from "../utils";
|
||||||
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
||||||
import LoaderCustomization from "../sub-components/loaderCustomization";
|
import LoaderCustomization from "../sub-components/loaderCustomization";
|
||||||
@ -97,10 +97,10 @@ const LanguageAndTimeZone = (props) => {
|
|||||||
initSettings,
|
initSettings,
|
||||||
isLoadedPage,
|
isLoadedPage,
|
||||||
currentColorScheme,
|
currentColorScheme,
|
||||||
currentDeviceType,
|
deviceType,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const isMobileView = currentDeviceType === DeviceType.mobile;
|
const isMobileView = deviceType === DeviceType.mobile;
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
@ -418,7 +418,7 @@ const LanguageAndTimeZone = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const checkInnerWidth = () => {
|
const checkInnerWidth = () => {
|
||||||
if (!isMobile()) {
|
if (!isMobileDevice()) {
|
||||||
setState((val) => ({ ...val, isCustomizationView: true }));
|
setState((val) => ({ ...val, isCustomizationView: true }));
|
||||||
|
|
||||||
const currentUrl = window.location.href.replace(
|
const currentUrl = window.location.href.replace(
|
||||||
@ -565,7 +565,7 @@ export default inject(({ settingsStore, setup, common, userStore }) => {
|
|||||||
cultures,
|
cultures,
|
||||||
currentColorScheme,
|
currentColorScheme,
|
||||||
languageAndTimeZoneSettingsUrl,
|
languageAndTimeZoneSettingsUrl,
|
||||||
currentDeviceType,
|
deviceType,
|
||||||
} = settingsStore;
|
} = settingsStore;
|
||||||
|
|
||||||
const { user } = userStore;
|
const { user } = userStore;
|
||||||
@ -589,7 +589,7 @@ export default inject(({ settingsStore, setup, common, userStore }) => {
|
|||||||
setIsLoaded,
|
setIsLoaded,
|
||||||
currentColorScheme,
|
currentColorScheme,
|
||||||
languageAndTimeZoneSettingsUrl,
|
languageAndTimeZoneSettingsUrl,
|
||||||
currentDeviceType,
|
deviceType,
|
||||||
};
|
};
|
||||||
})(
|
})(
|
||||||
withCultureNames(
|
withCultureNames(
|
||||||
|
@ -32,7 +32,7 @@ import { TextInput } from "@docspace/shared/components/text-input";
|
|||||||
import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
|
import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { isMobile } from "@docspace/shared/utils";
|
import { isMobileDevice } from "@docspace/shared/utils";
|
||||||
import checkScrollSettingsBlock from "../utils";
|
import checkScrollSettingsBlock from "../utils";
|
||||||
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
|
||||||
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||||
@ -264,7 +264,7 @@ const PortalRenaming = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const checkInnerWidth = useCallback(() => {
|
const checkInnerWidth = useCallback(() => {
|
||||||
if (!isMobile()) {
|
if (!isMobileDevice()) {
|
||||||
setIsCustomizationView(true);
|
setIsCustomizationView(true);
|
||||||
|
|
||||||
const currentUrl = window.location.href.replace(
|
const currentUrl = window.location.href.replace(
|
||||||
@ -279,7 +279,7 @@ const PortalRenaming = (props) => {
|
|||||||
} else {
|
} else {
|
||||||
setIsCustomizationView(false);
|
setIsCustomizationView(false);
|
||||||
}
|
}
|
||||||
}, [isMobile, setIsCustomizationView]);
|
}, [isMobileDevice, setIsCustomizationView]);
|
||||||
|
|
||||||
const onOpenModal = () => {
|
const onOpenModal = () => {
|
||||||
setIsShowModal(true);
|
setIsShowModal(true);
|
||||||
|
@ -35,7 +35,7 @@ import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
|||||||
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { isMobile } from "@docspace/shared/utils";
|
import { isMobileDevice } from "@docspace/shared/utils";
|
||||||
import checkScrollSettingsBlock from "../utils";
|
import checkScrollSettingsBlock from "../utils";
|
||||||
import { StyledSettingsComponent } from "./StyledSettings";
|
import { StyledSettingsComponent } from "./StyledSettings";
|
||||||
import LoaderCustomization from "../sub-components/loaderCustomization";
|
import LoaderCustomization from "../sub-components/loaderCustomization";
|
||||||
@ -283,7 +283,7 @@ const WelcomePageSettings = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const checkInnerWidth = () => {
|
const checkInnerWidth = () => {
|
||||||
if (!isMobile()) {
|
if (!isMobileDevice()) {
|
||||||
setState((val) => ({ ...val, isCustomizationView: true }));
|
setState((val) => ({ ...val, isCustomizationView: true }));
|
||||||
|
|
||||||
const currentUrl = window.location.href.replace(
|
const currentUrl = window.location.href.replace(
|
||||||
|
@ -48,8 +48,19 @@ export const transitionalScreenSize = `(max-width: ${
|
|||||||
size.desktop + INFO_PANEL_WIDTH
|
size.desktop + INFO_PANEL_WIDTH
|
||||||
}px)`;
|
}px)`;
|
||||||
|
|
||||||
export const isMobile = () => {
|
export const isMobile = (width?: number) => {
|
||||||
return window.innerWidth <= size.mobile;
|
return (width ?? window.innerWidth) <= size.mobile;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const isMobileDevice = () => {
|
||||||
|
const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
|
||||||
|
const width = Math.abs(
|
||||||
|
Math.round(
|
||||||
|
Math.sin(angleByRadians) * window.innerHeight +
|
||||||
|
Math.cos(angleByRadians) * window.innerWidth,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
return isMobile(width);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const isTablet = (width?: number) => {
|
export const isTablet = (width?: number) => {
|
||||||
|
@ -56,6 +56,7 @@ import {
|
|||||||
isTouchDevice,
|
isTouchDevice,
|
||||||
checkIsSSR,
|
checkIsSSR,
|
||||||
INFO_PANEL_WIDTH,
|
INFO_PANEL_WIDTH,
|
||||||
|
isMobileDevice,
|
||||||
} from "./device";
|
} from "./device";
|
||||||
import { getCookie } from "./cookie";
|
import { getCookie } from "./cookie";
|
||||||
import { Context, Provider, Consumer } from "./context";
|
import { Context, Provider, Consumer } from "./context";
|
||||||
@ -124,6 +125,7 @@ export {
|
|||||||
DomHelpers,
|
DomHelpers,
|
||||||
ObjectUtils,
|
ObjectUtils,
|
||||||
getLogoUrl,
|
getLogoUrl,
|
||||||
|
isMobileDevice,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getModalType = () => {
|
export const getModalType = () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user