+ sideColor={theme.filesSection.rowView.sideColor}
+ >
@@ -220,7 +220,8 @@ const FilesRowContent = ({
containerWidth="15%"
fontSize="12px"
fontWeight={400}
- className="row_update-text">
+ className="row_update-text"
+ >
{contentComponent()}
@@ -231,10 +232,11 @@ const FilesRowContent = ({
className="row-content-text"
fontSize="12px"
fontWeight={400}
- truncate={true}>
+ truncate={true}
+ >
{isRooms
? t(RoomsTypeTranslations[item.roomType])
- : !fileExst && !contentLength && !providerKey && !isMobileOnly
+ : !fileExst && !contentLength && !providerKey && !isMobile()
? `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t(
"Translations:Files"
)}`
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
index c6afb80d8a..acae9a2b1a 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@@ -4,7 +4,7 @@ import { withTranslation } from "react-i18next";
import DragAndDrop from "@docspace/components/drag-and-drop";
import Row from "@docspace/components/row";
import FilesRowContent from "./FilesRowContent";
-import { isTablet, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
import withFileActions from "../../../../../HOCs/withFileActions";
import withQuickButtons from "../../../../../HOCs/withQuickButtons";
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index 8b730f17c0..6e24c2ccea 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -6,18 +6,19 @@ import { useNavigate, useLocation } from "react-router-dom";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
import TableBody from "@docspace/components/table-container/TableBody";
-import { isMobile } from "react-device-detect";
+
import styled, { css } from "styled-components";
import { Base } from "@docspace/components/themes";
+import { DeviceType } from "@docspace/common/constants";
const marginCss = css`
margin-top: -1px;
- border-top: ${props =>
+ border-top: ${(props) =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
`;
const fileNameCss = css`
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
@@ -32,7 +33,7 @@ const fileNameCss = css`
`;
const contextCss = css`
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -20px;
@@ -70,13 +71,13 @@ const StyledTableContainer = styled(TableContainer)`
border-left: 0; //for Safari macOS
border-right: 0; //for Safari macOS
- border-image-source: ${props => `linear-gradient(to right,
+ border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
.table-container_row-context-menu-wrapper {
${contextCss}
- border-image-source: ${props => `linear-gradient(to left,
+ border-image-source: ${(props) => `linear-gradient(to left,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
}
@@ -108,7 +109,7 @@ const StyledTableContainer = styled(TableContainer)`
.table-container_file-name-cell,
.table-container_row-context-menu-wrapper {
- border-bottom: ${props =>
+ border-bottom: ${(props) =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
}
}
@@ -140,6 +141,7 @@ const Table = ({
columnStorageName,
columnInfoPanelStorageName,
highlightFile,
+ currentDeviceType,
}) => {
const [tagCount, setTagCount] = React.useState(null);
const [hideColumns, setHideColumns] = React.useState(false);
@@ -159,13 +161,13 @@ const Table = ({
(width < 1025 && !infoPanelVisible) ||
((width < 625 || (viewAs === "row" && width < 1025)) &&
infoPanelVisible) ||
- isMobile
+ currentDeviceType !== DeviceType.desktop
) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
}
- }, [sectionWidth]);
+ }, [sectionWidth, currentDeviceType]);
useEffect(() => {
return () => {
@@ -176,7 +178,7 @@ const Table = ({
}, []);
const onResize = useCallback(
- node => {
+ (node) => {
const element = tagRef?.current ? tagRef?.current : node;
if (element) {
@@ -190,7 +192,7 @@ const Table = ({
[tagCount]
);
- const onSetTagRef = useCallback(node => {
+ const onSetTagRef = useCallback((node) => {
if (node) {
tagRef.current = node;
onResize(node);
@@ -258,7 +260,8 @@ const Table = ({
useReactWindow={!withPaging}
infoPanelVisible={infoPanelVisible}
columnInfoPanelStorageName={columnInfoPanelStorageName}
- itemHeight={49}>
+ itemHeight={49}
+ >
{filesListNode}
@@ -286,7 +289,7 @@ export default inject(({ filesStore, treeFoldersStore, auth, tableStore }) => {
highlightFile,
} = filesStore;
- const { withPaging, theme } = auth.settingsStore;
+ const { withPaging, theme, currentDeviceType } = auth.settingsStore;
return {
filesList,
@@ -306,5 +309,6 @@ export default inject(({ filesStore, treeFoldersStore, auth, tableStore }) => {
columnStorageName,
columnInfoPanelStorageName,
highlightFile,
+ currentDeviceType,
};
})(observer(Table));
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
index 9e2640b971..f716ea113f 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
@@ -256,7 +256,7 @@ class FilesTableHeader extends React.Component {
componentDidMount() {
this.customScrollElm = document.getElementsByClassName("section-scroll")[0];
- this.customScrollElm.addEventListener("scroll", this.onBeginScroll);
+ this.customScrollElm?.addEventListener("scroll", this.onBeginScroll);
}
onBeginScroll = () => {
@@ -319,7 +319,7 @@ class FilesTableHeader extends React.Component {
}
componentWillUnmount() {
- this.customScrollElm.removeEventListener("scroll", this.onBeginScroll);
+ this.customScrollElm?.removeEventListener("scroll", this.onBeginScroll);
}
onColumnChange = (key) => {
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
index 3e1a04d7c7..c6a0f53ddc 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
@@ -8,7 +8,9 @@ import Link from "@docspace/components/link";
import TileContent from "./sub-components/TileContent";
import withContent from "../../../../../HOCs/withContent";
import withBadges from "../../../../../HOCs/withBadges";
-import { isMobile } from "react-device-detect";
+
+import { DeviceType } from "@docspace/common/constants";
+import { tablet } from "@docspace/components/utils/device";
const SimpleFilesTileContent = styled(TileContent)`
.row-main-container {
@@ -22,7 +24,7 @@ const SimpleFilesTileContent = styled(TileContent)`
}
.badge {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
@@ -37,7 +39,7 @@ const SimpleFilesTileContent = styled(TileContent)`
.new-items {
position: absolute;
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 29px;
@@ -55,7 +57,7 @@ const SimpleFilesTileContent = styled(TileContent)`
.share-icon {
margin-top: -4px;
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 8px;
@@ -93,7 +95,7 @@ const SimpleFilesTileContent = styled(TileContent)`
}
`}
- @media (max-width: 1024px) {
+ @media ${tablet} {
display: inline-flex;
height: auto;
@@ -109,6 +111,7 @@ const FilesTileContent = ({
linkStyles,
theme,
isRooms,
+ currentDeviceType,
}) => {
const { fileExst, title, viewAccessability } = item;
@@ -119,18 +122,20 @@ const FilesTileContent = ({
+ isRooms={isRooms}
+ >
@@ -143,7 +148,11 @@ export default inject(({ auth, treeFoldersStore }) => {
const isRooms = isRoomsFolder || isArchiveFolder;
- return { theme: auth.settingsStore.theme, isRooms };
+ return {
+ theme: auth.settingsStore.theme,
+ currentDeviceType: auth.settingsStore.currentDeviceType,
+ isRooms,
+ };
})(
observer(
withTranslation(["Files", "Translations", "Notifications"])(
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
index 8f5c7a40da..ee5d8b7e2f 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -368,7 +368,7 @@ const StyledContent = styled.div`
margin-left: 12px;
}
- @media (max-width: 1024px) {
+ @media ${tablet} {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -641,6 +641,7 @@ class Tile extends React.PureComponent {
const contextMenuHeader = {
icon: children[0].props.item.icon,
title: children[0].props.item.title,
+ color: children[0].props.item.logo?.color,
};
const title = item.isFolder
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js
index 740433023a..4ada4a08db 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TileContent.js
@@ -1,6 +1,7 @@
import React from "react";
import styled, { css } from "styled-components";
import PropTypes from "prop-types";
+import { tablet } from "@docspace/components/utils/device";
const truncateCss = css`
white-space: nowrap;
@@ -36,7 +37,7 @@ const MainContainerWrapper = styled.div`
const MainContainer = styled.div`
height: 20px;
- @media (max-width: 1024px) {
+ @media ${tablet} {
${truncateCss};
}
`;
diff --git a/packages/client/src/pages/Home/Section/Body/index.js b/packages/client/src/pages/Home/Section/Body/index.js
index 75a7186f1e..bf66622e93 100644
--- a/packages/client/src/pages/Home/Section/Body/index.js
+++ b/packages/client/src/pages/Home/Section/Body/index.js
@@ -1,7 +1,6 @@
import React, { useEffect } from "react";
import { withTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
-import { isMobile, isMobileOnly } from "react-device-detect";
import { observer, inject } from "mobx-react";
import FilesRowContainer from "./RowsView/FilesRowContainer";
@@ -12,6 +11,8 @@ import TableView from "./TableView/TableContainer";
import withHotkeys from "../../../../HOCs/withHotkeys";
import { Consumer } from "@docspace/components/utils/context";
import { isElementInViewport } from "@docspace/common/utils";
+import { isMobile, isTablet } from "@docspace/components/utils/device";
+import { DeviceType } from "@docspace/common/constants";
let currentDroppable = null;
let isDragActive = false;
@@ -43,6 +44,7 @@ const SectionBodyContent = (props) => {
onClickBack,
movingInProgress,
+ currentDeviceType,
} = props;
useEffect(() => {
@@ -54,7 +56,7 @@ const SectionBodyContent = (props) => {
"#customScrollBar > .scroll-wrapper > .scroller"
);
- if (isMobile) {
+ if (isTablet() || isMobile() || currentDeviceType !== DeviceType.desktop) {
customScrollElm && customScrollElm.scrollTo(0, 0);
}
@@ -85,6 +87,7 @@ const SectionBodyContent = (props) => {
folderId,
viewAs,
uploaded,
+ currentDeviceType,
]);
useEffect(() => {
@@ -98,21 +101,26 @@ const SectionBodyContent = (props) => {
let isInViewport = isElementInViewport(targetElement);
if (!isInViewport || viewAs === "table") {
- const bodyScroll = isMobileOnly
- ? document.querySelector(
- "#customScrollBar > .scroll-wrapper > .scroller"
- )
- : document.querySelector(".section-scroll");
+ const bodyScroll =
+ isMobile() || currentDeviceType === DeviceType.mobile
+ ? document.querySelector(
+ "#customScrollBar > .scroll-wrapper > .scroller"
+ )
+ : document.querySelector(".section-scroll");
const count =
filesList.findIndex((elem) => elem.id === scrollToItem.id) *
- (isMobileOnly ? 57 : viewAs === "table" ? 40 : 48);
+ (isMobile() || currentDeviceType === DeviceType.mobile
+ ? 57
+ : viewAs === "table"
+ ? 40
+ : 48);
bodyScroll.scrollTo(0, count);
}
setScrollToItem(null);
}
- }, [scrollToItem]);
+ }, [scrollToItem, currentDeviceType]);
const onBeforeunload = (e) => {
if (!uploaded) {
@@ -287,6 +295,7 @@ const SectionBodyContent = (props) => {
export default inject(
({
+ auth,
filesStore,
selectedFolderStore,
treeFoldersStore,
@@ -337,6 +346,7 @@ export default inject(
uploaded: uploadDataStore.uploaded,
onClickBack: filesActionsStore.onClickBack,
movingInProgress,
+ currentDeviceType: auth.settingsStore,
};
}
)(
diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js
index 31ac284a88..f3573bd9d1 100644
--- a/packages/client/src/pages/Home/Section/Filter/index.js
+++ b/packages/client/src/pages/Home/Section/Filter/index.js
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { useLocation, useNavigate } from "react-router-dom";
-import { isMobile, isMobileOnly } from "react-device-detect";
+
import { withTranslation } from "react-i18next";
import find from "lodash/find";
import result from "lodash/result";
@@ -26,6 +26,7 @@ import {
EmployeeStatus,
PaymentsType,
AccountLoginType,
+ DeviceType,
} from "@docspace/common/constants";
import { getDefaultRoomName } from "SRC_DIR/helpers/filesUtils";
@@ -251,6 +252,7 @@ const SectionFilterContent = ({
publicRoomKey,
setRoomsFilter,
standalone,
+ currentDeviceType,
}) => {
const location = useLocation();
const navigate = useNavigate();
@@ -522,7 +524,7 @@ const SectionFilterContent = ({
if (
(sectionWidth < 1025 && !infoPanelVisible) ||
(sectionWidth < 625 && infoPanelVisible) ||
- isMobile
+ currentDeviceType !== DeviceType.desktop
) {
setViewAs("row");
} else {
@@ -532,7 +534,7 @@ const SectionFilterContent = ({
setViewAs(view);
}
},
- [sectionWidth, infoPanelVisible, setViewAs]
+ [sectionWidth, infoPanelVisible, setViewAs, currentDeviceType]
);
const getSelectedInputValue = React.useCallback(() => {
@@ -1214,6 +1216,13 @@ const SectionFilterContent = ({
group: FilterGroups.roomFilterType,
label: t("ViewOnlyRooms"),
};
+ case RoomsType.PublicRoom:
+ return {
+ id: "filter_type-public",
+ key: RoomsType.PublicRoom,
+ group: FilterGroups.roomFilterType,
+ label: t("PublicRoom"),
+ };
case RoomsType.CustomRoom:
default:
return {
@@ -1967,7 +1976,7 @@ const SectionFilterContent = ({
);
const onSortButtonClick = (isOpen) => {
- if (isMobileOnly) {
+ if (currentDeviceType === DeviceType.mobile) {
setMainButtonMobileVisible(isOpen);
}
};
@@ -2032,6 +2041,7 @@ const SectionFilterContent = ({
clearSearch={clearSearch}
setClearSearch={setClearSearch}
onSortButtonClick={onSortButtonClick}
+ currentDeviceType={currentDeviceType}
/>
);
};
@@ -2069,7 +2079,7 @@ export default inject(
const { fetchTags } = tagsStore;
const { user } = auth.userStore;
- const { personal, standalone } = auth.settingsStore;
+ const { personal, standalone, currentDeviceType } = auth.settingsStore;
const {
isFavoritesFolder,
isRecentFolder,
@@ -2144,6 +2154,7 @@ export default inject(
publicRoomKey,
setRoomsFilter,
standalone,
+ currentDeviceType,
};
}
)(
diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js
index 20b4bfcc0c..8f3a622c8d 100644
--- a/packages/client/src/pages/Home/Section/Header/index.js
+++ b/packages/client/src/pages/Home/Section/Header/index.js
@@ -31,7 +31,7 @@ import PublicRoomIconUrl from "PUBLIC_DIR/images/public-room.react.svg?url";
import React from "react";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
-import { isMobile, isTablet, isMobileOnly } from "react-device-detect";
+import { isMobile, isTablet } from "react-device-detect";
import styled, { css } from "styled-components";
import copy from "copy-to-clipboard";
import { useNavigate, useLocation } from "react-router-dom";
@@ -46,7 +46,12 @@ import { tablet, mobile } from "@docspace/components/utils/device";
import { Consumer } from "@docspace/components/utils/context";
import toastr from "@docspace/components/toast/toastr";
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
-import { Events, EmployeeType, RoomsType } from "@docspace/common/constants";
+import {
+ Events,
+ EmployeeType,
+ RoomsType,
+ DeviceType,
+} from "@docspace/common/constants";
import { CategoryType } from "SRC_DIR/helpers/constants";
import {
@@ -74,7 +79,7 @@ const StyledContainer = styled.div`
height: 68px;
@media ${tablet} {
- height: 60px;
+ height: 61px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
@@ -86,22 +91,8 @@ const StyledContainer = styled.div`
width: calc(100% + 32px);
}
- ${isMobile &&
- css`
- height: 60px;
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin: 0 -16px 0 0;
- `
- : css`
- margin: 0 0 0 -16px;
- `}
- width: calc(100% + 32px);
- `}
-
@media ${mobile} {
- height: 52px;
+ height: 52px !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
@@ -113,20 +104,6 @@ const StyledContainer = styled.div`
`}
width: calc(100% + 32px);
}
-
- ${isMobileOnly &&
- css`
- height: 52px;
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin: 0 -16px 0 0;
- `
- : css`
- margin: 0 0 0 -16px;
- `}
- width: calc(100% + 32px);
- `}
}
.header-container {
@@ -138,7 +115,11 @@ const StyledContainer = styled.div`
display: none;}`}
@media ${tablet} {
- height: 60px;
+ height: 61px;
+ }
+
+ @media ${mobile} {
+ height: 53px;
}
}
`;
@@ -237,6 +218,8 @@ const SectionHeaderContent = (props) => {
isPublicRoomType,
externalLinks,
moveToPublicRoom,
+ currentDeviceType,
+ isFrame,
} = props;
const navigate = useNavigate();
@@ -947,7 +930,7 @@ const SectionHeaderContent = (props) => {
headerMenu,
isInfoPanelVisible,
toggleInfoPanel: onToggleInfoPanel,
- isMobileView: isMobileOnly,
+ isMobileView: currentDeviceType === DeviceType.mobile,
};
if (isAccountsPage) {
@@ -1030,7 +1013,6 @@ const SectionHeaderContent = (props) => {
onClose={onClose}
onClickFolder={onClickFolder}
isTrashFolder={isRecycleBinFolder}
- isRecycleBinFolder={isRecycleBinFolder || isArchiveFolder}
isEmptyFilesList={
isArchiveFolder ? isEmptyArchive : isEmptyFilesList
}
@@ -1059,6 +1041,8 @@ const SectionHeaderContent = (props) => {
isPublicRoomType && !isPublicRoom && PublicRoomIconUrl
}
showRootFolderTitle={insideTheRoom}
+ currentDeviceType={currentDeviceType}
+ isFrame={isFrame}
/>
)}
@@ -1168,8 +1152,13 @@ export default inject(
const selectedFolder = { ...selectedFolderStore };
- const { enablePlugins, theme, whiteLabelLogoUrls, isFrame } =
- auth.settingsStore;
+ const {
+ enablePlugins,
+ theme,
+ whiteLabelLogoUrls,
+ isFrame,
+ currentDeviceType,
+ } = auth.settingsStore;
const { isGracePeriod } = auth.currentTariffStatusStore;
const isRoom = !!roomType;
@@ -1328,6 +1317,7 @@ export default inject(
whiteLabelLogoUrls,
setRoomSharingPanelVisible,
isFrame,
+ currentDeviceType,
};
}
)(
diff --git a/packages/client/src/pages/Home/Section/SettingsBody/StyledSettings.js b/packages/client/src/pages/Home/Section/SettingsBody/StyledSettings.js
index 3975286456..6c7db6475c 100644
--- a/packages/client/src/pages/Home/Section/SettingsBody/StyledSettings.js
+++ b/packages/client/src/pages/Home/Section/SettingsBody/StyledSettings.js
@@ -1,6 +1,5 @@
import styled, { css } from "styled-components";
import { tablet } from "@docspace/components/utils/device";
-import { isMobile } from "react-device-detect";
const StyledSettings = styled.div`
margin-top: ${(props) =>
@@ -21,11 +20,6 @@ const StyledSettings = styled.div`
`}
}
- ${isMobile &&
- css`
- margin-top: 8px;
- `}
-
width: 100%;
display: grid;
diff --git a/packages/client/src/pages/Home/Section/SettingsBody/index.js b/packages/client/src/pages/Home/Section/SettingsBody/index.js
index 018d59819e..7e36abb0a5 100644
--- a/packages/client/src/pages/Home/Section/SettingsBody/index.js
+++ b/packages/client/src/pages/Home/Section/SettingsBody/index.js
@@ -10,7 +10,6 @@ import Submenu from "@docspace/components/submenu";
import PersonalSettings from "./CommonSettings";
import GeneralSettings from "./AdminSettings";
import { tablet } from "@docspace/components/utils/device";
-import { isMobile } from "react-device-detect";
const StyledContainer = styled.div`
margin-top: -22px;
@@ -18,11 +17,6 @@ const StyledContainer = styled.div`
@media ${tablet} {
margin-top: 0px;
}
-
- ${isMobile &&
- css`
- margin-top: 0px;
- `}
`;
const SectionBodyContent = ({ isErrorSettings, user }) => {
diff --git a/packages/client/src/pages/Home/Section/Warning/index.js b/packages/client/src/pages/Home/Section/Warning/index.js
new file mode 100644
index 0000000000..bba7167c15
--- /dev/null
+++ b/packages/client/src/pages/Home/Section/Warning/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import TrashWarning from "@docspace/common/components/Navigation/sub-components/trash-warning";
+
+const Warning = () => {
+ const { t } = useTranslation("Files");
+
+ return
+
+ )}
+
{(((!isEmptyPage || showFilterLoader) && !isErrorRoomNotAvailable) ||
isAccountsPage) &&
!isSettingsPage && (
@@ -352,6 +359,7 @@ export default inject(
const {
firstLoad,
+ setIsSectionHeaderLoading,
setIsSectionBodyLoading,
setIsSectionFilterLoading,
isLoading,
@@ -359,9 +367,10 @@ export default inject(
showFilterLoader,
} = clientLoadingStore;
- const setIsLoading = (param) => {
- setIsSectionFilterLoading(param);
- setIsSectionBodyLoading(param);
+ const setIsLoading = (param, withoutTimer, withHeaderLoader) => {
+ if (withHeaderLoader) setIsSectionHeaderLoading(param, !withoutTimer);
+ setIsSectionFilterLoading(param, !withoutTimer);
+ setIsSectionBodyLoading(param, !withoutTimer);
};
const {
diff --git a/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js b/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
index 454c7889c3..3df924838d 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Article/Body/index.js
@@ -6,10 +6,9 @@ import { withTranslation } from "react-i18next";
import { isArrayEqual } from "@docspace/components/utils/array";
-import { isMobileOnly } from "react-device-detect";
-
import { isMobile } from "@docspace/components/utils/device";
import withLoading from "SRC_DIR/HOCs/withLoading";
+import { DeviceType } from "@docspace/common/constants";
import {
//getKeyByLink,
@@ -115,6 +114,8 @@ const ArticleBodyContent = (props) => {
standalone,
isEnterprise,
isCommunity,
+ currentDeviceType,
+ isProfileLoading,
} = props;
const [selectedKeys, setSelectedKeys] = React.useState([]);
@@ -160,7 +161,7 @@ const ArticleBodyContent = (props) => {
}, []);
React.useEffect(() => {
- if (tReady) setIsLoadedArticleBody(true);
+ if (tReady && !isProfileLoading) setIsLoadedArticleBody(true);
if (prevLocation.current.pathname !== location.pathname) {
if (location.pathname.includes("common")) {
@@ -198,7 +199,13 @@ const ArticleBodyContent = (props) => {
this.setState({ selectedKeys: ["8-0"] });
}
}
- }, [tReady, setIsLoadedArticleBody, location.pathname, selectedKeys]);
+ }, [
+ tReady,
+ isProfileLoading,
+ setIsLoadedArticleBody,
+ location.pathname,
+ selectedKeys,
+ ]);
const onSelect = (value) => {
if (isArrayEqual([value], selectedKeys)) {
@@ -207,7 +214,7 @@ const ArticleBodyContent = (props) => {
setSelectedKeys([value + "-0"]);
- if (isMobileOnly || isMobile()) {
+ if (currentDeviceType === DeviceType.mobile) {
toggleArticleOpen();
}
@@ -333,10 +340,14 @@ const ArticleBodyContent = (props) => {
const items = catalogItems();
- return !isLoadedArticleBody ?
- {isTabletView ? (
-
- ) : (
-
+
@@ -35,7 +35,17 @@ const Layout = ({
enablePlugins,
isInitPlugins,
initPlugins,
+ setBodyRendered,
+ isLoadedArticleBody,
}) => {
+ useEffect(() => {
+ setBodyRendered(true);
+
+ return () => {
+ setBodyRendered(false);
+ };
+ }, []);
+
useEffect(() => {
currentProductId !== "settings" && setCurrentProductId("settings");
}, [language, currentProductId, setCurrentProductId]);
@@ -52,9 +62,13 @@ const Layout = ({
return (
<>
-
+
{currentPath === webhookHistoryPath ? (
{
+const MobileView = ({ isSettingPaid }) => {
const { t } = useTranslation(["Settings"]);
const navigate = useNavigate();
@@ -24,18 +24,24 @@ const MobileView = () => {
title={t("WhiteLabel")}
subtitle={t("BrandingSubtitle")}
url="/portal-settings/customization/branding/white-label"
+ withPaidBadge={!isSettingPaid}
+ badgeLabel={t("Common:Paid")}
onClickLink={onClickLink}
/>
@@ -191,6 +191,7 @@ const DNSSettings = (props) => {
const buttonContainer = standalone ? (
{
) : (
{
};
export default inject(({ auth, common }) => {
- const { helpLink, currentColorScheme, standalone, dnsSettingsUrl } =
- auth.settingsStore;
+ const {
+ helpLink,
+ currentColorScheme,
+ standalone,
+ dnsSettingsUrl,
+ currentDeviceType,
+ } = auth.settingsStore;
const {
isLoaded,
setIsLoadedDNSSettings,
@@ -282,5 +289,6 @@ export default inject(({ auth, common }) => {
setIsEnableDNS,
saveDNSSettings,
dnsSettingsUrl,
+ currentDeviceType,
};
})(withLoading(withTranslation(["Settings", "Common"])(observer(DNSSettings))));
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js
index 3253fcf393..4823184f2e 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js
@@ -10,8 +10,7 @@ import { inject, observer } from "mobx-react";
import { LANGUAGE, COOKIE_EXPIRATION_YEAR } from "@docspace/common/constants";
import { setCookie } from "@docspace/common/utils";
import { useNavigate } from "react-router-dom";
-import { isMobileOnly } from "react-device-detect";
-import { isSmallTablet } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils";
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
import LoaderCustomization from "../sub-components/loaderCustomization";
@@ -207,7 +206,7 @@ const LanguageAndTimeZone = (props) => {
findSelectedItemByKey(timezones, portalTimeZoneId) ||
rawTimezones[0];
- const timezoneDefault =
+ const timezoneDefault = timezoneDefaultFromSessionStorage ||
findSelectedItemByKey(timezones, portalTimeZoneId) || timezones[0];
setState((val) => ({ ...val, timezone, timezoneDefault }));
@@ -373,7 +372,7 @@ const LanguageAndTimeZone = (props) => {
};
const checkInnerWidth = () => {
- if (!isSmallTablet()) {
+ if (!isMobile()) {
setState((val) => ({ ...val, isCustomizationView: true }));
const currentUrl = window.location.href.replace(
@@ -439,7 +438,6 @@ const LanguageAndTimeZone = (props) => {
dropDownMaxHeight={300}
className="dropdown-item-width combo-box-settings"
showDisabledItems={true}
- directionY="both"
/>
{
dropDownMaxHeight={300}
className="dropdown-item-width combo-box-settings"
showDisabledItems={true}
- directionY="both"
/>
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js
index 79b349dcd5..9d6497be03 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/portal-renaming.js
@@ -6,8 +6,7 @@ import TextInput from "@docspace/components/text-input";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import { inject, observer } from "mobx-react";
import { useNavigate } from "react-router-dom";
-import { isMobileOnly } from "react-device-detect";
-import { isSmallTablet } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils";
import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
@@ -240,7 +239,7 @@ const PortalRenaming = (props) => {
};
const checkInnerWidth = useCallback(() => {
- if (!isSmallTablet()) {
+ if (!isMobile()) {
setIsCustomizationView(true);
const currentUrl = window.location.href.replace(
@@ -255,7 +254,7 @@ const PortalRenaming = (props) => {
} else {
setIsCustomizationView(false);
}
- }, [isSmallTablet, setIsCustomizationView]);
+ }, [isMobile, setIsCustomizationView]);
const onOpenModal = () => {
setIsShowModal(true);
diff --git a/packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js b/packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js
index 888ec86ba5..bb476573c5 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/welcome-page-settings.js
@@ -4,17 +4,14 @@ import { withTranslation } from "react-i18next";
import FieldContainer from "@docspace/components/field-container";
import toastr from "@docspace/components/toast/toastr";
import TextInput from "@docspace/components/text-input";
-import HelpButton from "@docspace/components/help-button";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import { inject, observer } from "mobx-react";
-import config from "PACKAGE_FILE";
import { useNavigate } from "react-router-dom";
-import { isMobileOnly } from "react-device-detect";
-import { isSmallTablet } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/components/utils/device";
import checkScrollSettingsBlock from "../utils";
-import { StyledSettingsComponent, StyledScrollbar } from "./StyledSettings";
+import { StyledSettingsComponent } from "./StyledSettings";
import LoaderCustomization from "../sub-components/loaderCustomization";
import withLoading from "SRC_DIR/HOCs/withLoading";
import Text from "@docspace/components/text";
@@ -135,10 +132,6 @@ const WelcomePageSettings = (props) => {
setState((val) => ({ ...val, hasScroll: scrollLngTZSettings }));
}
- if (greetingSettings !== prevProps.greetingSettings) {
- setState((val) => ({ ...val, greetingTitle: greetingSettings }));
- }
-
if (state.greetingTitleDefault || state.greetingTitle) {
checkChanges();
}
@@ -156,7 +149,6 @@ const WelcomePageSettings = (props) => {
isLoaded,
setIsLoadedWelcomePageSettings,
tReady,
- greetingSettings,
getSettings,
getGreetingSettingsIsDefault,
state.hasScroll,
@@ -165,6 +157,19 @@ const WelcomePageSettings = (props) => {
state.isLoadingGreetingRestore,
]);
+ React.useEffect(() => {
+ greetingTitleFromSessionStorage = getFromSessionStorage("greetingTitle");
+ const emptyGreetingTitleFromSessionStorage =
+ greetingTitleFromSessionStorage === null ||
+ greetingTitleFromSessionStorage === "none";
+
+ if (!emptyGreetingTitleFromSessionStorage) return;
+
+ if (greetingSettings !== state.greetingTitle) {
+ setState((val) => ({ ...val, greetingTitle: greetingSettings }));
+ }
+ }, [greetingSettings]);
+
React.useEffect(() => {
prevProps.current = { isLoaded, tReady, greetingSettings };
}, [isLoaded, tReady, greetingSettings]);
@@ -217,8 +222,6 @@ const WelcomePageSettings = (props) => {
.then(() => {
setState((val) => ({
...val,
- greetingTitle: greetingSettings,
- greetingTitleDefault: greetingSettings,
showReminder: false,
}));
@@ -262,7 +265,7 @@ const WelcomePageSettings = (props) => {
};
const checkInnerWidth = () => {
- if (!isSmallTablet()) {
+ if (!isMobile()) {
setState((val) => ({ ...val, isCustomizationView: true }));
const currentUrl = window.location.href.replace(
diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
index 2b79a812e7..a432c8813c 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
@@ -15,7 +15,6 @@ import DropDownItem from "@docspace/components/drop-down-item";
import DropDownContainer from "@docspace/components/drop-down";
import HexColorPickerComponent from "./sub-components/hexColorPicker";
-import { isMobileOnly, isDesktop } from "react-device-detect";
import Loader from "./sub-components/loaderAppearance";
@@ -23,6 +22,8 @@ import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js";
import { ReactSVG } from "react-svg";
import ModalDialogDelete from "./sub-components/modalDialogDelete";
import hexToRgba from "hex-to-rgba";
+import { isMobile } from "@docspace/components/utils/device";
+import { DeviceType } from "@docspace/common/constants";
const Appearance = (props) => {
const {
@@ -34,6 +35,7 @@ const Appearance = (props) => {
deleteAppearanceTheme,
tReady,
t,
+ currentDeviceType,
} = props;
const defaultAppliedColorAccent = currentColorScheme.main.accent;
@@ -287,7 +289,7 @@ const Appearance = (props) => {
);
const onCheckView = () => {
- if (isDesktop && window.innerWidth < 600) {
+ if (isMobile()) {
setIsSmallWindow(true);
} else {
setIsSmallWindow(false);
@@ -458,36 +460,40 @@ const Appearance = (props) => {
return textColor;
};
- const onAppliedColorAccent = useCallback(() => {
- if (appliedColorAccent.toUpperCase() !== currentColorAccent) {
- setChangeCurrentColorAccent(true);
- }
+ const onAppliedColorAccent = useCallback(
+ (color) => {
+ if (color.toUpperCase() !== currentColorAccent) {
+ setChangeCurrentColorAccent(true);
+ }
- setCurrentColorAccent(appliedColorAccent);
- saveToSessionStorage("selectColorAccent", appliedColorAccent);
+ setCurrentColorAccent(color);
+ saveToSessionStorage("selectColorAccent", color);
- setOpenHexColorPickerAccent(false);
- }, [
- appliedColorAccent,
- currentColorAccent,
- setChangeCurrentColorAccent,
- setOpenHexColorPickerAccent,
- ]);
+ setOpenHexColorPickerAccent(false);
+ },
+ [
+ currentColorAccent,
+ setChangeCurrentColorAccent,
+ setOpenHexColorPickerAccent,
+ ]
+ );
- const onAppliedColorButtons = useCallback(() => {
- if (appliedColorButtons.toUpperCase() !== currentColorButtons) {
- setChangeCurrentColorButtons(true);
- }
+ const onAppliedColorButtons = useCallback(
+ (color) => {
+ if (color.toUpperCase() !== currentColorButtons) {
+ setChangeCurrentColorButtons(true);
+ }
- setCurrentColorButtons(appliedColorButtons);
+ setCurrentColorButtons(color);
- setOpenHexColorPickerButtons(false);
- }, [
- appliedColorButtons,
- currentColorButtons,
- setChangeCurrentColorButtons,
- setOpenHexColorPickerButtons,
- ]);
+ setOpenHexColorPickerButtons(false);
+ },
+ [
+ currentColorButtons,
+ setChangeCurrentColorButtons,
+ setOpenHexColorPickerButtons,
+ ]
+ );
const onSaveNewThemes = useCallback(
async (theme) => {
@@ -588,8 +594,7 @@ const Appearance = (props) => {
id="buttons-hex"
onCloseHexColorPicker={onCloseHexColorPickerButtons}
onAppliedColor={onAppliedColorButtons}
- color={appliedColorButtons}
- setColor={setAppliedColorButtons}
+ appliedColor={appliedColorButtons}
/>
@@ -609,8 +614,7 @@ const Appearance = (props) => {
id="accent-hex"
onCloseHexColorPicker={onCloseHexColorPickerAccent}
onAppliedColor={onAppliedColorAccent}
- color={appliedColorAccent}
- setColor={setAppliedColorAccent}
+ appliedColor={appliedColorAccent}
/>
@@ -624,6 +628,9 @@ const Appearance = (props) => {
);
};
+ const buttonSize =
+ currentDeviceType === DeviceType.desktop ? "small" : "normal";
+
return !tReady ? (
diff --git a/packages/client/src/pages/PortalSettings/categories/common/customization.js b/packages/client/src/pages/PortalSettings/categories/common/customization.js
index 7024fbf07c..7045ccd908 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/customization.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/customization.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import { withTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import { inject, observer } from "mobx-react";
-import withCultureNames from "@docspace/common/hoc/withCultureNames";
+//import withCultureNames from "@docspace/common/hoc/withCultureNames";
import LanguageAndTimeZone from "./Customization/language-and-time-zone";
import WelcomePageSettings from "./Customization/welcome-page-settings";
import PortalRenaming from "./Customization/portal-renaming";
@@ -13,6 +13,7 @@ import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import LoaderDescriptionCustomization from "./sub-components/loaderDescriptionCustomization";
import withLoading from "SRC_DIR/HOCs/withLoading";
import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
+import { mobileMore } from "@docspace/components/utils/device";
const StyledComponent = styled.div`
width: 100%;
@@ -58,7 +59,7 @@ const StyledComponent = styled.div`
margin-bottom: 24px;
}
- @media (min-width: 600px) {
+ @media ${mobileMore} {
.settings-block {
max-width: 350px;
height: auto;
diff --git a/packages/client/src/pages/PortalSettings/categories/common/index.js b/packages/client/src/pages/PortalSettings/categories/common/index.js
index 0d14923843..913cd64df1 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/index.js
@@ -11,6 +11,7 @@ import Appearance from "./appearance";
import withLoading from "SRC_DIR/HOCs/withLoading";
import LoaderSubmenu from "./sub-components/loaderSubmenu";
import { resetSessionStorage } from "../../utils";
+import { DeviceType } from "@docspace/common/constants";
const SubmenuCommon = (props) => {
const {
@@ -21,6 +22,7 @@ const SubmenuCommon = (props) => {
loadBaseInfo,
isLoadedSubmenu,
getWhiteLabelLogoUrls,
+ currentDeviceType,
} = props;
const navigate = useNavigate();
@@ -85,11 +87,18 @@ const SubmenuCommon = (props) => {
data={data}
startSelect={currentTab}
onSelect={(e) => onSelect(e)}
+ topProps={
+ currentDeviceType === DeviceType.desktop
+ ? 0
+ : currentDeviceType === DeviceType.mobile
+ ? "53px"
+ : "61px"
+ }
/>
);
};
-export default inject(({ common }) => {
+export default inject(({ auth, common }) => {
const {
isLoaded,
setIsLoadedSubmenu,
@@ -105,5 +114,6 @@ export default inject(({ common }) => {
setIsLoadedSubmenu,
isLoadedSubmenu,
getWhiteLabelLogoUrls,
+ currentDeviceType: auth.settingsStore.currentDeviceType,
};
})(withLoading(withTranslation("Settings")(observer(SubmenuCommon))));
diff --git a/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js b/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
index 66705642b5..a9c79f9405 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/sub-components/hexColorPicker.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import Button from "@docspace/components/button";
@@ -7,7 +7,7 @@ import { isMobileOnly } from "react-device-detect";
const StyledComponent = styled.div`
.save-button {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
@@ -59,12 +59,12 @@ const StyledComponent = styled.div`
height: 32px;
outline: none;
padding: 6px 8px;
- border: 1px solid ${props => (props.theme.isBase ? "#d0d5da" : "#474747")};
+ border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
border-radius: 3px;
width: 100%;
box-sizing: border-box;
- background: ${props => !props.theme.isBase && "#282828"};
- color: ${props => !props.theme.isBase && "#5C5C5C"};
+ background: ${(props) => !props.theme.isBase && "#282828"};
+ color: ${(props) => !props.theme.isBase && "#5C5C5C"};
}
.hex-value-label {
@@ -75,7 +75,7 @@ const StyledComponent = styled.div`
display: flex;
.apply-button {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
@@ -112,11 +112,19 @@ const StyledComponent = styled.div`
}
`;
-const HexColorPickerComponent = props => {
- const { onCloseHexColorPicker, onAppliedColor, setColor, color } = props;
+const HexColorPickerComponent = (props) => {
+ const { onCloseHexColorPicker, onAppliedColor, appliedColor } = props;
+
+ const [color, setColor] = useState(appliedColor);
const { t } = useTranslation("Common");
+ useEffect(() => {
+ if (color !== appliedColor) {
+ setColor(appliedColor);
+ }
+ }, [appliedColor]);
+
return (
@@ -140,7 +148,7 @@ const HexColorPickerComponent = props => {
className="apply-button"
primary={true}
scale={true}
- onClick={onAppliedColor}
+ onClick={() => onAppliedColor(color)}
/>
!props.dnsSettings && "block"};
- width: ${props =>
+ display: ${(props) => !props.dnsSettings && "block"};
+ width: ${(props) =>
props.lngTZSettings
? "283px"
: props.welcomePage
@@ -23,7 +23,7 @@ const tabletStyles = css`
.title {
display: block;
- width: ${props =>
+ width: ${(props) =>
props.lngTZSettings
? "61px"
: props.welcomePage
@@ -47,7 +47,7 @@ const tabletStyles = css`
.save-cancel-buttons {
display: block;
position: static;
- width: ${props => (props.welcomePage ? "274px" : "197px")};
+ width: ${(props) => (props.welcomePage ? "274px" : "197px")};
padding: 8px 0 0;
}
@@ -73,7 +73,7 @@ const StyledLoader = styled.div`
}
.title {
- width: ${props => (props.portalRenaming ? "109px" : "61px")};
+ width: ${(props) => (props.portalRenaming ? "109px" : "61px")};
}
.title-long {
@@ -98,7 +98,7 @@ const StyledLoader = styled.div`
position: absolute;
bottom: 0;
width: calc(100% - 32px);
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
@@ -121,7 +121,7 @@ const StyledLoader = styled.div`
}
.padding-right {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 8px;
@@ -135,18 +135,13 @@ const StyledLoader = styled.div`
height: 32px;
}
- @media (min-width: 600px) {
+ @media ${mobileMore} {
${tabletStyles}
}
- ${isTablet &&
- `
- ${tabletStyles}
- `}
-
- @media (min-width: 1024px) {
+ @media ${desktop} {
.save-cancel-buttons {
- width: ${props => (props.welcomePage ? "264px" : "192px")};
+ width: ${(props) => (props.welcomePage ? "264px" : "192px")};
}
}
`;
@@ -193,7 +188,8 @@ const LoaderCustomization = ({
portalRenaming={portalRenaming}
welcomePage={welcomePage}
dnsSettings={dnsSettings}
- className="category-item-wrapper">
+ className="category-item-wrapper"
+ >
{
<>
{folderList.id && (
{
id={id ? id : folderList.id}
withoutInitPath={withoutInitPath}
isError={isError}
- isDisabled={
- isLoading ||
- accounts.length === 0 ||
- folderList.length === 0 ||
- isDisabled
- }
+ isDisabled={isDisabledSelector}
isThirdParty
/>
)}
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js
index 72c4a8b99d..cadfe95d69 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/index.js
@@ -10,6 +10,7 @@ import { inject, observer } from "mobx-react";
import AutoBackup from "./auto-backup";
import ManualBackup from "./manual-backup";
import config from "PACKAGE_FILE";
+import { DeviceType } from "@docspace/common/constants";
const Backup = ({
automaticBackupUrl,
@@ -90,10 +91,11 @@ export default inject(({ auth }) => {
const { settingsStore, currentTariffStatusStore } = auth;
const { isNotPaidPeriod } = currentTariffStatusStore;
- const { automaticBackupUrl, isTabletView, currentColorScheme } =
+ const { automaticBackupUrl, currentDeviceType, currentColorScheme } =
settingsStore;
- const buttonSize = isTabletView ? "normal" : "small";
+ const buttonSize =
+ currentDeviceType === DeviceType.desktop ? "small" : "normal";
return {
automaticBackupUrl,
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js
index cd2ecf80ee..7382e7add0 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/index.js
@@ -9,7 +9,7 @@ import {
import RestoreBackupLoader from "@docspace/common/components/Loaders/RestoreBackupLoader";
import toastr from "@docspace/components/toast/toastr";
import RadioButtonGroup from "@docspace/components/radio-button-group";
-import { BackupStorageType } from "@docspace/common/constants";
+import { BackupStorageType, DeviceType } from "@docspace/common/constants";
import Checkbox from "@docspace/components/checkbox";
import Text from "@docspace/components/text";
@@ -268,7 +268,7 @@ const RestoreBackup = (props) => {
export default inject(({ auth, backup }) => {
const { settingsStore, currentQuotaStore } = auth;
- const { isTabletView, standalone } = settingsStore;
+ const { currentDeviceType, standalone } = settingsStore;
const { isRestoreAndAutoBackupAvailable } = currentQuotaStore;
const {
getProgress,
@@ -279,7 +279,8 @@ export default inject(({ auth, backup }) => {
setRestoreResource,
} = backup;
- const buttonSize = isTabletView ? "normal" : "small";
+ const buttonSize =
+ currentDeviceType !== DeviceType.desktop ? "normal" : "small";
return {
standalone,
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js
index 8ef7a513a8..fa16db5a15 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/RoomsModule.js
@@ -17,6 +17,7 @@ const RoomsModule = (props) => {
return (
{
return (
);
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/index.js
index 3f4556b91f..2edcc3516c 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/index.js
@@ -16,6 +16,7 @@ import AppLoader from "@docspace/common/components/AppLoader";
import config from "../../../../../package.json";
import ManualBackup from "./backup/manual-backup";
import AutoBackup from "./backup/auto-backup";
+import { DeviceType } from "@docspace/common/constants";
const DataManagementWrapper = (props) => {
const { dataBackupUrl, automaticBackupUrl, buttonSize, t, isNotPaidPeriod } =
@@ -46,7 +47,7 @@ const DataManagementWrapper = (props) => {
{helpInfo}
-
+
+
{children}
);
@@ -66,9 +61,7 @@ const DetailsBar = ({ eventDetails }) => {
const formatDate = (date) => {
return (
- moment(date).locale(i18n.language).format("MMM D, YYYY, h:mm:ss A") +
- " " +
- t("Common:UTC")
+ moment(date).locale(i18n.language).format("MMM D, YYYY, h:mm:ss A") + " " + t("Common:UTC")
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js
index 4ff68e8da2..1a404deba0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js
@@ -13,7 +13,7 @@ import RetryIcon from "PUBLIC_DIR/images/refresh.react.svg?url";
import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button";
-import { tablet } from "@docspace/components/utils/device";
+import { tablet, mobile } from "@docspace/components/utils/device";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
@@ -39,14 +39,21 @@ const HeaderContainer = styled.div`
}
svg {
- ${({ theme }) =>
- theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
+ ${({ theme }) => theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
}
}
.headline {
font-size: 18px;
margin-inline-end: 16px;
+
+ @media ${tablet} {
+ font-size: 21px;
+ }
+
+ @media ${mobile} {
+ font-size: 18px;
+ }
}
`;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/MessagesDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/MessagesDetails.js
index 302b4bac66..10e010c933 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/MessagesDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/MessagesDetails.js
@@ -5,14 +5,14 @@ import Submenu from "@docspace/components/submenu";
import RequestDetails from "./RequestDetails";
import ResponseDetails from "./ResponseDetails";
import { useTranslation } from "react-i18next";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
import { inject, observer } from "mobx-react";
const SubmenuWrapper = styled.div`
.sticky {
z-index: 3;
- top: ${() => (isMobileOnly ? "68px" : "0px")};
+ top: ${isMobile() ? "68px" : "0px"};
}
`;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
index a1f4a74752..e5bf3c35c2 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/ResponseDetails.js
@@ -6,7 +6,7 @@ import Text from "@docspace/components/text";
import { inject, observer } from "mobx-react";
import json_beautifier from "csvjson-json_beautifier";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
import { useTranslation } from "react-i18next";
const DetailsWrapper = styled.div`
@@ -45,7 +45,7 @@ const LargePayloadStub = styled.div`
border: 1px solid #eceef1;
border-radius: 3px;
- ${isMobileOnly &&
+ ${isMobile() &&
css`
justify-content: flex-start;
flex-wrap: wrap;
@@ -79,9 +79,7 @@ const ResponseDetails = ({ eventDetails }) => {
const openRawPayload = () => {
const rawPayload = window.open("");
isJSON(responsePayload)
- ? rawPayload.document.write(
- beautifiedJSON.replace(/(?:\r\n|\r|\n)/g, "
{t("ResponsePostBody")}
@@ -121,7 +115,7 @@ const ResponseDetails = ({ eventDetails }) => {
size="small"
onClick={openRawPayload}
label={t("ViewRawPayload")}
- scale={isMobileOnly}
+ scale={isMobile()}
/>
) : responsePayload === "" ? (
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
index 1585c06aa6..6b086333dd 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
@@ -10,7 +10,7 @@ import TimePicker from "@docspace/components/time-picker";
import SelectorAddButton from "@docspace/components/selector-add-button";
import SelectedItem from "@docspace/components/selected-item";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
const Selectors = styled.div`
position: relative;
@@ -112,7 +112,7 @@ const DeliveryDatePicker = ({
selectedDate={filters.deliveryDate}
setSelectedDate={onDateSet}
onChange={closeCalendar}
- isMobile={isMobileOnly}
+ isMobile={isMobile()}
forwardedRef={calendarRef}
locale={i18n.language}
/>
@@ -176,6 +176,7 @@ const DeliveryDatePicker = ({
) : (
+ className="mr-8">
{t("From")}
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
@@ -40,7 +46,7 @@ const Footer = styled.div`
const Separator = styled.hr`
border-top: 1px solid;
- border-color: ${props => (props.theme.isBase ? "#eceef1" : "#474747")};
+ border-color: ${(props) => (props.theme.isBase ? "#eceef1" : "#474747")};
margin-bottom: 14px;
`;
@@ -48,10 +54,7 @@ Separator.defaultProps = { theme: Base };
const constructUrl = (baseUrl, filters) => {
const url = new URL(baseUrl, "http://127.0.0.1:8092/");
- url.searchParams.append(
- "deliveryDate",
- filters.deliveryDate?.format("YYYY-MM-DD") || null
- );
+ url.searchParams.append("deliveryDate", filters.deliveryDate?.format("YYYY-MM-DD") || null);
url.searchParams.append("deliveryFrom", filters.deliveryFrom.format("HH:mm"));
url.searchParams.append("deliveryTo", filters.deliveryTo.format("HH:mm"));
url.searchParams.append("status", JSON.stringify(filters.status));
@@ -60,21 +63,12 @@ const constructUrl = (baseUrl, filters) => {
};
function areArraysEqual(array1, array2) {
- return (
- array1.length === array2.length &&
- array1.every((val, index) => val === array2[index])
- );
+ return array1.length === array2.length && array1.every((val, index) => val === array2[index]);
}
-const FilterDialog = props => {
- const {
- visible,
- closeModal,
- applyFilters,
- formatFilters,
- setHistoryFilters,
- historyFilters,
- } = props;
+const FilterDialog = (props) => {
+ const { visible, closeModal, applyFilters, formatFilters, setHistoryFilters, historyFilters } =
+ props;
const { t } = useTranslation(["Webhooks", "Files", "Common"]);
const { id } = useParams();
const navigate = useNavigate();
@@ -116,12 +110,7 @@ const FilterDialog = props => {
} else {
setFilters(historyFilters);
setIsApplied(true);
- navigate(
- constructUrl(
- `/portal-settings/developer-tools/webhooks/${id}`,
- historyFilters
- )
- );
+ navigate(constructUrl(`/portal-settings/developer-tools/webhooks/${id}`, historyFilters));
}
setIsLoaded(true);
}, [historyFilters, visible]);
@@ -135,11 +124,7 @@ const FilterDialog = props => {
: filters.deliveryDate === null && filters.status.length === 0;
return (
-
+
{t("Files:Filter")}
@@ -173,7 +158,7 @@ const FilterDialog = props => {
)}
-
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
index 9c15444168..c4249c8d6d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryFilterHeader.js
@@ -12,7 +12,7 @@ import FilterDialog from "./FilterDialog";
import StatusBar from "./StatusBar";
import { useTranslation } from "react-i18next";
-import { isMobile, isMobileOnly } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
const ListHeader = styled.header`
display: flex;
@@ -20,15 +20,9 @@ const ListHeader = styled.header`
align-items: center;
${() =>
- isMobile &&
+ isMobile() &&
css`
- margin-top: 9px;
- `}
- ${() =>
- isMobileOnly &&
- css`
- margin-top: 35px;
- padding-inline-end: 8px;
+ margin-top: 8px;
`}
`;
@@ -54,8 +48,7 @@ const FilterButton = styled.div`
z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)};
border: 1px solid;
- border-color: ${(props) =>
- props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)"};
+ border-color: ${(props) => (props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)")};
border-radius: 3px;
cursor: pointer;
@@ -111,8 +104,7 @@ const HistoryFilterHeader = (props) => {
+ isGroupMenuVisible={isGroupMenuVisible}>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
index afe7481775..6b56025c0d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js
@@ -10,10 +10,9 @@ import Headline from "@docspace/common/components/Headline";
import IconButton from "@docspace/components/icon-button";
// import { Hint } from "../../styled-components";
-import { tablet } from "@docspace/components/utils/device";
+import { tablet, mobile, isTablet, isMobile } from "@docspace/components/utils/device";
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
-import { isMobile, isMobileOnly } from "react-device-detect";
import DropDownItem from "@docspace/components/drop-down-item";
import toastr from "@docspace/components/toast/toastr";
@@ -22,6 +21,8 @@ import { useParams } from "react-router-dom";
import FloatingButton from "@docspace/components/floating-button";
+import Base from "@docspace/components/themes/base";
+
const HeaderContainer = styled.div`
position: sticky;
top: 0;
@@ -30,24 +31,20 @@ const HeaderContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
- min-height: 70px;
+ min-height: 53px;
flex-wrap: wrap;
- ${() =>
- isMobile &&
- css`
- margin-bottom: 11px;
- `}
+ @media ${tablet} {
+ margin-bottom: 11px;
+ }
- ${() =>
- isMobileOnly &&
- css`
- margin-top: 7px;
- margin-left: -14px;
- padding-left: 14px;
- margin-right: -14px;
- padding-right: 14px;
- `}
+ @media ${mobile} {
+ margin-top: 7px;
+ margin-left: -14px;
+ padding-left: 14px;
+ margin-right: -14px;
+ padding-right: 14px;
+ }
.arrow-button {
margin-inline-end: 18.5px;
@@ -58,21 +55,25 @@ const HeaderContainer = styled.div`
margin-inline-start: -8px;
}
- ${() =>
- isMobileOnly &&
- css`
- margin-inline-end: 13px;
- `}
+ @media ${mobile} {
+ margin-inline-end: 13px;
+ }
svg {
- ${({ theme }) =>
- theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
+ ${({ theme }) => theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
}
}
.headline {
font-size: 18px;
margin-inline-end: 16px;
+
+ @media ${tablet} {
+ font-size: 21px;
+ }
+ @media ${mobile} {
+ font-size: 18px;
+ }
}
.table-container_group-menu {
@@ -89,31 +90,31 @@ const HeaderContainer = styled.div`
.combo-button_selected-icon {
svg {
path {
- fill: ${(props) => (props.isDisabled ? "#d0d5da" : "#333")};
+ fill: ${(props) => (props.isDisabled ? "#d0d5da" : props.theme.color)};
}
}
}
- ${() =>
- isMobile &&
- css`
- height: 60px;
- margin-block: 0;
- margin-inline: -16px 0;
- width: calc(100% + 32px);
- `}
- ${() =>
- isMobileOnly &&
- css`
- position: absolute;
- height: 48px;
- margin-block: -35px 0;
- margin-inline: -17px 0;
- width: calc(100% + 32px);
- `}
+ @media ${tablet} {
+ height: 60px;
+ margin-block: 0;
+ margin-inline: -16px 0;
+ width: calc(100% + 32px);
+ top: 5px;
+ }
+ @media ${mobile} {
+ position: absolute;
+ height: 48px;
+ margin-block: -17px 0;
+ margin-inline: -17px 0;
+ width: 100%;
+ top: 10px;
+ }
}
`;
+HeaderContainer.defaultProps = { theme: Base };
+
const HistoryHeader = (props) => {
const {
isGroupMenuVisible,
@@ -161,7 +162,7 @@ const HistoryHeader = (props) => {
});
toastr.success(
`${t("WebhookRedilivered")}: ${checkedEventIds.length}`,
- {t("Common:Done")}
+ {t("Common:Done")} ,
);
} catch (error) {
console.log(error);
@@ -181,8 +182,7 @@ const HistoryHeader = (props) => {
},
];
- const onKeyPress = (e) =>
- (e.key === "Esc" || e.key === "Escape") && emptyCheckedIds();
+ const onKeyPress = (e) => (e.key === "Esc" || e.key === "Escape") && emptyCheckedIds();
useEffect(() => {
window.addEventListener("keyup", onKeyPress);
@@ -246,7 +246,7 @@ const HistoryHeader = (props) => {
return (
- {isMobileOnly ? (
+ {isMobile() ? (
<>
{isGroupMenuVisible &&
-
+
+
-
{item.id}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js
index 2b5fae2b63..0555efc606 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/index.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";
-import { isMobile } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
import TableContainer from "@docspace/components/table-container/TableContainer";
import TableBody from "@docspace/components/table-container/TableBody";
@@ -34,14 +34,12 @@ const TableWrapper = styled(TableContainer)`
.table-list-item {
cursor: pointer;
&:hover {
- background-color: ${(props) =>
- props.theme.isBase ? "#f3f4f4" : "#282828"};
+ background-color: ${(props) => (props.theme.isBase ? "#f3f4f4" : "#282828")};
}
}
.table-list-item:has(.selected-table-row) {
- background-color: ${(props) =>
- props.theme.isBase ? "#f3f4f4" : "#282828"};
+ background-color: ${(props) => (props.theme.isBase ? "#f3f4f4" : "#282828")};
}
`;
@@ -72,7 +70,7 @@ const HistoryTableView = (props) => {
useEffect(() => {
if (!sectionWidth) return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || isMobile()) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@@ -93,8 +91,7 @@ const HistoryTableView = (props) => {
style={{
gridTemplateColumns: "300px 100px 400px 24px",
}}
- useReactWindow
- >
+ useReactWindow>
{
filesLength={historyItems.length}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasMoreItems}
- itemCount={totalItems}
- >
+ itemCount={totalItems}>
{historyItems.map((item) => (
{
export default inject(({ setup, webhooksStore, auth }) => {
const { viewAs, setViewAs } = setup;
- const {
- historyItems,
- fetchMoreItems,
- hasMoreItems,
- totalItems,
- formatFilters,
- historyFilters,
- } = webhooksStore;
+ const { historyItems, fetchMoreItems, hasMoreItems, totalItems, formatFilters, historyFilters } =
+ webhooksStore;
const { id: userId } = auth.userStore.user;
return {
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js
index 4f173b4a67..948e64f9ac 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js
@@ -122,10 +122,7 @@ const Webhooks = (props) => {
)}
{!isWebhooksEmpty && (
- {
header={t("CreateWebhook")}
onSubmit={onCreateWebhook}
additionalId="create-webhook"
+ isSettingsModal={false}
/>
(props.backgroundColor ? props.backgroundColor : "#f8f7bf")};
color: ${(props) => (props.color ? props.color : "initial")};
border-radius: 6px;
- font-family: "Open Sans";
- font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@@ -21,6 +19,6 @@ export const Hint = styled.div`
position: absolute;
z-index: 2;
- width: 320px;
+ width: calc(100% - 32px);
`}
`;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js
index ecdf2d900b..0ec0c6424c 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/SecretKeyInput.js
@@ -31,7 +31,7 @@ const Header = styled.p`
margin-bottom: 5px;
img {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 4px;
@@ -48,7 +48,7 @@ const StyledInfoIcon = styled.img`
}
`;
-const SecretKeyInput = props => {
+const SecretKeyInput = (props) => {
const {
isResetVisible,
name,
@@ -68,10 +68,9 @@ const SecretKeyInput = props => {
const secretKeyInputRef = useRef(null);
- const toggleHint = () =>
- setIsHintVisible(prevIsHintVisible => !prevIsHintVisible);
+ const toggleHint = () => setIsHintVisible((prevIsHintVisible) => !prevIsHintVisible);
- const handleInputValidation = isValid => {
+ const handleInputValidation = (isValid) => {
setIsPasswordValid(isValid);
};
@@ -83,7 +82,7 @@ const SecretKeyInput = props => {
toggleHint();
};
- const handleOnChange = e => {
+ const handleOnChange = (e) => {
onChange({ target: { name, value: e.target.value } });
};
@@ -175,8 +174,8 @@ const SecretKeyInput = props => {
);
};
-export default inject(({ settingsStore, auth }) => {
- const { passwordSettings } = settingsStore;
+export default inject(({ auth }) => {
+ const { passwordSettings } = auth.settingsStore;
const { webhooksGuideUrl } = auth.settingsStore;
return {
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
index 561e3f27e1..7935a1fad0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/StatusBadge.js
@@ -41,6 +41,7 @@ const StatusBadge = (props) => {
color={badgeColorScheme.color}
label={status === 0 ? t("NotSent") : status.toString()}
fontSize="9px"
+ maxWidth="80px"
fontWeight={700}
noHover
/>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookDialog.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookDialog.js
index 7c42375a73..0a9b2e8ae5 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhookDialog.js
@@ -8,6 +8,12 @@ import { SSLVerification } from "./SSLVerification";
import SecretKeyInput from "./SecretKeyInput";
import { useTranslation } from "react-i18next";
+const ModalDialogContainer = styled(ModalDialog)`
+ .modal-body {
+ overflow-y: auto;
+ }
+`;
+
const StyledWebhookForm = styled.form`
margin-top: 7px;
@@ -24,7 +30,7 @@ const Footer = styled.div`
width: 100%;
}
button:first-of-type {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
@@ -44,17 +50,8 @@ function validateUrl(url) {
return true;
}
-
const WebhookDialog = (props) => {
- const {
- visible,
- onClose,
- header,
- isSettingsModal,
- onSubmit,
- webhook,
- additionalId,
- } = props;
+ const { visible, onClose, header, isSettingsModal, onSubmit, webhook, additionalId } = props;
const [isResetVisible, setIsResetVisible] = useState(isSettingsModal);
@@ -85,14 +82,14 @@ const WebhookDialog = (props) => {
isSettingsModal && setIsResetVisible(true);
};
- const onInputChange = e => {
+ const onInputChange = (e) => {
if (e.target.name) {
!isValid[e.target.name] &&
- setIsValid(prevIsValid => ({
+ setIsValid((prevIsValid) => ({
...prevIsValid,
[e.target.name]: true,
}));
- setWebhookInfo(prevWebhookInfo => ({
+ setWebhookInfo((prevWebhookInfo) => ({
...prevWebhookInfo,
[e.target.name]: e.target.value,
}));
@@ -112,7 +109,7 @@ const WebhookDialog = (props) => {
}
};
- const onFormSubmit = e => {
+ const onFormSubmit = (e) => {
e.preventDefault();
onSubmit(webhookInfo);
setWebhookInfo({
@@ -122,7 +119,7 @@ const WebhookDialog = (props) => {
secretKey: "",
enabled: true,
});
- setPasswordInputKey(prevKey => prevKey + 1);
+ setPasswordInputKey((prevKey) => prevKey + 1);
onModalClose();
};
@@ -144,11 +141,10 @@ const WebhookDialog = (props) => {
});
}, [webhook]);
- const onKeyPress = e =>
- (e.key === "Esc" || e.key === "Escape") && onModalClose();
+ const onKeyPress = (e) => (e.key === "Esc" || e.key === "Escape") && onModalClose();
return (
- {
hasError={!isValid.uri}
required
/>
- {
passwordInputKey={passwordInputKey}
additionalId={additionalId}
/>
+
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
index 151c579071..a4b7db119e 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
@@ -7,7 +7,7 @@ import ToggleButton from "@docspace/components/toggle-button";
import StatusBadge from "../../StatusBadge";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
const StyledRowContent = styled(RowContent)`
display: flex;
@@ -42,27 +42,18 @@ const FlexWrapper = styled.div`
display: flex;
`;
-export const WebhookRowContent = ({
- sectionWidth,
- webhook,
- isChecked,
- handleToggleEnabled,
-}) => {
+export const WebhookRowContent = ({ sectionWidth, webhook, isChecked, handleToggleEnabled }) => {
return (
-
+
{webhook.name}
- {!isMobileOnly && (
+ {!isMobile() && (
{webhook.uri}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/index.js
index 5a6d513baa..cf84215d60 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/index.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
import RowContainer from "@docspace/components/row-container";
@@ -18,7 +18,7 @@ const WebhooksRowView = (props) => {
useEffect(() => {
if (viewAs !== "table" && viewAs !== "row") return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || isMobile()) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js
index 6e102673de..83280f461c 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
+import { isMobile } from "@docspace/components/utils/device";
import styled from "styled-components";
@@ -55,7 +55,7 @@ const WebhooksTableView = (props) => {
useEffect(() => {
if (!sectionWidth) return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || isMobile()) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
index a8ef7850f5..962bf00c8a 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/index.js
@@ -18,21 +18,16 @@ import { isMobile, isMobileOnly } from "react-device-detect";
import AppLoader from "@docspace/common/components/AppLoader";
import SSOLoader from "./sub-components/ssoLoader";
import { WebhookConfigsLoader } from "./Webhooks/sub-components/Loaders";
+import { DeviceType } from "@docspace/common/constants";
const StyledSubmenu = styled(Submenu)`
.sticky {
- margin-top: ${() => (isMobile ? "0" : "4px")};
z-index: 201;
- ${() =>
- isMobileOnly &&
- css`
- top: 58px;
- `}
}
`;
const DeveloperToolsWrapper = (props) => {
- const { loadBaseInfo, enablePlugins } = props;
+ const { loadBaseInfo, currentDeviceType, enablePlugins } = props;
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
@@ -48,16 +43,6 @@ const DeveloperToolsWrapper = (props) => {
const sdkLabel = (
{t("JavascriptSdk")}
-
-
);
@@ -137,7 +122,18 @@ const DeveloperToolsWrapper = (props) => {
return (
/`;
@@ -22,6 +23,7 @@ const DocumentService = ({
changeDocumentServiceLocation,
currentColorScheme,
integrationSettingsUrl,
+ currentDeviceType,
}) => {
const { t, ready } = useTranslation(["Settings", "Common"]);
@@ -133,6 +135,9 @@ const DocumentService = ({
if (isLoading || !ready) return
@@ -242,7 +247,7 @@ const DocumentService = ({
onClick={onSubmit}
className="button"
primary
- size={"small"}
+ size={buttonSize}
label={t("Common:SaveButton")}
isDisabled={
isFormEmpty ||
@@ -256,8 +261,8 @@ const DocumentService = ({
);
};
-export default inject(({ setup }) => {
+export default inject(({ auth, setup }) => {
const {
integration,
setSMTPSettingsLoading,
@@ -218,6 +226,9 @@ export default inject(({ setup }) => {
} = setup;
const { smtpSettings } = integration;
const { settings, isLoading, isDefaultSettings } = smtpSettings;
+
+ const { currentDeviceType } = auth.settingsStore;
+
return {
isSMTPInitialSettings,
isDefaultSettings,
@@ -227,5 +238,6 @@ export default inject(({ setup }) => {
resetSMTPSettings,
isLoading,
setSMTPErrors,
+ currentDeviceType,
};
})(observer(ButtonContainer));
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js
index bf179fc083..52f3934843 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/ProviderMetadata.js
@@ -7,11 +7,7 @@ import { useTranslation } from "react-i18next";
import Text from "@docspace/components/text";
import Button from "@docspace/components/button";
-import {
- smallTablet,
- hugeMobile,
- size,
-} from "@docspace/components/utils/device";
+import { mobile, size } from "@docspace/components/utils/device";
import MetadataUrlField from "./sub-components/MetadataUrlField";
import { useIsMobileView } from "../../../utils/useIsMobileView";
@@ -21,7 +17,7 @@ const StyledWrapper = styled.div`
margin-top: 24px;
}
- @media ${smallTablet} {
+ @media ${mobile} {
.button-wrapper {
box-sizing: border-box;
position: absolute;
@@ -39,7 +35,7 @@ const StyledWrapper = styled.div`
}
}
- @media ${hugeMobile}{
+ @media ${mobile}{
.button-wrapper {
padding: 16px;
}
@@ -64,7 +60,7 @@ const ProviderMetadata = (props) => {
}, []);
const checkWidth = () => {
- window.innerWidth > size.smallTablet &&
+ window.innerWidth > size.mobile &&
location.pathname.includes("sp-metadata") &&
navigate("/portal-settings/integration/single-sign-on");
};
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SPSettings.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SPSettings.js
index 4f02bb80c1..496c872246 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SPSettings.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SPSettings.js
@@ -20,7 +20,7 @@ const SPSettings = () => {
}, []);
const checkWidth = () => {
- window.innerWidth > size.smallTablet &&
+ window.innerWidth > size.mobile &&
location.pathname.includes("sp-settings") &&
navigate("/portal-settings/integration/single-sign-on");
};
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SubmitButton.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SubmitButton.js
index 625c3d96ff..d5d5fd99cb 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SubmitButton.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/SubmitButton.js
@@ -1,5 +1,4 @@
import React from "react";
-import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
@@ -7,16 +6,6 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import ResetConfirmationModal from "./sub-components/ResetConfirmationModal";
-const StyledWrapper = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
-
- .save-button {
- margin-right: 8px;
- }
-`;
-
const SubmitResetButtons = (props) => {
const { t } = useTranslation(["SingleSignOn", "Settings", "Common"]);
const {
@@ -32,16 +21,16 @@ const SubmitResetButtons = (props) => {
} = props;
return (
-
+ <>
saveSsoSettings(t)}
onCancelClick={isSsoEnabled ? openResetModal : resetForm}
showReminder={true}
saveButtonLabel={t("Common:SaveButton")}
- cancelButtonLabel={t("Settings:RestoreDefaultButton")}
+ cancelButtonLabel={t("Common:Restore")}
displaySettings={true}
- hasScroll={false}
+ hasScroll={true}
isSaving={isSubmitLoading}
saveButtonDisabled={hasErrors || !hasChanges || isLoadingXml}
cancelEnable={!(isSubmitLoading || isLoadingXml)}
@@ -49,7 +38,7 @@ const SubmitResetButtons = (props) => {
additionalClassCancelButton="restore-button"
/>
{confirmationResetModal &&
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledInputWrapper.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledInputWrapper.js
index c0604a6004..ce8d2e98aa 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledInputWrapper.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledInputWrapper.js
@@ -1,11 +1,11 @@
import styled from "styled-components";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
const StyledInputWrapper = styled.div`
width: 100%;
max-width: ${(props) => props.maxWidth || "520px"};
- @media ${smallTablet} {
+ @media ${mobile} {
max-width: 100%;
}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledModalDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledModalDialog.js
index dc11acb10d..0980462ead 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledModalDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledModalDialog.js
@@ -1,7 +1,7 @@
import styled from "styled-components";
import ModalDialog from "@docspace/components/modal-dialog";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
const StyledModalDialog = styled(ModalDialog)`
.heading {
@@ -22,7 +22,7 @@ const StyledModalDialog = styled(ModalDialog)`
margin-bottom: 5px;
}
- @media ${smallTablet} {
+ @media ${mobile} {
width: 100% !important;
}
}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/MetadataUrlField.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/MetadataUrlField.js
index cf30c293cd..52b0fcc8b9 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/MetadataUrlField.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/MetadataUrlField.js
@@ -8,7 +8,7 @@ import copy from "copy-to-clipboard";
import { Text, HelpButton, InputBlock } from "@docspace/components";
import toastr from "@docspace/components/toast/toastr";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
const StyledWrapper = styled.div`
display: flex;
@@ -21,7 +21,7 @@ const StyledWrapper = styled.div`
width: 100%;
}
- @media ${smallTablet} {
+ @media ${mobile} {
max-width: 100%;
}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/UploadXML.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/UploadXML.js
index b52b89c645..ff6f64dd17 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/UploadXML.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/UploadXML.js
@@ -12,7 +12,7 @@ import Text from "@docspace/components/text";
import SsoTextInput from "./SsoTextInput";
import FileInput from "@docspace/components/file-input";
import { Base } from "@docspace/components/themes";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
const StyledWrapper = styled.div`
display: flex;
@@ -25,7 +25,7 @@ const StyledWrapper = styled.div`
flex-direction: row;
gap: 9px;
- @media ${smallTablet} {
+ @media ${mobile} {
width: 100%;
.upload-xml-input {
@@ -45,7 +45,7 @@ const StyledWrapper = styled.div`
position: static;
}
- @media ${smallTablet} {
+ @media ${mobile} {
width: 100%;
button {
@@ -60,7 +60,7 @@ const StyledWrapper = styled.div`
overflow: inherit;
}
- @media ${smallTablet} {
+ @media ${mobile} {
flex-direction: column;
gap: 8px;
}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
index b07d85443d..596ef571bf 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
@@ -15,11 +15,7 @@ import Link from "@docspace/components/link";
import Badge from "@docspace/components/badge";
import toastr from "@docspace/components/toast/toastr";
import Button from "@docspace/components/button";
-import {
- mobile,
- smallTablet,
- isSmallTablet,
-} from "@docspace/components/utils/device";
+import { mobile, isMobile } from "@docspace/components/utils/device";
import ConsumerItem from "./sub-components/consumerItem";
import ConsumerModalDialog from "./sub-components/consumerModalDialog";
@@ -38,10 +34,6 @@ const RootContainer = styled(Box)`
cursor: auto;
}
- @media ${mobile} {
- width: calc(100% - 8px);
- }
-
.consumers-list-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(293px, 1fr));
@@ -64,7 +56,7 @@ const RootContainer = styled(Box)`
gap: 24px;
align-items: center;
- @media ${smallTablet} {
+ @media ${mobile} {
flex-direction: column;
align-items: baseline;
}
@@ -221,7 +213,7 @@ class ThirdPartyServices extends React.Component {
size="normal"
minwidth="138px"
onClick={submitRequest}
- scale={isSmallTablet()}
+ scale={isMobile()}
/>
{!consumers.length ? (
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
index 73ef6816ae..d80deb651e 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
@@ -12,12 +12,12 @@ import Link from "@docspace/components/link";
import toastr from "@docspace/components/toast/toastr";
import ModalDialogContainer from "./modalDialogContainer";
import { showLoader, hideLoader } from "@docspace/common/utils";
-import { hugeMobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
import styled from "styled-components";
const StyledBox = styled(Box)`
padding: 20px 0 8px;
- @media ${hugeMobile} {
+ @media ${mobile} {
padding-top: 0;
}
`;
@@ -189,13 +189,8 @@ class ConsumerModalDialog extends React.Component {
);
render() {
- const {
- selectedConsumer,
- onModalClose,
- dialogVisible,
- isLoading,
- t,
- } = this.props;
+ const { selectedConsumer, onModalClose, dialogVisible, isLoading, t } =
+ this.props;
const {
state,
onChangeHandler,
@@ -210,6 +205,7 @@ class ConsumerModalDialog extends React.Component {
visible={dialogVisible}
onClose={onModalClose}
displayType="aside"
+ withBodyScroll
>
{selectedConsumer.title}
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js
index 88683b9040..4d739ae8fd 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/thirdPartyLoader.js
@@ -15,8 +15,12 @@ const ThirdPartyLoader = () => {
return (
- {rectangles.map((_) => (
-
);
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/index.js b/packages/client/src/pages/PortalSettings/categories/integration/index.js
index 65ae9d2ddf..ee9baa70e7 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/index.js
@@ -11,10 +11,17 @@ import ThirdParty from "./ThirdPartyServicesSettings";
import SMTPSettings from "./SMTPSettings";
import DocumentService from "./DocumentService";
+import { DeviceType } from "@docspace/common/constants";
const IntegrationWrapper = (props) => {
- const { t, tReady, enablePlugins, toDefault, isSSOAvailable, standalone } =
- props;
+ const {
+ t,
+ tReady,
+ currentDeviceType,
+ toDefault,
+ isSSOAvailable,
+ standalone,
+ } = props;
const navigate = useNavigate();
useEffect(() => {
@@ -71,20 +78,33 @@ const IntegrationWrapper = (props) => {
);
};
- return
{(context) => (
{isNotPaidPeriod
? expiredTitleSubscriptionWarning()
@@ -369,8 +366,6 @@ export default inject(({ auth, payments }) => {
const { isAlreadyPaid } = payments;
- const { user } = userStore;
-
return {
paymentDate,
isAlreadyPaid,
@@ -388,7 +383,7 @@ export default inject(({ auth, payments }) => {
startValue: planCost.value,
isNotPaidPeriod,
payerEmail: customerId,
- user,
+
isPaidPeriod,
currentTariffPlanTitle,
portalTariffStatus,
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js
index 0738b65e17..072e0799e8 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/SaaS/sub-components/TotalTariffContainer.js
@@ -3,13 +3,13 @@ import styled, { css } from "styled-components";
import { Trans } from "react-i18next";
import Text from "@docspace/components/text";
import { inject, observer } from "mobx-react";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
const StyledBody = styled.div`
max-width: 272px;
margin: 0 auto;
- @media ${smallTablet} {
+ @media ${mobile} {
max-width: 520px;
}
@@ -34,7 +34,7 @@ const StyledBody = styled.div`
.payment_price_month-text {
margin: auto 0;
margin-bottom: 9px;
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
@@ -45,7 +45,7 @@ const StyledBody = styled.div`
}
.payment_price_month-text,
.payment_price_price-text {
- ${props =>
+ ${(props) =>
props.isDisabled &&
css`
color: ${props.theme.client.settings.payment.priceContainer
@@ -77,7 +77,8 @@ const TotalTariffContainer = ({
fontSize={"14"}
textAlign="center"
fontWeight={600}
- className="total-tariff_description">
+ className="total-tariff_description"
+ >
{{ peopleNumber: maxAvailableManagersCount }}
@@ -92,7 +93,8 @@ const TotalTariffContainer = ({
textAlign={"center"}
fontWeight={600}
className="payment_price_price-text"
- noSelect>
+ noSelect
+ >
{{ currencySymbol }}
+ noSelect
+ >
{{ price: totalPrice }}
+ noSelect
+ >
/month
diff --git a/packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js b/packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js
index 3a5c286de8..c33030fd8a 100644
--- a/packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js
@@ -1,6 +1,6 @@
import styled from "styled-components";
-import { tablet, hugeMobile } from "@docspace/components/utils/device";
+import { tablet, mobile } from "@docspace/components/utils/device";
const StyledComponent = styled.div`
.payments_file-input {
@@ -19,7 +19,7 @@ const StyledButtonComponent = styled.div`
height: 40px;
}
- @media ${hugeMobile} {
+ @media ${mobile} {
width: 100%;
}
}
@@ -31,7 +31,7 @@ const StyledContactComponent = styled.div`
display: flex;
width: 100%;
p {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 4px;
@@ -70,9 +70,9 @@ const StyledTitleComponent = styled.div`
align-items: baseline;
.title {
line-height: 16px;
- ${props => props.limitedWidth && "max-width: 376px"};
+ ${(props) => props.limitedWidth && "max-width: 376px"};
span:first-child {
- ${props => props.isLicenseDateExpired && "margin-top: 5px"};
+ ${(props) => props.isLicenseDateExpired && "margin-top: 5px"};
}
}
}
@@ -80,12 +80,12 @@ const StyledTitleComponent = styled.div`
.payments_subscription-expired {
max-width: fit-content;
border: 1px solid
- ${props =>
+ ${(props) =>
props.theme.client.settings.payment[
props.isLicenseDateExpired ? "warningColor" : "color"
]};
border-radius: 3px;
- color: ${props =>
+ color: ${(props) =>
props.theme.client.settings.payment[
props.isLicenseDateExpired ? "warningColor" : "color"
]};
@@ -97,12 +97,12 @@ const StyledTitleComponent = styled.div`
const StyledBenefitsBody = styled.div`
margin: 20px 0;
border-radius: 12px;
- border: ${props => props.theme.client.settings.payment.border};
+ border: ${(props) => props.theme.client.settings.payment.border};
max-width: 660px;
padding: 23px;
- background: ${props =>
+ background: ${(props) =>
props.theme.client.settings.payment.backgroundBenefitsColor};
.benefits-title {
diff --git a/packages/client/src/pages/PortalSettings/categories/security/StyledSecurity.js b/packages/client/src/pages/PortalSettings/categories/security/StyledSecurity.js
index 5782894a5f..afbf9b4cb9 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/StyledSecurity.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/StyledSecurity.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
import ArrowRightIcon from "PUBLIC_DIR/images/arrow.right.react.svg";
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
import { Base } from "@docspace/components/themes";
-import { mobile, smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
export const StyledArrowRightIcon = styled(ArrowRightIcon)`
${commonIconsStyles}
@@ -84,7 +84,7 @@ export const LearnMoreWrapper = styled.div`
color: ${(props) => props.theme.client.settings.common.descriptionColor};
}
- @media (max-width: 600px) {
+ @media ${mobile} {
display: flex;
flex-direction: column;
margin-bottom: 20px;
@@ -149,7 +149,7 @@ export const StyledBruteForceProtection = styled.div`
text-decoration: underline;
}
- @media (max-width: 600px) {
+ @media ${mobile} {
padding-bottom: 20px;
}
}
diff --git a/packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js b/packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js
index 82ab18c787..663fd752a2 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/access-portal/adminMessage.js
@@ -12,8 +12,9 @@ import { size } from "@docspace/components/utils/device";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
import isEqual from "lodash/isEqual";
-import { isMobile } from "react-device-detect";
+
import AdmMsgLoader from "../sub-components/loaders/admmsg-loader";
+import { DeviceType } from "@docspace/common/constants";
const MainContainer = styled.div`
width: 100%;
@@ -37,6 +38,7 @@ const AdminMessage = (props) => {
isInit,
currentColorScheme,
administratorMessageSettingsUrl,
+ currentDeviceType,
} = props;
const [type, setType] = useState("");
const [showReminder, setShowReminder] = useState(false);
@@ -91,7 +93,7 @@ const AdminMessage = (props) => {
}, [type]);
const checkWidth = () => {
- window.innerWidth > size.smallTablet &&
+ window.innerWidth > size.mobile &&
location.pathname.includes("admin-message") &&
navigate("/portal-settings/security/access-portal");
};
@@ -118,7 +120,7 @@ const AdminMessage = (props) => {
setShowReminder(false);
};
- if (isMobile && !isInit && !isLoading) {
+ if (currentDeviceType !== DeviceType.desktop && !isInit && !isLoading) {
return {t("ErrorMessageBruteForceProtection")}
);
- if (isMobile && !isGetSettingsLoaded) return
@@ -326,6 +329,7 @@ export default inject(({ auth, setup }) => {
setBruteForceProtection,
getBruteForceProtection,
bruteForceProtectionUrl,
+ currentDeviceType,
} = auth.settingsStore;
const { initSettings, isInit } = setup;
@@ -339,5 +343,6 @@ export default inject(({ auth, setup }) => {
initSettings,
isInit,
bruteForceProtectionUrl,
+ currentDeviceType,
};
})(withTranslation(["Settings", "Common"])(observer(BruteForceProtection)));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js b/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js
index 14838dac97..67eb6ae19d 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js
@@ -37,7 +37,7 @@ const AccessPortal = (props) => {
}, []);
const checkWidth = () => {
- window.innerWidth <= size.smallTablet
+ window.innerWidth <= size.mobile
? setIsMobileView(true)
: setIsMobileView(false);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js b/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
index ac5f786602..728202a96e 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/access-portal/ipSecurity.js
@@ -13,8 +13,9 @@ import { size } from "@docspace/components/utils/device";
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
import isEqual from "lodash/isEqual";
import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
-import { isMobile } from "react-device-detect";
+
import IpSecurityLoader from "../sub-components/loaders/ip-security-loader";
+import { DeviceType } from "@docspace/common/constants";
const MainContainer = styled.div`
width: 100%;
@@ -55,6 +56,7 @@ const IpSecurity = (props) => {
isInit,
ipSettingsUrl,
currentColorScheme,
+ currentDeviceType,
} = props;
const navigate = useNavigate();
@@ -118,7 +120,7 @@ const IpSecurity = (props) => {
}, [enable, ips]);
const checkWidth = () => {
- window.innerWidth > size.smallTablet &&
+ window.innerWidth > size.mobile &&
location.pathname.includes("ip") &&
navigate("/portal-settings/security/access-portal");
};
@@ -163,7 +165,7 @@ const IpSecurity = (props) => {
saveToSessionStorage("defaultIPSettings", {
enable: enable,
- ips: ipsObjectArr,
+ ips: ips,
});
setShowReminder(false);
toastr.success(t("SuccessfullySaveSettingsMessage"));
@@ -181,7 +183,7 @@ const IpSecurity = (props) => {
setShowReminder(false);
};
- if (isMobile && !isInit && !isLoading) {
+ if (currentDeviceType !== DeviceType.desktop && !isInit && !isLoading) {
return
+ isSettingNotPaid={isSettingNotPaid}
+ >
{item.user}
@@ -38,16 +39,28 @@ export const AuditContent = ({ sectionWidth, item, isSettingNotPaid }) => {
fontSize="12px"
fontWeight={600}
truncate={true}
- className="settings_unavailable">
+ className="settings_unavailable"
+ >
{dateStr}
+ className="settings_unavailable"
+ >
{`${item.context ? item.context + " |" : ""} ${item.action}`}
);
};
+
+export default inject(({ auth }) => {
+ const { culture } = auth.settingsStore;
+ const { user } = auth.userStore;
+ const locale = (user && user.cultureName) || culture || "en";
+
+ return {
+ locale,
+ };
+})(observer(AuditContent));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditRowContainer.js b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditRowContainer.js
index ab61f83633..d0afe1ba3d 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditRowContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditRowContainer.js
@@ -1,8 +1,9 @@
import React, { useEffect } from "react";
import { inject, observer } from "mobx-react";
import RowContainer from "@docspace/components/row-container";
-import { isMobile } from "react-device-detect";
+
import { AuditUserRow } from "./AuditUserRow";
+import { DeviceType } from "@docspace/common/constants";
const AuditRowContainer = ({
viewAs,
@@ -11,11 +12,12 @@ const AuditRowContainer = ({
theme,
sectionWidth,
isAuditAvailable,
+ currentDeviceType,
}) => {
useEffect(() => {
if (viewAs !== "table" && viewAs !== "row") return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || currentDeviceType !== DeviceType.desktop) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@@ -39,12 +41,13 @@ const AuditRowContainer = ({
export default inject(({ setup, auth }) => {
const { viewAs, setViewAs, security } = setup;
- const { theme } = auth.settingsStore;
+ const { theme, currentDeviceType } = auth.settingsStore;
return {
viewAs,
setViewAs,
auditTrailUsers: security.auditTrail.users,
theme,
+ currentDeviceType,
};
})(observer(AuditRowContainer));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditUserRow.js b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditUserRow.js
index 7b13471a99..0029b13307 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditUserRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditUserRow.js
@@ -1,6 +1,6 @@
import React from "react";
import Row from "@docspace/components/row";
-import { AuditContent } from "./AuditContent";
+import AuditContent from "./AuditContent";
export const AuditUserRow = ({ item, sectionWidth, isSettingNotPaid }) => {
return (
diff --git a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js
index 6cff96a4c2..ea36733c97 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js
@@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
import TableBody from "@docspace/components/table-container/TableBody";
-import { isMobile } from "react-device-detect";
+import { DeviceType } from "@docspace/common/constants";
const Table = ({
auditTrailUsers,
@@ -13,11 +13,12 @@ const Table = ({
setViewAs,
theme,
isSettingNotPaid,
+ currentDeviceType,
}) => {
const ref = useRef(null);
useEffect(() => {
if (!sectionWidth) return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || currentDeviceType !== DeviceType.desktop) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
@@ -45,12 +46,13 @@ const Table = ({
export default inject(({ auth, setup }) => {
const { security, viewAs, setViewAs } = setup;
- const { theme } = auth.settingsStore;
+ const { theme, currentDeviceType } = auth.settingsStore;
return {
auditTrailUsers: security.auditTrail.users,
theme,
viewAs,
setViewAs,
+ currentDeviceType,
};
})(observer(Table));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js
index 34b10dfebb..86eea86a59 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js
@@ -1,9 +1,12 @@
import React from "react";
+import { inject, observer } from "mobx-react";
+import styled from "styled-components";
+
import TableRow from "@docspace/components/table-container/TableRow";
import TableCell from "@docspace/components/table-container/TableCell";
import Text from "@docspace/components/text";
-import styled from "styled-components";
-import moment from "moment";
+import { convertTime } from "@docspace/common/utils/convertTime";
+
import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";
const StyledPeopleRow = styled(TableRow)`
@@ -33,13 +36,9 @@ const StyledPeopleRow = styled(TableRow)`
`;
const PeopleTableRow = (props) => {
- const { item, contextOptionsProps, isSettingNotPaid } = props;
+ const { item, contextOptionsProps, isSettingNotPaid, locale } = props;
const { email, position } = item;
-
- const DATE_FORMAT = "YYYY-MM-DD LT";
- const to = moment(item.date).local();
-
- const dateStr = to.format(DATE_FORMAT);
+ const dateStr = convertTime(item.date, locale);
return (
{
);
};
-export default PeopleTableRow;
+export default inject(({ auth }) => {
+ const { culture } = auth.settingsStore;
+ const { user } = auth.userStore;
+ const locale = (user && user.cultureName) || culture || "en";
+
+ return {
+ locale,
+ };
+})(observer(PeopleTableRow));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/index.js b/packages/client/src/pages/PortalSettings/categories/security/index.js
index 50300a9a6d..2bb56c5d1c 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/index.js
@@ -13,11 +13,10 @@ import MobileSecurityLoader from "./sub-components/loaders/mobile-security-loade
import AccessLoader from "./sub-components/loaders/access-loader";
import AuditTrail from "./audit-trail/index.js";
import { resetSessionStorage } from "../../utils";
-
-import { isMobile } from "react-device-detect";
+import { DeviceType } from "@docspace/common/constants/index.js";
const SecurityWrapper = (props) => {
- const { t, loadBaseInfo, resetIsInit } = props;
+ const { t, loadBaseInfo, resetIsInit, currentDeviceType } = props;
const [currentTab, setCurrentTab] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
@@ -72,7 +71,7 @@ const SecurityWrapper = (props) => {
if (!isLoading)
return currentTab === 0 ? (
- isMobile ? (
+ currentDeviceType !== DeviceType.desktop ? (
{
);
};
+
+export default inject(({ auth }) => {
+ const { culture } = auth.settingsStore;
+ const { user } = auth.userStore;
+ const locale = (user && user.cultureName) || culture || "en";
+
+ return {
+ locale,
+ };
+})(observer(HistoryContent));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryRowContainer.js b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryRowContainer.js
index b08da20f44..e56f1171b0 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryRowContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryRowContainer.js
@@ -1,8 +1,9 @@
import React, { useEffect } from "react";
import { inject, observer } from "mobx-react";
import RowContainer from "@docspace/components/row-container";
-import { isMobile } from "react-device-detect";
+
import { HistoryUserRow } from "./HistoryUserRow";
+import { DeviceType } from "@docspace/common/constants";
const HistoryRowContainer = ({
viewAs,
@@ -10,16 +11,17 @@ const HistoryRowContainer = ({
historyUsers,
theme,
sectionWidth,
+ currentDeviceType,
}) => {
useEffect(() => {
if (viewAs !== "table" && viewAs !== "row") return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || currentDeviceType !== DeviceType.desktop) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
}
- }, [sectionWidth]);
+ }, [sectionWidth, currentDeviceType]);
return (
@@ -37,12 +39,13 @@ const HistoryRowContainer = ({
export default inject(({ setup, auth }) => {
const { viewAs, setViewAs, security } = setup;
- const { theme } = auth.settingsStore;
+ const { theme, currentDeviceType } = auth.settingsStore;
return {
viewAs,
setViewAs,
historyUsers: security.loginHistory.users,
theme,
+ currentDeviceType,
};
})(observer(HistoryRowContainer));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryUserRow.js b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryUserRow.js
index 4d1c953d2e..c418177766 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryUserRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/login-history/RowView/HistoryUserRow.js
@@ -1,6 +1,6 @@
import React from "react";
import Row from "@docspace/components/row";
-import { HistoryContent } from "./HistoryContent";
+import HistoryContent from "./HistoryContent";
export const HistoryUserRow = ({ item, sectionWidth }) => {
return (
diff --git a/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableContainer.js b/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableContainer.js
index 2644b86c00..8a398bb835 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableContainer.js
@@ -4,19 +4,27 @@ import { inject, observer } from "mobx-react";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
import TableBody from "@docspace/components/table-container/TableBody";
-import { isMobile } from "react-device-detect";
-const Table = ({ historyUsers, sectionWidth, viewAs, setViewAs, theme }) => {
+import { DeviceType } from "@docspace/common/constants";
+
+const Table = ({
+ historyUsers,
+ sectionWidth,
+ viewAs,
+ setViewAs,
+ theme,
+ currentDeviceType,
+}) => {
const ref = useRef(null);
useEffect(() => {
if (!sectionWidth) return;
- if (sectionWidth < 1025 || isMobile) {
+ if (sectionWidth < 1025 || currentDeviceType !== DeviceType.desktop) {
viewAs !== "row" && setViewAs("row");
} else {
viewAs !== "table" && setViewAs("table");
}
- }, [sectionWidth]);
+ }, [sectionWidth, currentDeviceType]);
return historyUsers && historyUsers.length > 0 ? (
@@ -34,12 +42,13 @@ const Table = ({ historyUsers, sectionWidth, viewAs, setViewAs, theme }) => {
export default inject(({ auth, setup }) => {
const { security, viewAs, setViewAs } = setup;
- const { theme } = auth.settingsStore;
+ const { theme, currentDeviceType } = auth.settingsStore;
return {
historyUsers: security.loginHistory.users,
theme,
viewAs,
setViewAs,
+ currentDeviceType,
};
})(observer(Table));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableRow.js b/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableRow.js
index 55b0e72dbb..5b3d6e7684 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/login-history/TableView/TableRow.js
@@ -1,9 +1,11 @@
import React from "react";
+import { inject, observer } from "mobx-react";
+import styled from "styled-components";
+
import TableRow from "@docspace/components/table-container/TableRow";
import TableCell from "@docspace/components/table-container/TableCell";
import Text from "@docspace/components/text";
-import styled from "styled-components";
-import moment from "moment";
+import { convertTime } from "@docspace/common/utils/convertTime";
const StyledPeopleRow = styled(TableRow)`
.table-container_cell {
@@ -31,13 +33,9 @@ const StyledPeopleRow = styled(TableRow)`
`;
const PeopleTableRow = (props) => {
- const { item, contextOptionsProps, onEmailClick } = props;
+ const { item, contextOptionsProps, onEmailClick, locale } = props;
const { email, position } = item;
-
- const DATE_FORMAT = "YYYY-MM-DD LT";
- const to = moment(item.date).local();
-
- const dateStr = to.format(DATE_FORMAT);
+ const dateStr = convertTime(item.date, locale);
return (
@@ -80,4 +78,12 @@ const PeopleTableRow = (props) => {
);
};
-export default PeopleTableRow;
+export default inject(({ auth }) => {
+ const { culture } = auth.settingsStore;
+ const { user } = auth.userStore;
+ const locale = (user && user.cultureName) || culture || "en";
+
+ return {
+ locale,
+ };
+})(observer(PeopleTableRow));
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
index 6b3ffa94f8..c04fa722e0 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
@@ -7,7 +7,7 @@ import styled from "styled-components";
import Button from "@docspace/components/button";
import toastr from "@docspace/components/toast/toastr";
import { UnavailableStyles } from "../../../utils/commonSettingsStyles";
-import { hugeMobile, tablet } from "@docspace/components/utils/device";
+import { mobile, tablet } from "@docspace/components/utils/device";
import Badge from "@docspace/components/badge";
const StyledTextInput = styled(TextInput)`
@@ -15,7 +15,7 @@ const StyledTextInput = styled(TextInput)`
margin-bottom: 24px;
width: 350px;
- @media ${hugeMobile} {
+ @media ${mobile} {
width: 100%;
}
`;
@@ -38,6 +38,10 @@ const MainContainer = styled.div`
.save-cancel {
padding: 0;
position: static;
+
+ .buttons-flex {
+ padding: 0;
+ }
}
.login-subheader {
@@ -47,7 +51,7 @@ const MainContainer = styled.div`
.latest-text {
font-size: 13px;
- padding: 20px 0;
+ padding: 24px 0;
}
.storage-label {
@@ -90,7 +94,7 @@ const DownLoadWrapper = styled.div`
padding-bottom: 11px;
}
- @media ${hugeMobile} {
+ @media ${mobile} {
width: 100%;
}
}
@@ -109,7 +113,7 @@ const DownLoadWrapper = styled.div`
.downloadReportDescriptionColor};
}
- @media ${hugeMobile} {
+ @media ${mobile} {
flex-direction: column-reverse;
}
`;
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/access-loader.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/access-loader.js
index 220644bbae..dadf6f95b1 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/access-loader.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/access-loader.js
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import Loaders from "@docspace/common/components/Loaders";
-import { tablet } from "@docspace/components/utils/device";
+import { tablet, mobile } from "@docspace/components/utils/device";
const StyledLoader = styled.div`
.header {
@@ -9,12 +9,12 @@ const StyledLoader = styled.div`
height: 29px;
margin-bottom: 14px;
- @media (${tablet}) {
+ @media ${tablet} {
width: 184px;
height: 37px;
}
- @media (max-width: 428px) {
+ @media ${mobile} {
width: 273px;
height: 37px;
margin-bottom: 18px;
@@ -34,13 +34,13 @@ const StyledLoader = styled.div`
gap: 20px;
margin-bottom: 40px;
- @media (max-width: 428px) {
+ @media ${mobile} {
width: 100%;
}
.header {
height: 40px;
- @media (${tablet}) {
+ @media ${tablet} {
height: 60px;
}
}
@@ -53,7 +53,7 @@ const StyledLoader = styled.div`
.description {
width: 700px;
- @media (${tablet}) {
+ @media ${tablet} {
width: 100%;
}
}
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/security-loader.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/security-loader.js
index fe3a3fba5a..98a1c47d38 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/security-loader.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/loaders/security-loader.js
@@ -10,7 +10,7 @@ const StyledLoader = styled.div`
height: 29px;
margin-bottom: 14px;
- @media (${tablet}) {
+ @media ${tablet} {
width: 184px;
height: 37px;
}
@@ -30,7 +30,7 @@ const StyledLoader = styled.div`
width: 591px;
margin-bottom: 20px;
- @media (${tablet}) {
+ @media ${tablet} {
width: 100%;
}
}
@@ -39,7 +39,7 @@ const StyledLoader = styled.div`
width: 192px;
height: 32px;
- @media (${tablet}) {
+ @media ${tablet} {
height: 40px;
}
}
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sub-components/user-fields.js b/packages/client/src/pages/PortalSettings/categories/security/sub-components/user-fields.js
index f4ad918080..3af9c81dac 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/user-fields.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/user-fields.js
@@ -6,6 +6,7 @@ import PlusIcon from "PUBLIC_DIR/images/plus.react.svg";
import Link from "@docspace/components/link";
import TextInput from "@docspace/components/text-input";
import { Base } from "@docspace/components/themes";
+import { mobile } from "@docspace/components/utils/device";
const StyledPlusIcon = styled(PlusIcon)`
${commonIconsStyles}
@@ -33,7 +34,7 @@ const StyledInputWrapper = styled.div`
margin-bottom: 8px;
width: 350px;
- @media (max-width: 375px) {
+ @media ${mobile} {
width: 100%;
}
`;
diff --git a/packages/client/src/pages/PortalSettings/utils/useIsMobileView.js b/packages/client/src/pages/PortalSettings/utils/useIsMobileView.js
index f2103e0ad1..a7eb7720e5 100644
--- a/packages/client/src/pages/PortalSettings/utils/useIsMobileView.js
+++ b/packages/client/src/pages/PortalSettings/utils/useIsMobileView.js
@@ -5,7 +5,7 @@ export const useIsMobileView = () => {
const [isMobileView, setIsMobileView] = useState(false);
const onCheckView = () => {
- window.innerWidth <= size.smallTablet
+ window.innerWidth <= size.mobile
? setIsMobileView(true)
: setIsMobileView(false);
};
diff --git a/packages/client/src/pages/PortalUnavailable/index.js b/packages/client/src/pages/PortalUnavailable/index.js
index bbaeacfa08..37e2117313 100644
--- a/packages/client/src/pages/PortalUnavailable/index.js
+++ b/packages/client/src/pages/PortalUnavailable/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import ErrorContainer from "@docspace/common/components/ErrorContainer";
import { useTranslation } from "react-i18next";
import Text from "@docspace/components/text";
@@ -8,6 +8,7 @@ import { ReactSVG } from "react-svg";
import Button from "@docspace/components/button";
import RecoverAccessModalDialog from "@docspace/common/components/Dialogs/RecoverAccessModalDialog";
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
+import { mobile } from "@docspace/components/utils/device";
const StyledBodyContent = styled.div`
max-width: 480px;
@@ -44,7 +45,7 @@ const StyledBody = styled.div`
.portal-unavailable_text {
color: ${(props) => props.theme.portalUnavailable.textDescription};
}
- @media (max-width: 768px) {
+ @media ${mobile} {
.portal-unavailable_svg {
margin-top: 0px;
background: ${(props) => props.theme.catalog.background};
@@ -59,7 +60,12 @@ const StyledBody = styled.div`
}
`;
-const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
+const PortalUnavailable = ({
+ theme,
+ logoUrl,
+ onLogoutClick,
+ setBodyRendered,
+}) => {
const { t, ready } = useTranslation([
"Errors",
"PortalUnavailable",
@@ -67,6 +73,12 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
]);
const [isVisible, setIsVisible] = useState();
+ useEffect(() => {
+ setBodyRendered(true);
+
+ return () => setBodyRendered(false);
+ }, []);
+
const onClick = () => {
onLogoutClick();
};
@@ -124,10 +136,6 @@ const PortalUnavailable = ({ theme, logoUrl, onLogoutClick }) => {
export default inject(({ auth, profileActionsStore }) => {
const { onLogoutClick } = profileActionsStore;
- const { theme, logoUrl } = auth.settingsStore;
- return {
- logoUrl,
- theme,
- onLogoutClick,
- };
+ const { theme, logoUrl, setBodyRendered } = auth.settingsStore;
+ return { setBodyRendered, logoUrl, theme, onLogoutClick };
})(observer(PortalUnavailable));
diff --git a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
index 1d09dad891..5fa013429c 100644
--- a/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
+++ b/packages/client/src/pages/PreparationPortal/StyledPreparationPortal.js
@@ -1,12 +1,11 @@
import styled from "styled-components";
-import { isMobile } from "react-device-detect";
+import { tablet } from "@docspace/components/utils/device";
const StyledPreparationPortal = styled.div`
width: 100%;
- ${isMobile &&
- `
+ @media ${tablet} {
margin-top: 48px;
- `}
+ }
#header {
font-size: 23px;
diff --git a/packages/client/src/pages/PreparationPortal/index.js b/packages/client/src/pages/PreparationPortal/index.js
index 53649ca7c8..c8ed309a7b 100644
--- a/packages/client/src/pages/PreparationPortal/index.js
+++ b/packages/client/src/pages/PreparationPortal/index.js
@@ -29,11 +29,18 @@ const PreparationPortal = (props) => {
withoutHeader,
style,
clearLocalStorage,
+ setBodyRendered,
} = props;
const [percent, setPercent] = useState(0);
const [errorMessage, setErrorMessage] = useState("");
+ useEffect(() => {
+ setBodyRendered(true);
+
+ return () => setBodyRendered(false);
+ });
+
const clearAllIntervals = () => {
clearInterval(timerId);
clearInterval(progressTimerId);
@@ -236,7 +243,7 @@ const PreparationPortal = (props) => {
);
};
-const PreparationPortalWrapper = inject(({ backup }) => {
+const PreparationPortalWrapper = inject(({ auth, backup }) => {
const { backupSize, clearLocalStorage } = backup;
const multiplicationFactor = backupSize
@@ -246,6 +253,7 @@ const PreparationPortalWrapper = inject(({ backup }) => {
return {
clearLocalStorage,
multiplicationFactor,
+ setBodyRendered: auth.settingsStore.setBodyRendered,
};
})(
withTranslation(["PreparationPortal", "Common"])(observer(PreparationPortal))
diff --git a/packages/client/src/pages/PrivateRoomsPage/i18n.js b/packages/client/src/pages/PrivateRoomsPage/i18n.js
index 69249a00ac..97873ac134 100644
--- a/packages/client/src/pages/PrivateRoomsPage/i18n.js
+++ b/packages/client/src/pages/PrivateRoomsPage/i18n.js
@@ -3,7 +3,7 @@ import { initReactI18next } from "react-i18next";
import Backend from "@docspace/common/utils/i18next-http-backend";
import { LANGUAGE } from "@docspace/common/constants";
import config from "PACKAGE_FILE";
-import { getCookie } from "@docspace/common/utils";
+import { getCookie } from "@docspace/components/utils/cookie";
import { loadLanguagePath } from "SRC_DIR/helpers/utils";
const newInstance = i18n.createInstance();
diff --git a/packages/client/src/pages/PrivateRoomsPage/index.js b/packages/client/src/pages/PrivateRoomsPage/index.js
index 57e9c04175..4e6e320e47 100644
--- a/packages/client/src/pages/PrivateRoomsPage/index.js
+++ b/packages/client/src/pages/PrivateRoomsPage/index.js
@@ -6,7 +6,7 @@ import Link from "@docspace/components/link";
import Button from "@docspace/components/button";
import Loader from "@docspace/components/loader";
import Section from "@docspace/common/components/Section";
-import { smallTablet, tablet } from "@docspace/components/utils/device";
+import { mobile, tablet } from "@docspace/components/utils/device";
import { I18nextProvider, Trans, withTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { isMobile } from "react-device-detect";
@@ -49,7 +49,7 @@ const StyledPrivacyPage = styled.div`
? `text-align: right;`
: `text-align: left;`}
- @media ${smallTablet} {
+ @media ${mobile} {
text-align: center;
}
}
@@ -58,7 +58,7 @@ const StyledPrivacyPage = styled.div`
display: flex;
flex-direction: row;
- @media ${smallTablet} {
+ @media ${mobile} {
flex-direction: column;
}
}
@@ -98,7 +98,7 @@ const StyledPrivacyPage = styled.div`
: `padding-left: 74px;`}
}
- @media ${smallTablet} {
+ @media ${mobile} {
padding: 0px;
text-align: center;
}
diff --git a/packages/client/src/pages/Profile/Section/Body/index.js b/packages/client/src/pages/Profile/Section/Body/index.js
index 4a8e2fb28c..dfe7936486 100644
--- a/packages/client/src/pages/Profile/Section/Body/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/index.js
@@ -14,7 +14,8 @@ import Notifications from "./sub-components/notifications";
import FileManagement from "./sub-components/file-management";
import InterfaceTheme from "./sub-components/interface-theme";
-import { tablet, hugeMobile } from "@docspace/components/utils/device";
+import { tablet } from "@docspace/components/utils/device";
+import { DeviceType } from "@docspace/common/constants";
const Wrapper = styled.div`
display: flex;
@@ -28,7 +29,7 @@ const Wrapper = styled.div`
`;
const SectionBodyContent = (props) => {
- const { isProfileLoaded, profile, t } = props;
+ const { showProfileLoader, profile, currentDeviceType, t } = props;
const navigate = useNavigate();
const data = [
@@ -71,22 +72,34 @@ const SectionBodyContent = (props) => {
navigate(`${path}/${e.id}`, { state: { disableScrollToTop: true } });
};
- if (!isProfileLoaded) return
);
};
-export default inject(({ peopleStore, clientLoadingStore }) => {
- const { isProfileLoaded } = clientLoadingStore;
+export default inject(({ auth, peopleStore, clientLoadingStore }) => {
+ const { showProfileLoader } = clientLoadingStore;
const { targetUser: profile } = peopleStore.targetUserStore;
return {
- isProfileLoaded,
profile,
+ currentDeviceType: auth.settingsStore.currentDeviceType,
+ showProfileLoader,
};
})(
observer(
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
index 560bf57378..898c3df50a 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js
@@ -5,7 +5,7 @@ import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import { ReactSVG } from "react-svg";
-import { isMobile } from "react-device-detect";
+import { isDesktop } from "@docspace/components/utils/device";
import Text from "@docspace/components/text";
import Link from "@docspace/components/link";
import Box from "@docspace/components/box";
@@ -111,7 +111,7 @@ const ActiveSessions = ({
return new Date(date).toLocaleString(locale);
};
const tableCell = (platform, browser) =>
- interfaceDirection === "rtl" && !isMobile ? (
+ interfaceDirection === "rtl" && isDesktop() ? (
<>
{browser}
@@ -156,7 +156,7 @@ const ActiveSessions = ({
}
/>
- {isMobile ? (
+ {!isDesktop() ? (
{sessions.map((session) => (
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js
index 556d5958a1..90468365e9 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/styled-active-sessions.js
@@ -1,5 +1,5 @@
import styled, { css } from "styled-components";
-import { hugeMobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
export const StyledFooter = styled.div`
.session-logout {
@@ -103,7 +103,7 @@ export const TableDataCell = styled.td`
}
}
- @media ${hugeMobile} {
+ @media ${mobile} {
.session-browser {
position: relative;
top: 4px;
@@ -137,17 +137,44 @@ export const TableDataCell = styled.td`
.session-date {
position: relative;
- margin-left: 0 !important;
- margin-right: 8px;
- :after {
- content: "";
- position: absolute;
- top: 4px;
- right: -8px;
- width: 1px;
- height: 12px;
- background: ${(props) => props.theme.activeSessions.sortHeaderColor};
- }
+
+ ${(props) =>
+ props.theme.interfaceDirection === "ltr"
+ ? css`
+ margin-right: 8px;
+ margin-left: 0 !important;
+ :after {
+ content: "";
+ position: absolute;
+ top: 4px;
+ right: -8px;
+ width: 1px;
+ height: 12px;
+ background: ${(props) =>
+ props.theme.activeSessions.sortHeaderColor};
+ }
+ `
+ : css`
+ margin-left: 8px;
+ margin-right: 0 !important;
+ `}
+ }
+
+ .session-ip {
+ position: relative;
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl" &&
+ css`
+ :after {
+ content: "";
+ position: absolute;
+ top: 4px;
+ right: -8px;
+ width: 1px;
+ height: 12px;
+ background: ${(props) => props.theme.activeSessions.sortHeaderColor};
+ }
+ `}
}
:last-child {
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js
index ca5fb9be2e..192409c8fe 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import ToggleButton from "@docspace/components/toggle-button";
import Box from "@docspace/components/box";
+import Text from "@docspace/components/text";
import Loaders from "@docspace/common/components/Loaders";
import StyledWrapper from "./styled-file-management";
@@ -105,34 +106,42 @@ const FileManagement = ({
style={{ display: "none" }}
/>
{!isVisitor && (
-
+ {t("Common:DontAskAgain")}
+
)}
-
{t("OriginalCopy")}
+
+ {!isVisitor && (
+
+ {t("DisplayNotification")}
+
)}
{!isVisitor && (
-
+ {t("UpdateOrCreate")}
+
)}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/styled-file-management.js b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/styled-file-management.js
index 9a1c8c4aa1..31e10e5030 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/styled-file-management.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/styled-file-management.js
@@ -1,6 +1,4 @@
import styled, { css } from "styled-components";
-import { tablet } from "@docspace/components/utils/device";
-import { isMobile } from "react-device-detect";
const StyledWrapper = styled.div`
max-width: 660px;
@@ -10,6 +8,11 @@ const StyledWrapper = styled.div`
display: grid;
grid-gap: 32px;
+ .toggle-btn-wrapper {
+ display: flex;
+ //gap: 8px;
+ }
+
.toggle-btn {
height: 20px;
line-height: 20px;
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
index 84d97776f8..bb4bc12752 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
@@ -10,7 +10,7 @@ import toastr from "@docspace/components/toast/toastr";
import { ThemeKeys } from "@docspace/common/constants";
-import { smallTablet } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
import { showLoader, getSystemTheme } from "@docspace/common/utils";
import ThemePreview from "./theme-preview";
@@ -52,7 +52,7 @@ const StyledWrapper = styled.div`
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
- @media ${smallTablet} {
+ @media ${mobile} {
display: none;
}
}
@@ -60,7 +60,7 @@ const StyledWrapper = styled.div`
.mobile-themes-container {
display: none;
- @media ${smallTablet} {
+ @media ${mobile} {
display: flex;
padding-left: 30px;
}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
index 529d05400b..b6226afe58 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
@@ -25,10 +25,10 @@ export const StyledWrapper = styled.div`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
- left: 30px !important;
+ left: 80px !important;
`
: css`
- right: 30px !important;
+ right: 80px !important;
`}
}
`;
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
index 2aeb585b16..4eacf88711 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/styled-login-settings.js
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { hugeMobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
export const StyledWrapper = styled.div`
max-width: 660px;
@@ -18,7 +18,7 @@ export const StyledWrapper = styled.div`
gap: 16px;
align-items: center;
- @media ${hugeMobile} {
+ @media ${mobile} {
flex-direction: column;
gap: 12px;
align-items: flex-start;
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
index 0fd2dd05da..3a00f3b56d 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
@@ -31,7 +31,7 @@ import {
} from "./styled-main-profile";
import { HelpButton, Tooltip } from "@docspace/components";
import withCultureNames from "@docspace/common/hoc/withCultureNames";
-import { isSmallTablet } from "@docspace/components/utils/device";
+import { isMobile } from "@docspace/components/utils/device";
import { SSO_LABEL } from "SRC_DIR/helpers/constants";
import { useTheme } from "styled-components";
@@ -70,7 +70,7 @@ const MainProfile = (props) => {
const checkWidth = () => {
if (!isMobileOnly) return;
- if (!isSmallTablet()) {
+ if (!isMobile()) {
setHorizontalOrientation(true);
} else {
setHorizontalOrientation(false);
@@ -122,7 +122,7 @@ const MainProfile = (props) => {
);
- const isMobileHorizontalOrientation = isMobileOnly && horizontalOrientation;
+ const isMobileHorizontalOrientation = isMobile() && horizontalOrientation;
const { cultureName, currentCulture } = profile;
const language = convertLanguage(cultureName || currentCulture || culture);
@@ -293,7 +293,7 @@ const MainProfile = (props) => {
selectedOption={selectedLanguage}
onSelect={onLanguageSelect}
isDisabled={false}
- scaled={isMobileOnly}
+ scaled={isMobile()}
scaledOptions={false}
size="content"
showDisabledItems={true}
@@ -302,11 +302,11 @@ const MainProfile = (props) => {
isDefaultMode={
isMobileHorizontalOrientation
? isMobileHorizontalOrientation
- : !isMobileOnly
+ : !isMobile()
}
- withBlur={isMobileHorizontalOrientation ? false : isMobileOnly}
+ withBlur={isMobileHorizontalOrientation ? false : isMobile()}
fillIcon={false}
- modernView={!isMobileOnly}
+ modernView={!isMobile()}
/>
@@ -416,7 +416,7 @@ const MainProfile = (props) => {
selectedOption={selectedLanguage}
onSelect={onLanguageSelect}
isDisabled={false}
- scaled={isMobileOnly}
+ scaled={isMobile()}
scaledOptions={false}
size="content"
showDisabledItems={true}
@@ -425,11 +425,11 @@ const MainProfile = (props) => {
isDefaultMode={
isMobileHorizontalOrientation
? isMobileHorizontalOrientation
- : !isMobileOnly
+ : !isMobile()
}
- withBlur={isMobileHorizontalOrientation ? false : isMobileOnly}
+ withBlur={isMobileHorizontalOrientation ? false : isMobile()}
fillIcon={false}
- modernView={!isMobileOnly}
+ modernView={!isMobile()}
/>
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
index 63bbe3943b..6cf85b41b7 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
@@ -1,10 +1,5 @@
import styled, { css } from "styled-components";
-import {
- hugeMobile,
- mobile,
- smallTablet,
- tablet,
-} from "@docspace/components/utils/device";
+import { mobile, tablet } from "@docspace/components/utils/device";
import Text from "@docspace/components/text";
export const StyledWrapper = styled.div`
@@ -27,7 +22,7 @@ export const StyledWrapper = styled.div`
max-width: 100%;
}
- @media ${smallTablet} {
+ @media ${mobile} {
background: none;
flex-direction: column;
gap: 24px;
@@ -39,7 +34,7 @@ export const StyledWrapper = styled.div`
export const StyledAvatarWrapper = styled.div`
display: flex;
- @media ${smallTablet} {
+ @media ${mobile} {
width: 100%;
justify-content: center;
}
@@ -47,7 +42,7 @@ export const StyledAvatarWrapper = styled.div`
.badges-wrapper {
display: none;
- @media ${smallTablet} {
+ @media ${mobile} {
display: flex;
position: fixed;
right: 16px;
@@ -247,7 +242,7 @@ export const StyledInfo = styled.div`
display: flex;
}
- @media ${smallTablet} {
+ @media ${mobile} {
.rows-container {
display: none;
}
@@ -344,7 +339,7 @@ export const StyledInfo = styled.div`
}
}
- @media ${hugeMobile} {
+ @media ${mobile} {
gap: 8px;
}
}
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js
index 9420656e74..13ee313f9f 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js
@@ -5,9 +5,8 @@ import ComboBox from "@docspace/components/combobox";
import Text from "@docspace/components/text";
import toastr from "@docspace/components/toast/toastr";
-import { isMobileOnly } from "react-device-detect";
-
import { StyledRow } from "./styled-main-profile";
+import { isMobile } from "@docspace/components/utils/device";
const TimezoneCombo = ({ title }) => {
const { t } = useTranslation("Wizard");
@@ -28,15 +27,15 @@ const TimezoneCombo = ({ title }) => {
selectedOption={selectedTimezone}
//onSelect={onTimezoneSelect}
isDisabled={false}
- noBorder={!isMobileOnly}
- scaled={isMobileOnly}
+ noBorder={!isMobile()}
+ scaled={isMobile()}
scaledOptions={false}
size="content"
showDisabledItems={true}
dropDownMaxHeight={364}
manualWidth="250px"
- isDefaultMode={!isMobileOnly}
- withBlur={isMobileOnly}
+ isDefaultMode={!isMobile()}
+ withBlur={isMobile()}
fillIcon={false}
/>
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/styled-social-networks.js b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/styled-social-networks.js
index d70d8e0010..48756fb18e 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/styled-social-networks.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/styled-social-networks.js
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { hugeMobile } from "@docspace/components/utils/device";
+import { mobile } from "@docspace/components/utils/device";
export const StyledWrapper = styled.div`
max-width: 660px;
@@ -13,7 +13,7 @@ export const StyledWrapper = styled.div`
grid-column-gap: 20px;
grid-row-gap: 12px;
- @media ${hugeMobile} {
+ @media ${mobile} {
grid-template-columns: 1fr;
}
}
diff --git a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js
index b2956bca07..9a9281541e 100644
--- a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js
+++ b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js
@@ -1,20 +1,21 @@
import styled, { css } from "styled-components";
+import { tablet } from "@docspace/components/utils/device";
export const StyledHeader = styled.div`
position: relative;
display: grid;
- grid-template-columns: ${props =>
+ grid-template-columns: ${(props) =>
props.showContextButton ? "auto auto auto 1fr" : "auto 1fr"};
align-items: center;
- @media (max-width: 1024px) {
- grid-template-columns: ${props =>
+ @media ${tablet} {
+ grid-template-columns: ${(props) =>
props.showContextButton ? "auto 1fr auto" : "auto 1fr"};
}
.action-button {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 16px;
@@ -22,8 +23,8 @@ export const StyledHeader = styled.div`
: css`
margin-left: 16px;
`}
- @media (max-width: 1024px) {
- ${props =>
+ @media ${tablet} {
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
@@ -32,7 +33,7 @@ export const StyledHeader = styled.div`
margin-left: auto;
`}
& > div:first-child {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 8px 0px 8px 16px;
@@ -46,12 +47,12 @@ export const StyledHeader = styled.div`
}
}
.arrow-button {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
- @media (max-width: 1024px) {
+ @media ${tablet} {
padding: 8px 16px 8px 16px;
margin-left: -16px;
margin-right: -16px;
@@ -59,7 +60,7 @@ export const StyledHeader = styled.div`
}
.header-headline {
- ${props =>
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 16px;
diff --git a/packages/client/src/pages/Profile/Section/Header/index.js b/packages/client/src/pages/Profile/Section/Header/index.js
index 0075fec6f6..8b1ef4328e 100644
--- a/packages/client/src/pages/Profile/Section/Header/index.js
+++ b/packages/client/src/pages/Profile/Section/Header/index.js
@@ -40,8 +40,10 @@ const Header = (props) => {
setDialogData,
- isProfileLoaded,
profileClicked,
+
+ showProfileLoader,
+ setIsLoading,
} = props;
const navigate = useNavigate();
@@ -111,11 +113,13 @@ const Header = (props) => {
const urlParams = roomsFilter.toUrlParams();
const backUrl = `/rooms/shared/filter?${urlParams}`;
+ setIsLoading();
+
navigate(backUrl);
// setFilter(filter);
};
- if (!isProfileLoaded) return
-
@@ -107,7 +120,18 @@ export default inject(
({ auth, peopleStore, clientLoadingStore, treeFoldersStore }) => {
const { setDocumentTitle, language } = auth;
- const { setIsProfileLoaded } = clientLoadingStore;
+ const {
+ setIsProfileLoaded,
+ setIsSectionHeaderLoading,
+ setIsSectionBodyLoading,
+ setIsSectionFilterLoading,
+ } = clientLoadingStore;
+
+ const setIsLoading = () => {
+ setIsSectionHeaderLoading(true, false);
+ setIsSectionFilterLoading(true, false);
+ setIsSectionBodyLoading(true, false);
+ };
const { targetUserStore } = peopleStore;
const {
@@ -128,10 +152,12 @@ export default inject(
setIsEditTargetUser,
showCatalog: auth.settingsStore.showCatalog,
+ setBodyRendered: auth.settingsStore.setBodyRendered,
selectedTreeNode,
setSelectedNode,
isVisitor: auth.userStore.user.isVisitor,
setIsProfileLoaded,
+ setIsLoading,
};
}
)(observer(withTranslation(["Profile", "Common"])(withCultureNames(Profile))));
diff --git a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
index 7993675731..c93ea7a417 100644
--- a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
+++ b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
@@ -1,18 +1,18 @@
import styled, { css } from "styled-components";
-import { isMobile, isMobileOnly } from "react-device-detect";
+
import { tablet, mobile } from "@docspace/components/utils/device";
import Headline from "@docspace/common/components/Headline";
const StyledHeadline = styled(Headline)`
font-weight: 700;
- font-size: ${isMobile ? "21px !important" : "18px"};
- line-height: ${isMobile ? "28px !important" : "24px"};
- ${props =>
+ font-size: 18px;
+ line-height: 24px;
+ ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 18px;
`
- : css`
+ : css`
margin-left: 18px;
`}
@@ -30,13 +30,13 @@ const StyledContainer = styled.div`
align-items: center;
.public-room-header_separator {
- ${props =>
- props.theme.interfaceDirection === "rtl"
- ? css`
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl"
+ ? css`
margin: 0 15px 0 16px;
border-right: 1px solid #dfe2e3;
`
- : css`
+ : css`
margin: 0 16px 0 15px;
border-left: 1px solid #dfe2e3;
`}
@@ -48,22 +48,10 @@ const StyledContainer = styled.div`
padding: 16px 0 0px;
}
- ${isMobile &&
- css`
- width: 100% !important;
- padding: 16px 0 0px;
- `}
-
@media ${mobile} {
width: 100%;
padding: 12px 0 0;
}
-
- ${isMobileOnly &&
- css`
- width: 100% !important;
- padding: 12px 0 0;
- `}
`;
export { StyledHeadline, StyledContainer };
diff --git a/packages/client/src/pages/PublicRoom/index.js b/packages/client/src/pages/PublicRoom/index.js
index e5bc741235..c81a4ea4ea 100644
--- a/packages/client/src/pages/PublicRoom/index.js
+++ b/packages/client/src/pages/PublicRoom/index.js
@@ -22,6 +22,7 @@ const PublicRoom = (props) => {
getFilesSettings,
setPublicRoomKey,
setIsArticleLoading,
+ setBodyRendered,
} = props;
const navigate = useNavigate();
@@ -61,6 +62,13 @@ const PublicRoom = (props) => {
if (isLoaded) fetchRoomFiles();
}, [isLoaded]);
+ useEffect(() => {
+ setBodyRendered(true);
+ return () => {
+ setBodyRendered(false);
+ };
+ }, []);
+
const renderLoader = () => {
return (
@@ -102,7 +110,7 @@ export default inject(
publicRoomStore;
const { getFilesSettings } = settingsStore;
- const { setPublicRoomKey } = auth.settingsStore;
+ const { setPublicRoomKey, setBodyRendered } = auth.settingsStore;
const { setIsArticleLoading } = clientLoadingStore;
return {
@@ -116,6 +124,7 @@ export default inject(
validatePublicRoomKey,
setPublicRoomKey,
setIsArticleLoading,
+ setBodyRendered,
};
}
)(observer(PublicRoom));
diff --git a/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js b/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
index 7bf797f991..940316fba6 100644
--- a/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
+++ b/packages/client/src/pages/PublicRoom/sub-components/RoomStyles.js
@@ -1,5 +1,5 @@
import styled from "styled-components";
-import { hugeMobile, mobile, tablet } from "@docspace/components/utils/device";
+import { mobile, tablet } from "@docspace/components/utils/device";
export const StyledPage = styled.div`
display: flex;
@@ -13,25 +13,13 @@ export const StyledPage = styled.div`
padding: 0 16px;
}
- @media ${hugeMobile} {
- margin: 32px 0;
- ${props =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- padding: 0 20px 0 8px;
- `
- : css`
- padding: 0 8px 0 20px;
- `}
- }
-
@media ${mobile} {
- ${props =>
- props.theme.interfaceDirection === "rtl"
- ? css`
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl"
+ ? css`
padding: 0 16px 0 8px;
`
- : css`
+ : css`
padding: 0 8px 0 16px;
`}
}
@@ -89,7 +77,7 @@ export const StyledContent = styled.div`
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
- @media ${hugeMobile} {
+ @media ${mobile} {
justify-content: start;
min-height: 100%;
}
@@ -101,7 +89,7 @@ export const StyledBody = styled.div`
align-items: center;
margin: 56px auto;
- @media ${hugeMobile} {
+ @media ${mobile} {
width: 100%;
margin: 0 auto;
}
diff --git a/packages/client/src/pages/Sdk/index.js b/packages/client/src/pages/Sdk/index.js
index 02387a2cad..32c8a12ef2 100644
--- a/packages/client/src/pages/Sdk/index.js
+++ b/packages/client/src/pages/Sdk/index.js
@@ -25,7 +25,15 @@ const Sdk = ({
getSettings,
user,
updateProfileCulture,
+ setBodyRendered,
}) => {
+ useEffect(() => {
+ setBodyRendered(true);
+ return () => {
+ setBodyRendered(false);
+ };
+ }, []);
+
useEffect(() => {
window.addEventListener("message", handleMessage, false);
return () => {
@@ -161,15 +169,10 @@ const Sdk = ({
component = (
+
);
export default AppLoader;
diff --git a/packages/common/components/Article/index.js b/packages/common/components/Article/index.js
index e6e9c3b3d3..765cc6a6e1 100644
--- a/packages/common/components/Article/index.js
+++ b/packages/common/components/Article/index.js
@@ -1,13 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
import PropTypes from "prop-types";
-import { isMobile, isMobileOnly, isTablet } from "react-device-detect";
-
-import {
- isDesktop as isDesktopUtils,
- isTablet as isTabletUtils,
- isMobile as isMobileUtils,
-} from "@docspace/components/utils/device";
+import { isMobile, isMobileOnly, isIOS } from "react-device-detect";
import SubArticleBackdrop from "./sub-components/article-backdrop";
import SubArticleHeader from "./sub-components/article-header";
@@ -20,6 +14,8 @@ import ArticleApps from "./sub-components/article-apps";
import { StyledArticle } from "./styled-article";
import HideArticleMenuButton from "./sub-components/article-hide-menu-button";
import Portal from "@docspace/components/portal";
+import { DeviceType } from "../../constants";
+import ArticleProfileLoader from "../Loaders/ArticleProfileLoader/ArticleProfileLoader";
const Article = ({
showText,
@@ -45,6 +41,8 @@ const Article = ({
onLogoClickAction,
theme,
+ currentDeviceType,
+ showArticleLoader,
...rest
}) => {
const [articleHeaderContent, setArticleHeaderContent] = React.useState(null);
@@ -52,22 +50,38 @@ const Article = ({
React.useState(null);
const [articleBodyContent, setArticleBodyContent] = React.useState(null);
const [correctTabletHeight, setCorrectTabletHeight] = React.useState(null);
+ const [isVirtualKeyboardOpen, setIsVirtualKeyboardOpen] =
+ React.useState(false);
+ const updateSizeRef = React.useRef(null);
React.useEffect(() => {
- if (isMobileOnly) {
- window.addEventListener("popstate", onMobileBack);
- return () => window.removeEventListener("popstate", onMobileBack);
- }
+ window.addEventListener("popstate", onMobileBack);
+ return () => window.removeEventListener("popstate", onMobileBack);
}, [onMobileBack]);
React.useEffect(() => {
- window.addEventListener("resize", sizeChangeHandler);
- return () => window.removeEventListener("resize", sizeChangeHandler);
- }, []);
+ // const showArticle = JSON.parse(localStorage.getItem("showArticle"));
- React.useEffect(() => {
- sizeChangeHandler();
- }, []);
+ if (currentDeviceType === DeviceType.mobile) {
+ setShowText(true);
+ setIsMobileArticle(true);
+
+ return;
+ }
+
+ if (currentDeviceType === DeviceType.tablet) {
+ setIsMobileArticle(true);
+
+ // if (showArticle) return;
+
+ setShowText(false);
+
+ return;
+ }
+
+ setShowText(true);
+ setIsMobileArticle(false);
+ }, [setShowText, setIsMobileArticle, currentDeviceType]);
React.useEffect(() => {
React.Children.forEach(children, (child) => {
@@ -90,68 +104,66 @@ const Article = ({
});
}, [children]);
- const sizeChangeHandler = React.useCallback(() => {
- const showArticle = JSON.parse(localStorage.getItem("showArticle"));
-
- if (isMobileOnly || isMobileUtils() || window.innerWidth === 375) {
- setShowText(true);
- setIsMobileArticle(true);
- }
- if (
- ((isTabletUtils() && window.innerWidth !== 375) || isMobile) &&
- !isMobileOnly
- ) {
- setIsMobileArticle(true);
-
- if (showArticle) return;
-
- setShowText(false);
- }
- if (isDesktopUtils() && !isMobile) {
- setShowText(true);
- setIsMobileArticle(false);
- }
- }, [setShowText, setIsMobileArticle]);
-
const onMobileBack = React.useCallback(() => {
//close article
+ if (currentDeviceType !== DeviceType.mobile) return;
setArticleOpen(false);
- }, [setArticleOpen]);
+ }, [setArticleOpen, currentDeviceType]);
// TODO: make some better
- const onResize = React.useCallback(() => {
- let correctTabletHeight = window.innerHeight;
+ const onResize = React.useCallback(
+ (e) => {
+ let correctTabletHeight = window.innerHeight;
- if (mainBarVisible)
- correctTabletHeight -= window.innerHeight <= 768 ? 62 : 90;
+ if (mainBarVisible) {
+ const mainBar = document.getElementById("main-bar");
- const isTouchDevice =
- "ontouchstart" in window ||
- navigator.maxTouchPoints > 0 ||
- navigator.msMaxTouchPoints > 0;
+ if (!mainBar.offsetHeight)
+ return (updateSizeRef.current = setTimeout(() => onResize(), 0));
- const path = window.location.pathname.toLowerCase();
+ correctTabletHeight -= mainBar.offsetHeight;
+ }
- if (
- isBannerVisible &&
- isMobile &&
- isTouchDevice &&
- (path.includes("rooms") || path.includes("files"))
- )
- correctTabletHeight -= 80;
+ const isTouchDevice =
+ "ontouchstart" in window ||
+ navigator.maxTouchPoints > 0 ||
+ navigator.msMaxTouchPoints > 0;
- setCorrectTabletHeight(correctTabletHeight);
- }, [mainBarVisible, isBannerVisible]);
+ const path = window.location.pathname.toLowerCase();
+
+ if (
+ isBannerVisible &&
+ isMobile &&
+ isTouchDevice &&
+ (path.includes("rooms") || path.includes("files"))
+ ) {
+ correctTabletHeight -= 80;
+
+ if (e?.target?.height) {
+ const diff = window.innerHeight - e.target.height;
+ setIsVirtualKeyboardOpen(true);
+ correctTabletHeight -= diff;
+ } else {
+ setIsVirtualKeyboardOpen(false);
+ }
+ }
+
+ setCorrectTabletHeight(correctTabletHeight);
+ },
+ [mainBarVisible, isBannerVisible]
+ );
React.useEffect(() => {
- if (isTablet) {
- onResize();
- window.addEventListener("resize", onResize);
+ onResize();
+ window.addEventListener("resize", onResize);
+ if (isMobile && !isMobileOnly && isIOS) {
+ window?.visualViewport?.addEventListener("resize", onResize);
}
-
return () => {
window.removeEventListener("resize", onResize);
+ window?.visualViewport?.removeEventListener("resize", onResize);
+ clearTimeout(updateSizeRef.current);
};
}, [onResize]);
@@ -163,19 +175,20 @@ const Article = ({
articleOpen={articleOpen}
$withMainButton={withMainButton}
correctTabletHeight={correctTabletHeight}
+ isMobile={currentDeviceType === DeviceType.mobile}
{...rest}
>
{articleHeaderContent ? articleHeaderContent.props.children : null}
{articleMainButtonContent &&
withMainButton &&
- !isMobileOnly &&
- !isMobileUtils() ? (
+ currentDeviceType !== DeviceType.mobile ? (
{articleMainButtonContent.props.children}
@@ -183,32 +196,49 @@ const Article = ({
{articleBodyContent ? articleBodyContent.props.children : null}
+ {!showArticleLoader && (
+ <>
+
+ {!showArticleLoader && (
{articleMainButtonContent.props.children}
@@ -233,7 +263,9 @@ const Article = ({
// withMainButton,
// });
- return isMobileOnly ? renderPortalArticle() : articleComponent;
+ return currentDeviceType === DeviceType.mobile
+ ? renderPortalArticle()
+ : articleComponent;
};
Article.propTypes = {
@@ -279,6 +311,7 @@ export default inject(({ auth }) => {
setArticleOpen,
mainBarVisible,
theme,
+ currentDeviceType,
} = settingsStore;
return {
@@ -298,5 +331,6 @@ export default inject(({ auth }) => {
isLiveChatAvailable,
theme,
+ currentDeviceType,
};
})(observer(Article));
diff --git a/packages/common/components/Article/styled-article.js b/packages/common/components/Article/styled-article.js
index c8910473cd..c0ac7e396b 100644
--- a/packages/common/components/Article/styled-article.js
+++ b/packages/common/components/Article/styled-article.js
@@ -1,12 +1,6 @@
import styled, { css } from "styled-components";
-import { isMobile, isMobileOnly, isTablet } from "react-device-detect";
-import {
- mobile,
- tablet,
- isMobile as isMobileUtils,
- hugeMobile,
-} from "@docspace/components/utils/device";
+import { mobile, tablet } from "@docspace/components/utils/device";
import { Base } from "@docspace/components/themes";
import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
@@ -25,8 +19,6 @@ const StyledArticle = styled.article`
user-select: none;
- //padding: 0 20px;
-
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `border-left: ${theme.catalog.verticalLine};`
@@ -38,20 +30,8 @@ const StyledArticle = styled.article`
height: ${(props) =>
props.correctTabletHeight ? `${props.correctTabletHeight}px` : `100%`};
-
- //padding: 0 8px;
}
- ${isTablet &&
- css`
- min-width: ${(props) => (props.showText ? "243px" : "60px")};
- max-width: ${(props) => (props.showText ? "243px" : "60px")};
- //padding: 0 8px;
-
- height: ${(props) =>
- props.correctTabletHeight ? `${props.correctTabletHeight}px` : `100%`};
- `}
-
@media ${mobile} {
display: ${(props) => (props.articleOpen ? "flex" : "none")};
flex-direction: column;
@@ -60,83 +40,38 @@ const StyledArticle = styled.article`
position: fixed;
margin: 0;
+ border: none;
+
height: calc(100% - 64px) !important;
- margin-top: 16px;
- //padding: 0 8px;
+ position: absolute;
+ top: 64px;
}
- ${isMobileOnly &&
- css`
- display: ${(props) => (props.articleOpen ? "flex" : "none")} !important;
- flex-direction: column;
-
- min-width: 100% !important;
- width: 100%;
- position: fixed;
- margin: 0;
- padding: 0;
- top: 64px;
- height: calc(100% - 64px) !important;
-
- ${({ theme }) =>
- theme.interfaceDirection === "rtl"
- ? `border-left: none;`
- : `border-right: none;`}
- `}
-
- z-index: ${(props) =>
- props.showText && (isMobileOnly || isMobileUtils()) ? "230" : "205"};
+ z-index: ${(props) => (props.showText && props.isMobile ? "230" : "205")};
.article-body__scrollbar {
height: ${(props) =>
`calc(100% - ${props.$withMainButton ? "190px" : "150px"})`} !important;
- ${!isMobileOnly &&
- css`
- @media ${tablet} {
- height: calc(100% - 126px) !important;
- }
- `}
+ @media ${tablet} {
+ height: calc(100% - 184px) !important;
+ }
@media ${mobile} {
height: 100% !important;
margin-top: 32px;
}
- @media ${hugeMobile} {
- height: 100% !important;
- }
-
- ${isTablet &&
- css`
- height: calc(100% - 126px) !important;
- `}
-
- ${isMobileOnly &&
- css`
- height: 100% !important;
- margin-top: 32px !important;
- `}
-
.article-scroller {
@media ${tablet} {
- height: calc(100% - 60px);
+ height: 100%;
+ height: 100% !important;
}
- ${isTablet &&
- css`
- height: calc(100% - 60px);
- `}
-
@media ${mobile} {
height: 100%;
}
-
- ${isMobileOnly &&
- css`
- height: 100%;
- `}
}
.scroll-body {
@@ -152,21 +87,10 @@ const StyledArticle = styled.article`
padding: 0 8px !important;
}
- ${isTablet &&
- css`
- padding: 0 8px !important;
- `}
-
@media ${mobile} {
display: block;
padding-bottom: 20px;
}
-
- ${isMobileOnly &&
- css`
- display: block;
- padding-bottom: 20px;
- `}
}
}
`;
@@ -193,30 +117,11 @@ const StyledArticleHeader = styled.div`
box-sizing: border-box;
}
- ${isTablet &&
- css`
- padding: 18px 8px 19px;
- margin: 0;
- justify-content: ${(props) => (props.showText ? "flex-start" : "center")};
-
- height: 61px;
- min-height: 61px;
- max-height: 61px;
- box-sizing: border-box;
- `}
-
@media ${mobile} {
border-bottom: ${(props) => props.theme.catalog.header.borderBottom};
padding: 12px 0 12px;
}
- ${isMobileOnly &&
- css`
- border-bottom: ${(props) =>
- props.theme.catalog.header.borderBottom} !important;
- padding: 12px 0 12px !important;
- `}
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
`;
@@ -250,29 +155,12 @@ const StyledHeading = styled.div`
: `margin-left: 9px;`}
}
- ${isTablet &&
- css`
- display: ${(props) => (props.showText ? "block" : "none")};
- ${({ theme }) =>
- theme.interfaceDirection === "rtl"
- ? `margin-right: 9px !important;`
- : `margin-left: 9px !important`}
- `}
-
@media ${mobile} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 0;`
: `margin-left: 0;`}
}
-
- ${isMobileOnly &&
- css`
- ${({ theme }) =>
- theme.interfaceDirection === "rtl"
- ? `margin-right: 0 !important;`
- : `margin-left: 0 !important;`}
- `}
`;
const StyledIconBox = styled.div`
@@ -289,19 +177,9 @@ const StyledIconBox = styled.div`
display: ${(props) => (props.showText ? "none" : "flex")};
}
- ${isTablet &&
- css`
- display: ${(props) => (props.showText ? "none" : "flex")};
- `}
-
@media ${mobile} {
display: none;
}
-
- ${isMobileOnly &&
- css`
- display: none !important;
- `}
`;
const StyledMenuIcon = styled(MenuIcon)`
@@ -326,12 +204,6 @@ const StyledArticleMainButton = styled.div`
padding: 0;
margin: 0;
}
-
- ${isMobile &&
- css`
- padding: 0;
- margin: 0;
- `}
`;
const StyledControlContainer = styled.div`
@@ -381,11 +253,6 @@ const StyledArticleProfile = styled.div`
padding: 16px 14px;
}
- ${isTablet &&
- css`
- padding: 16px 14px;
- `}
-
.profile-avatar {
cursor: pointer;
}
@@ -431,7 +298,7 @@ const StyledUserName = styled.div`
const StyledProfileWrapper = styled.div`
z-index: 209;
- position: fixed;
+ position: ${(props) => (props.isVirtualKeyboardOpen ? "absolute" : "fixed")};
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
@@ -449,12 +316,6 @@ const StyledProfileWrapper = styled.div`
min-width: ${(props) => (props.showText ? "243px" : "60px")};
max-width: ${(props) => (props.showText ? "243px" : "60px")};
}
-
- ${isTablet &&
- css`
- min-width: ${(props) => (props.showText ? "243px" : "60px")};
- max-width: ${(props) => (props.showText ? "243px" : "60px")};
- `}
`;
const StyledArticleAlertsComponent = styled.div`
diff --git a/packages/common/components/Article/sub-components/article-apps.js b/packages/common/components/Article/sub-components/article-apps.js
index 919905ab50..13296e36a0 100644
--- a/packages/common/components/Article/sub-components/article-apps.js
+++ b/packages/common/components/Article/sub-components/article-apps.js
@@ -12,8 +12,7 @@ import Text from "@docspace/components/text";
import IconButton from "@docspace/components/icon-button";
import { Base } from "@docspace/components/themes";
-import { desktop, tablet, hugeMobile } from "@docspace/components/utils/device";
-import { isTablet } from "react-device-detect";
+import { tablet, mobile } from "@docspace/components/utils/device";
const StyledArticleApps = styled.div`
display: flex;
@@ -34,7 +33,7 @@ const StyledArticleApps = styled.div`
`}
}
- @media ${hugeMobile} {
+ @media ${mobile} {
position: relative;
bottom: 0px;
margin-top: 32px;
diff --git a/packages/common/components/Article/sub-components/article-header.js b/packages/common/components/Article/sub-components/article-header.js
index 891c3e8ef7..2bd21e8d1b 100644
--- a/packages/common/components/Article/sub-components/article-header.js
+++ b/packages/common/components/Article/sub-components/article-header.js
@@ -2,10 +2,9 @@ import React from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import Loaders from "@docspace/common/components/Loaders";
-import { isTablet as isTabletUtils } from "@docspace/components/utils/device";
+
import { Link } from "react-router-dom";
-import { isTablet, isMobileOnly } from "react-device-detect";
-import { isMobile } from "@docspace/components/utils/device";
+
import { inject, observer } from "mobx-react";
import {
StyledArticleHeader,
@@ -13,6 +12,7 @@ import {
StyledIconBox,
} from "../styled-article";
import { getLogoFromPath } from "../../../utils";
+import { DeviceType } from "../../../constants";
const ArticleHeader = ({
showText,
@@ -22,13 +22,11 @@ const ArticleHeader = ({
isBurgerLoading,
whiteLabelLogoUrls,
theme,
+ currentDeviceType,
...rest
}) => {
const navigate = useNavigate();
- const isTabletView =
- (isTabletUtils() || isTablet) && !isMobileOnly && !isMobile();
-
const onLogoClick = () => {
onLogoClickAction && onLogoClickAction();
navigate("/");
@@ -41,23 +39,24 @@ const ArticleHeader = ({
? getLogoFromPath(whiteLabelLogoUrls[0].path.dark)
: getLogoFromPath(whiteLabelLogoUrls[0].path.light);
- if (isMobileOnly || isMobile()) return <>;
+ if (currentDeviceType === DeviceType.mobile) return <>;
- const isLoadingComponent = isTabletView ? (
-
)}
- {isTabletView ? (
+ {currentDeviceType === DeviceType.tablet ? (
+ currentColorScheme={currentColorScheme}
+ isVirtualKeyboardOpen={isVirtualKeyboardOpen}
+ >
{showText ? (
) : (