diff --git a/packages/client/src/components/Layout/index.js b/packages/client/src/components/Layout/index.js index 459bc45d74..6b9059afb4 100644 --- a/packages/client/src/components/Layout/index.js +++ b/packages/client/src/components/Layout/index.js @@ -8,7 +8,13 @@ import { isMobile as isMobileUtils, tablet, } from "@docspace/components/utils/device"; -import { isIOS, isMobile, isChrome, isAndroid } from "react-device-detect"; +import { + isIOS, + isMobile, + isChrome, + isMobileOnly, + isAndroid, +} from "react-device-detect"; import { inject, observer } from "mobx-react"; const StyledContainer = styled.div` @@ -146,7 +152,7 @@ const Layout = (props) => { height = `100%`; } - if (isIOS && isMobile && e?.type === "resize" && e?.target?.height) { + if (isIOS && isMobileOnly && e?.type === "resize" && e?.target?.height) { const diff = window.innerHeight - e.target.height; windowHeight -= diff; @@ -163,7 +169,7 @@ const Layout = (props) => { document.body.style.position = `fixed`; document.body.style.overflow = `hidden`; document.body.style.scroll = `hidden`; - } else if (isMobile && isIOS) { + } else if (isMobileOnly && isIOS) { document.body.style.height = `100%`; document.body.style.maxHeight = `100%`; document.body.style.minHeight = `100%`; diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js index 7443a53b0f..554a584992 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js +++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/StyledBackup.js @@ -4,7 +4,6 @@ import { UnavailableStyles, } from "../../../utils/commonSettingsStyles"; -import { isMobileOnly } from "react-device-detect"; import { tablet, mobile } from "@docspace/components/utils/device"; const INPUT_LENGTH = "350px"; @@ -288,9 +287,6 @@ const StyledAutoBackup = styled.div` max-width: 724px; box-sizing: border-box; } - .auto-backup_buttons { - ${!isMobileOnly && "margin-bottom: 24px"} - } .toggle-caption { display: flex; @@ -443,6 +439,12 @@ const StyledScheduleComponent = styled.div` css` max-width: 138px; `}; + + @media ${mobile} { + grid-area: time; + max-width: ${INPUT_LENGTH}; + width: 100%; + } } .additional_options { max-width: ${INPUT_LENGTH}; @@ -455,7 +457,11 @@ const StyledScheduleComponent = styled.div` .month_options { grid-area: weekly-monthly; width: 100%; - max-width: ${(props) => (!props.isMobileOnly ? "124px" : INPUT_LENGTH)}; + max-width: "124px"; + + @media ${mobile} { + max-width: ${INPUT_LENGTH}; + } } .schedule-backup_combobox { display: inline-block; @@ -463,38 +469,32 @@ const StyledScheduleComponent = styled.div` } .main_options { max-width: 363px; + + max-width: ${INPUT_LENGTH}; + display: grid; + ${(props) => + props.weeklySchedule || props.monthlySchedule + ? css` + grid-template-areas: "days weekly-monthly time"; + grid-template-columns: 1fr 1fr 1fr; + ` + : css` + grid-template-areas: "days time"; + grid-template-columns: 1fr 1fr; + `}; + grid-gap: 8px; + + @media ${mobile} { + display: block; + } } - ${!isMobileOnly - ? css` - .main_options { - max-width: ${INPUT_LENGTH}; - display: grid; - ${(props) => - props.weeklySchedule || props.monthlySchedule - ? css` - grid-template-areas: "days weekly-monthly time"; - grid-template-columns: 1fr 1fr 1fr; - ` - : css` - grid-template-areas: "days time"; - grid-template-columns: 1fr 1fr; - `}; - grid-gap: 8px; - } - ` - : css` - .days_option { - grid-area: time; - max-width: ${INPUT_LENGTH}; - width: 100%; - } - `} + .time_options { grid-area: time; - ${isMobileOnly && - css` + + @media ${mobile} { max-width: ${INPUT_LENGTH}; - `}; + } width: 100%; } .max_copies { @@ -559,7 +559,7 @@ const StyledBackup = styled.div` padding-bottom: 8px; } .layout-progress-bar { - ${!isMobileOnly && "cursor: default;"} + cursor: default; } .backup-section_wrapper { margin-bottom: 27px; diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js index 5f7462c1cd..c368e91c2f 100644 --- a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js +++ b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js @@ -19,11 +19,12 @@ import { StyledWrapper } from "./styled-social-networks"; const SocialNetworks = (props) => { const { t } = useTranslation(["Profile", "Common"]); - const { providers, setProviders, isOAuthAvailable } = props; + const { providers, setProviders, isOAuthAvailable, setPortalQuota } = props; const fetchData = async () => { try { const data = await getAuthProviders(); + if (typeof isOAuthAvailable === "undefined") await setPortalQuota(); setProviders(data); } catch (e) { console.error(e); @@ -99,8 +100,6 @@ const SocialNetworks = (props) => { const { icon, label, iconOptions } = providersData[item.provider]; if (!icon || !label) return <>; - console.log(item); - const onClick = (e) => { if (item.linked) { unlinkAccount(item.provider); @@ -140,11 +139,12 @@ export default inject(({ auth, peopleStore }) => { const { usersStore } = peopleStore; const { providers, setProviders } = usersStore; const { currentQuotaStore } = auth; - const { isOAuthAvailable } = currentQuotaStore; + const { isOAuthAvailable, setPortalQuota } = currentQuotaStore; return { providers, setProviders, isOAuthAvailable, + setPortalQuota, }; })(observer(SocialNetworks)); diff --git a/packages/common/components/Section/sub-components/info-panel.js b/packages/common/components/Section/sub-components/info-panel.js index 157d594e70..318b0b0f80 100644 --- a/packages/common/components/Section/sub-components/info-panel.js +++ b/packages/common/components/Section/sub-components/info-panel.js @@ -4,7 +4,7 @@ import { mobile, infoPanelWidth, } from "@docspace/components/utils/device"; -import { isMobile, isIOS } from "react-device-detect"; +import { isMobileOnly, isIOS } from "react-device-detect"; import { inject } from "mobx-react"; import PropTypes from "prop-types"; import React, { useEffect, useState, useRef, useCallback } from "react"; @@ -164,7 +164,7 @@ const InfoPanel = ({ }, []); useEffect(() => { - if (isMobile && isIOS) { + if (isMobileOnly && isIOS) { window.visualViewport.addEventListener("resize", onResize); } diff --git a/packages/common/store/CurrentQuotaStore.js b/packages/common/store/CurrentQuotaStore.js index 5fab0a4740..1ac891f4bf 100644 --- a/packages/common/store/CurrentQuotaStore.js +++ b/packages/common/store/CurrentQuotaStore.js @@ -222,11 +222,13 @@ class QuotasStore { if (elem.id === featureId && elem.used) elem.used.value = value; }); }; + updateQuotaFeatureValue = (featureId, value) => { this.currentPortalQuotaFeatures.forEach((elem) => { if (elem.id === featureId) elem.value = value; }); }; + setPortalQuota = async () => { try { const res = await api.portal.getPortalQuota(); diff --git a/packages/components/aside/aside.js b/packages/components/aside/aside.js index fbe074eded..90e6906cc4 100644 --- a/packages/components/aside/aside.js +++ b/packages/components/aside/aside.js @@ -1,5 +1,5 @@ import React from "react"; -import { isMobile, isIOS } from "react-device-detect"; +import { isMobileOnly, isIOS } from "react-device-detect"; import PropTypes from "prop-types"; import Scrollbar from "../scrollbar"; import { @@ -25,7 +25,7 @@ const Aside = React.memo((props) => { const visualPageTop = React.useRef(0); React.useEffect(() => { - if (isMobile && isIOS) { + if (isMobileOnly && isIOS) { window.visualViewport.addEventListener("resize", onResize); window.visualViewport.addEventListener("scroll", onResize); } diff --git a/packages/components/drop-down/index.js b/packages/components/drop-down/index.js index 20287676c8..680186f61f 100644 --- a/packages/components/drop-down/index.js +++ b/packages/components/drop-down/index.js @@ -2,7 +2,7 @@ import React, { memo } from "react"; import PropTypes from "prop-types"; import onClickOutside from "react-onclickoutside"; -import { isIOS, isMobile } from "react-device-detect"; +import { isIOS, isMobileOnly, isMobile } from "react-device-detect"; import Portal from "../portal"; import DomHelpers from "../utils/domHelpers"; @@ -344,7 +344,7 @@ class DropDown extends React.PureComponent { if ( isIOS && - isMobile && + isMobileOnly && container?.height !== window.visualViewport.height ) { const rects = this.dropDownRef?.current?.getBoundingClientRect(); diff --git a/packages/components/modal-dialog/views/modal-aside.js b/packages/components/modal-dialog/views/modal-aside.js index 6d8a9781d8..a9048c6ecd 100644 --- a/packages/components/modal-dialog/views/modal-aside.js +++ b/packages/components/modal-dialog/views/modal-aside.js @@ -18,7 +18,7 @@ import ModalBackdrop from "../components/ModalBackdrop"; import Scrollbar from "../../scrollbar"; import { classNames } from "../../utils/classNames"; import FormWrapper from "../components/FormWrapper"; -import { isIOS, isMobile } from "react-device-detect"; +import { isIOS, isMobileOnly } from "react-device-detect"; const Modal = ({ id, @@ -53,7 +53,7 @@ const Modal = ({ const contentRef = React.useRef(0); React.useEffect(() => { - if (isMobile && isIOS) { + if (isMobileOnly && isIOS) { window.visualViewport.addEventListener("resize", onResize); window.visualViewport.addEventListener("scroll", onResize); } diff --git a/packages/components/selector/sub-components/Body/index.tsx b/packages/components/selector/sub-components/Body/index.tsx index d9a035c456..721fcf04a2 100644 --- a/packages/components/selector/sub-components/Body/index.tsx +++ b/packages/components/selector/sub-components/Body/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { isMobile, isIOS } from "react-device-detect"; +import { isMobileOnly, isIOS } from "react-device-detect"; import InfiniteLoader from "react-window-infinite-loader"; import { FixedSizeList as List } from "react-window"; @@ -82,7 +82,7 @@ const Body = ({ const onBodyResize = React.useCallback( (e) => { - if (e?.target?.height && isMobile && isIOS) { + if (e?.target?.height && isMobileOnly && isIOS) { let height = e?.target?.height - 64 - HEADER_HEIGHT; if (footerVisible) { @@ -111,7 +111,7 @@ const Body = ({ React.useEffect(() => { window.addEventListener("resize", onBodyResize); - if (isMobile && isIOS) + if (isMobileOnly && isIOS) window.visualViewport?.addEventListener("resize", onBodyResize); return () => { window.removeEventListener("resize", onBodyResize);