diff --git a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
index cdfa111ab7..440a14bd16 100644
--- a/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
@@ -28,11 +28,11 @@ import styled, { css } from "styled-components";
import { Base } from "@docspace/shared/themes";
import { tablet } from "@docspace/shared/utils";
-const getHeaderHeight = ({ withTabs, isTablet }) => {
- let res = isTablet ? 53 : 69;
- if (withTabs) res += 32;
- return `${res}px`;
-};
+// const getHeaderHeight = ({ withTabs, isTablet }) => {
+// let res = isTablet ? 54 : 70;
+// if (withTabs) res += 32;
+// return `${res}px`;
+// };
const getMainHeight = ({ isTablet }) => {
let res = isTablet ? 52 : 68;
@@ -43,52 +43,17 @@ const StyledInfoPanelHeader = styled.div`
width: 100%;
max-width: 100%;
- height: ${(props) => getHeaderHeight(props)};
- min-height: ${(props) => getHeaderHeight(props)};
- @media ${tablet} {
- height: ${(props) => getHeaderHeight({ ...props, isTablet: true })};
- min-height: ${(props) => getHeaderHeight({ ...props, isTablet: true })};
- }
-
display: flex;
flex-direction: column;
border-bottom: ${(props) =>
props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
- .main {
+
+ .header-text {
height: ${(props) => getMainHeight(props)};
- min-height: ${(props) => getMainHeight(props)};
@media ${tablet} {
height: ${(props) => getMainHeight({ ...props, isTablet: true })};
- min-height: ${(props) => getMainHeight({ ...props, isTablet: true })};
- }
-
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- .header-text {
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin-right: 20px;
- `
- : css`
- margin-left: 20px;
- `}
}
}
-
- .info-panel-toggle-bg {
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin-left: 20px;
- `
- : css`
- margin-right: 20px;
- `}
- }
-
.tabs {
display: flex;
width: 100%;
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
index b5f91a25fc..c67ef43229 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -25,12 +25,13 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled from "styled-components";
-import { useMemo } from "react";
+import { useMemo, useContext } from "react";
import { inject, observer } from "mobx-react";
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Base } from "@docspace/shared/themes";
+import { Context } from "@docspace/shared/utils";
import { RowContainer } from "@docspace/shared/components/row-container";
import SimpleFilesRow from "./SimpleFilesRow";
@@ -62,7 +63,6 @@ StyledRowContainer.defaultProps = { theme: Base };
const FilesRowContainer = ({
filesList,
- sectionWidth,
viewAs,
setViewAs,
infoPanelVisible,
@@ -75,6 +75,8 @@ const FilesRowContainer = ({
highlightFile,
currentDeviceType,
}) => {
+ const { sectionWidth } = useContext(Context);
+
useViewEffect({
view: viewAs,
setView: setViewAs,
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 9a16198ff7..e93e9feb23 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -28,13 +28,20 @@ import { inject, observer } from "mobx-react";
import styled, { css } from "styled-components";
import { useNavigate, useLocation } from "react-router-dom";
import elementResizeDetectorMaker from "element-resize-detector";
-import React, { useEffect, useRef, useCallback, useMemo } from "react";
+import React, {
+ useEffect,
+ useRef,
+ useCallback,
+ useMemo,
+ useContext,
+} from "react";
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Base } from "@docspace/shared/themes";
import { TableContainer } from "@docspace/shared/components/table";
import { TableBody } from "@docspace/shared/components/table";
+import { Context } from "@docspace/shared/utils";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
@@ -121,7 +128,6 @@ const elementResizeDetector = elementResizeDetectorMaker({
const Table = ({
filesList,
- sectionWidth,
viewAs,
setViewAs,
setFirsElemChecked,
@@ -142,6 +148,8 @@ const Table = ({
const [tagCount, setTagCount] = React.useState(null);
const [hideColumns, setHideColumns] = React.useState(false);
+ const { sectionWidth } = useContext(Context);
+
const ref = useRef(null);
const tagRef = useRef(null);
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
index 266a0883f7..dd5bed3a46 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
@@ -24,14 +24,17 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
+
import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
+// import { Context } from "@docspace/shared/utils";
import Tile from "./sub-components/Tile";
import FilesTileContent from "./FilesTileContent";
+import { FileTileContext } from "./FileTile.provider";
import withFileActions from "../../../../../HOCs/withFileActions";
import withQuickButtons from "../../../../../HOCs/withQuickButtons";
@@ -45,7 +48,6 @@ const StyledDragAndDrop = styled(DragAndDrop)`
const FileTile = (props) => {
const {
item,
- sectionWidth,
dragging,
onContentFileSelect,
fileContextClick,
@@ -70,12 +72,12 @@ const FileTile = (props) => {
t,
getContextModel,
onHideContextMenu,
- thumbSize,
+ // thumbSize,
setSelection,
id,
onSelectTag,
onSelectOption,
- columnCount,
+ // columnCount,
isRooms,
withCtrlSelect,
withShiftSelect,
@@ -86,6 +88,10 @@ const FileTile = (props) => {
badgeUrl,
} = props;
+ // const { sectionWidth } = useContext(Context);
+
+ const { columnCount, thumbSize } = useContext(FileTileContext);
+
const temporaryExtension =
item.id === -1 ? `.${item.fileExst}` : item.fileExst;
@@ -145,7 +151,7 @@ const FileTile = (props) => {
: thumbnailUrl
}
element={element}
- sectionWidth={sectionWidth}
+ // sectionWidth={sectionWidth}
contentElement={quickButtonsComponent}
onSelect={onContentFileSelect}
tileContextClick={fileContextClick}
@@ -177,7 +183,7 @@ const FileTile = (props) => {
>
{badgesComponent}
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx
new file mode 100644
index 0000000000..385d23f3c5
--- /dev/null
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx
@@ -0,0 +1,28 @@
+import { createContext, PropsWithChildren, useMemo } from "react";
+
+type FileTileContextType = {
+ thumbSize: string;
+ columnCount: null | number;
+};
+
+export const FileTileContext = createContext
({
+ columnCount: null,
+ thumbSize: "",
+});
+
+export const FileTileProvider = ({
+ children,
+ columnCount,
+ thumbSize,
+}: PropsWithChildren) => {
+ const value = useMemo(
+ () => ({ columnCount, thumbSize }),
+ [thumbSize, columnCount],
+ );
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts
new file mode 100644
index 0000000000..41d1d789da
--- /dev/null
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts
@@ -0,0 +1,30 @@
+import elementResizeDetectorMaker from "element-resize-detector";
+
+export const getThumbSize = (width: number): string => {
+ let imgWidth = 216;
+
+ if (width >= 240 && width < 264) {
+ imgWidth = 240;
+ } else if (width >= 264 && width < 288) {
+ imgWidth = 264;
+ } else if (width >= 288 && width < 312) {
+ imgWidth = 288;
+ } else if (width >= 312 && width < 336) {
+ imgWidth = 312;
+ } else if (width >= 336 && width < 360) {
+ imgWidth = 336;
+ } else if (width >= 360 && width < 400) {
+ imgWidth = 360;
+ } else if (width >= 400 && width < 440) {
+ imgWidth = 400;
+ } else if (width >= 440) {
+ imgWidth = 440;
+ }
+
+ return `${imgWidth}x156`;
+};
+
+export const elementResizeDetector = elementResizeDetectorMaker({
+ strategy: "scroll",
+ callOnAdd: false,
+});
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
index 06687e5737..1fd9ef374c 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
@@ -30,45 +30,21 @@ import React, {
useCallback,
useState,
useMemo,
+ useContext,
} from "react";
import { inject, observer } from "mobx-react";
-import elementResizeDetectorMaker from "element-resize-detector";
-import TileContainer from "./sub-components/TileContainer";
+
+import { Context } from "@docspace/shared/utils";
+
import FileTile from "./FileTile";
+import { FileTileProvider } from "./FileTile.provider";
+import { elementResizeDetector, getThumbSize } from "./FileTile.utils";
-const getThumbSize = (width) => {
- let imgWidth = 216;
-
- if (width >= 240 && width < 264) {
- imgWidth = 240;
- } else if (width >= 264 && width < 288) {
- imgWidth = 264;
- } else if (width >= 288 && width < 312) {
- imgWidth = 288;
- } else if (width >= 312 && width < 336) {
- imgWidth = 312;
- } else if (width >= 336 && width < 360) {
- imgWidth = 336;
- } else if (width >= 360 && width < 400) {
- imgWidth = 360;
- } else if (width >= 400 && width < 440) {
- imgWidth = 400;
- } else if (width >= 440) {
- imgWidth = 440;
- }
-
- return `${imgWidth}x156`;
-};
-
-const elementResizeDetector = elementResizeDetectorMaker({
- strategy: "scroll",
- callOnAdd: false,
-});
+import TileContainer from "./sub-components/TileContainer";
const FilesTileContainer = ({
filesList,
t,
- sectionWidth,
withPaging,
thumbnails1280x720,
}) => {
@@ -78,6 +54,8 @@ const FilesTileContainer = ({
const [thumbSize, setThumbSize] = useState("");
const [columnCount, setColumnCount] = useState(null);
+ const { sectionWidth } = useContext(Context);
+
useEffect(() => {
return () => {
isMountedRef.current = false;
@@ -139,10 +117,7 @@ const FilesTileContainer = ({
}
item={item}
itemIndex={index}
- sectionWidth={sectionWidth}
selectableRef={onSetTileRef}
- thumbSize={thumbSize}
- columnCount={columnCount}
withRef={true}
/>
) : (
@@ -153,24 +128,23 @@ const FilesTileContainer = ({
}
item={item}
itemIndex={index}
- sectionWidth={sectionWidth}
- thumbSize={thumbSize}
- columnCount={columnCount}
/>
);
});
- }, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
+ }, [filesList, onSetTileRef, sectionWidth]);
return (
-
- {filesListNode}
-
+
+
+ {filesListNode}
+
+
);
};
diff --git a/packages/client/src/pages/Home/Section/Body/index.js b/packages/client/src/pages/Home/Section/Body/index.js
index 0b1bb063ae..0501b6d0fe 100644
--- a/packages/client/src/pages/Home/Section/Body/index.js
+++ b/packages/client/src/pages/Home/Section/Body/index.js
@@ -26,9 +26,8 @@
import React, { useEffect } from "react";
import { withTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-
import { observer, inject } from "mobx-react";
+
import FilesRowContainer from "./RowsView/FilesRowContainer";
import FilesTileContainer from "./TilesView/FilesTileContainer";
import EmptyContainer from "../../../../components/EmptyContainer";
@@ -37,7 +36,6 @@ import TableView from "./TableView/TableContainer";
import withHotkeys from "../../../../HOCs/withHotkeys";
import {
clearEdgeScrollingTimer,
- Consumer,
isMobile,
isTablet,
onEdgeScrolling,
@@ -307,36 +305,18 @@ const SectionBodyContent = (props) => {
if (isEmptyFilesList && movingInProgress) return <>;
- const showEmptyPage = isEmptyFilesList;
+ if (isEmptyFilesList) return ;
return (
-
- {(context) =>
- showEmptyPage ? (
- <>
-
-
- ) : viewAs === "tile" ? (
- <>
-
-
- ) : viewAs === "table" ? (
- <>
-
-
- ) : (
- <>
-
-
- )
- }
-
+ <>
+ {viewAs === "tile" ? (
+
+ ) : viewAs === "table" ? (
+
+ ) : (
+
+ )}
+
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/index.js
index b166911a42..281b23cb93 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-import/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/index.js
@@ -54,6 +54,7 @@ const DataImport = ({
getMigrationStatus,
isMigrationInit,
setIsMigrationInit,
+ tReady,
}) => {
const navigate = useNavigate();
@@ -109,10 +110,13 @@ const DataImport = ({
};
useEffect(() => {
- setDocumentTitle(t("DataImport"));
handleMigrationCheck();
}, []);
+ useEffect(() => {
+ if (tReady) setDocumentTitle(t("DataImport"));
+ }, [tReady]);
+
const redirectToWorkspace = (title) => {
switch (title) {
case "GoogleWorkspace":
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
index fc74725cc3..2b9feebcc0 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
@@ -66,7 +66,7 @@ const { EveryDayType, EveryWeekType, EveryMonthType } = AutoBackupPeriod;
class AutomaticBackup extends React.PureComponent {
constructor(props) {
super(props);
- const { t, language } = props;
+ const { t, tReady, language } = props;
moment.locale(language);
this.state = {
@@ -96,7 +96,7 @@ class AutomaticBackup extends React.PureComponent {
this.maxNumberCopiesArray = [];
this.weekdaysLabelArray = [];
- setDocumentTitle(t("AutoBackup"));
+ if (tReady) setDocumentTitle(t("AutoBackup"));
this.getTime();
this.getMonthNumbers();
@@ -170,6 +170,12 @@ class AutomaticBackup extends React.PureComponent {
this.setBasicSettings();
}
+ componentDidUpdate(prevProps) {
+ const { t, tReady } = this.props;
+ if (prevProps.tReady !== tReady && tReady)
+ setDocumentTitle(t("AutoBackup"));
+ }
+
componentWillUnmount() {
const { clearProgressInterval } = this.props;
clearTimeout(this.timerId);
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js
index 83ff9a5d9b..4e0bd6416c 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/manual-backup/index.js
@@ -70,9 +70,9 @@ class ManualBackup extends React.Component {
this.timerId = null;
- const { t } = props;
+ const { t, tReady } = props;
- setDocumentTitle(t("DataBackup"));
+ if (tReady) setDocumentTitle(t("DataBackup"));
this.state = {
selectedFolder: "",
@@ -150,6 +150,13 @@ class ManualBackup extends React.Component {
this.setBasicSettings();
}
+ componentDidUpdate(prevProps) {
+ const { t, tReady } = this.props;
+
+ if (prevProps.tReady !== tReady && tReady)
+ setDocumentTitle(t("DataBackup"));
+ }
+
componentWillUnmount() {
const { clearProgressInterval } = this.props;
clearTimeout(this.timerId);
diff --git a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
index a1f56f8f8c..daa8bca80f 100644
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
@@ -230,11 +230,7 @@ const BackupListModalDialog = (props) => {
onClose={onModalClose}
withFooterBorder
>
-
-
- {t("BackupList")}
-
-
+ {t("BackupList")}
{
- const { t, currentColorScheme, sdkLink, theme } = props;
+ const { t, currentColorScheme, sdkLink, theme, tReady } = props;
const isSmall = useRef(
(() => {
@@ -130,8 +130,6 @@ const PortalIntegration = (props) => {
const [isFlex, setIsFlex] = useState(isSmall.current);
- setDocumentTitle(t("JavascriptSdk"));
-
const navigate = useNavigate();
const navigateToPortal = () => navigate("docspace");
@@ -191,6 +189,10 @@ const PortalIntegration = (props) => {
},
];
+ useEffect(() => {
+ if (tReady) setDocumentTitle(t("JavascriptSdk"));
+ }, [tReady]);
+
const onResize = (entries) => {
const belowThreshold = entries[0].contentRect.width <= 600;
if (belowThreshold !== isSmall.current) {
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js
index 5b895bca99..06da078735 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/PluginSDK/index.js
@@ -47,11 +47,15 @@ const PluginSDK = ({
isEmptyList,
theme,
}) => {
- const { t } = useTranslation(["WebPlugins", "VersionHistory", "Common"]);
+ const { t, ready } = useTranslation([
+ "WebPlugins",
+ "VersionHistory",
+ "Common",
+ ]);
React.useEffect(() => {
- setDocumentTitle(t("WebPlugins:PluginSDK"));
- }, []);
+ if (ready) setDocumentTitle(t("WebPlugins:PluginSDK"));
+ }, [ready]);
const isMobile = currentDeviceType === "mobile";
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/AttributeMapping.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/AttributeMapping.js
index 4254f9f825..47cb463165 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/AttributeMapping.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/AttributeMapping.js
@@ -73,6 +73,8 @@ const AttributeMapping = (props) => {
isUIDisabled,
isDefaultUsersQuotaSet,
+
+ currentColorScheme,
} = props;
const { t } = useTranslation("Ldap");
@@ -232,7 +234,7 @@ const AttributeMapping = (props) => {
components={[
,
]}
@@ -284,7 +286,7 @@ const AttributeMapping = (props) => {
);
};
-export default inject(({ ldapStore, currentQuotaStore }) => {
+export default inject(({ ldapStore, currentQuotaStore, settingsStore }) => {
const {
setMail,
setFirstName,
@@ -310,6 +312,8 @@ export default inject(({ ldapStore, currentQuotaStore }) => {
const { isDefaultUsersQuotaSet } = currentQuotaStore;
+ const { currentColorScheme } = settingsStore;
+
return {
setFirstName,
setSecondName,
@@ -330,5 +334,6 @@ export default inject(({ ldapStore, currentQuotaStore }) => {
isUIDisabled,
isDefaultUsersQuotaSet,
+ currentColorScheme,
};
})(observer(AttributeMapping));
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/LdapFieldComponent.js b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/LdapFieldComponent.js
index ccb0ff1dc1..a9c8c74201 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/LdapFieldComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/LdapFieldComponent.js
@@ -39,7 +39,7 @@ const LdapFieldComponent = (props) => {
name,
onChange,
isPassword,
- ...prop
+ ...rest
} = props;
const onChangeFn = (e) => {
@@ -54,12 +54,12 @@ const LdapFieldComponent = (props) => {
onChange && onChange(e);
};
- const onFocus = (e) => {
- const name = e.target.name;
- if (errors[name]) {
- removeErrorField(name);
- }
- };
+ // const onFocus = (e) => {
+ // const name = e.target.name;
+ // if (errors[name]) {
+ // removeErrorField(name);
+ // }
+ // };
const onBlur = (e) => {
if (e.target.value.trim() === "") {
@@ -68,16 +68,16 @@ const LdapFieldComponent = (props) => {
};
if (isTextArea)
- return ;
+ return ;
if (isPassword)
return (
);
@@ -85,9 +85,9 @@ const LdapFieldComponent = (props) => {
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js
index e0187e6e92..5dc6c7fca2 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SMTPSettings/index.js
@@ -57,8 +57,6 @@ const SMTPSettings = (props) => {
setIsInit(true);
};
useEffect(() => {
- setDocumentTitle(t("Settings:SMTPSettings"));
-
timerId = setTimeout(() => {
setIsLoading(true);
}, 400);
@@ -71,6 +69,10 @@ const SMTPSettings = (props) => {
};
}, []);
+ useEffect(() => {
+ if (ready) setDocumentTitle(t("Settings:SMTPSettings"));
+ }, [ready]);
+
const isLoadingContent = isLoading || !ready;
if (!isLoading && !isInit) return <>;
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js
index a1c76126e1..b2a455689a 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/index.js
@@ -55,14 +55,17 @@ const SingleSignOn = (props) => {
isInit,
currentDeviceType,
} = props;
- const { t } = useTranslation(["SingleSignOn", "Settings"]);
+ const { t, ready } = useTranslation(["SingleSignOn", "Settings"]);
const isMobileView = currentDeviceType === DeviceType.mobile;
useEffect(() => {
isSSOAvailable && !isInit && init();
- setDocumentTitle(t("Settings:SingleSignOn"));
}, []);
+ useEffect(() => {
+ if (ready) setDocumentTitle(t("Settings:SingleSignOn"));
+ }, [ready]);
+
if (!isInit && !isMobileView && isSSOAvailable) return ;
return (
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
index cb47992bf0..b5393cf5c2 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/styled-containers/StyledCertificatesTable.js
@@ -67,6 +67,15 @@ const StyledCertificatesTable = styled.div`
.column-row {
display: flex;
+
+ .description {
+ color: ${(props) =>
+ props.theme.client.settings.integration.sso.textColor};
+ }
+ .error-description {
+ color: ${(props) =>
+ props.theme.client.settings.integration.sso.errorColor};
+ }
}
}
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 394792d3a0..abe35703a6 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
@@ -40,7 +40,6 @@ const StyledModalDialog = styled(ModalDialog)`
.text-area {
width: 488px !important;
- height: 72px !important;
margin-top: 4px;
&-label {
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddIdpCertificateModal.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddIdpCertificateModal.js
index 7ce5603536..c13400af9d 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddIdpCertificateModal.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddIdpCertificateModal.js
@@ -67,6 +67,7 @@ const AddIdpCertificateModal = (props) => {
onChange={setInput}
value={idpCertificate}
placeholder={t("PlaceholderCert")}
+ heightTextArea="72px"
/>
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddSpCertificateModal.js b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddSpCertificateModal.js
index f7841f9229..9664813fc6 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddSpCertificateModal.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/AddSpCertificateModal.js
@@ -84,6 +84,7 @@ const AddSpCertificateModal = (props) => {
value={spCertificate}
isDisabled={isGeneratedCertificate}
placeholder={t("PlaceholderCert")}
+ heightTextArea="72px"
/>
@@ -98,6 +99,7 @@ const AddSpCertificateModal = (props) => {
value={spPrivateKey}
isDisabled={isGeneratedCertificate}
placeholder={t("PlaceholderCert")}
+ heightTextArea="72px"
/>
{
const { t } = useTranslation(["SingleSignOn", "Common"]);
@@ -50,7 +51,6 @@ const CertificatesTable = (props) => {
} = props;
const renderRow = (certificate, index) => {
- console.log(prefix, index);
const onEdit = () => {
prefix === "sp"
? setSpCertificate(certificate, index, true)
@@ -86,6 +86,8 @@ const CertificatesTable = (props) => {
return `${new Date(date).toLocaleDateString()}`;
};
+ const isExpired = moment().isAfter(moment(certificate.expiredDate));
+
return (
@@ -97,7 +99,7 @@ const CertificatesTable = (props) => {
{
this.setState({
isLoading: status,
@@ -207,20 +213,10 @@ class ThirdPartyServices extends React.Component {
const { dialogVisible, isLoading } = this.state;
const { onModalClose, onModalOpen, setConsumer, onChangeLoading } = this;
- const filteredConsumers = consumers.filter(
- (consumer) =>
- consumer.name !== "bitly" &&
- consumer.name !== "wordpress" &&
- consumer.name !== "docusign" &&
- consumer.name !== "clickatell" && //TODO: hide while 2fa by sms is not working
- consumer.name !== "twilio" &&
- consumer.name !== "selectel",
- );
-
- const freeConsumers = filteredConsumers.filter(
+ const freeConsumers = consumers.filter(
(consumer) => consumer.canSet === false,
);
- const paidConsumers = filteredConsumers.filter(
+ const paidConsumers = consumers.filter(
(consumer) => !freeConsumers.includes(consumer),
);
diff --git a/packages/client/src/pages/Profile/Section/Header/index.js b/packages/client/src/pages/Profile/Section/Header/index.js
index c8b895cf74..bd97cb4564 100644
--- a/packages/client/src/pages/Profile/Section/Header/index.js
+++ b/packages/client/src/pages/Profile/Section/Header/index.js
@@ -30,7 +30,9 @@ import ImageReactSvgUrl from "PUBLIC_DIR/images/image.react.svg?url";
import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
+
import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
import { withTranslation } from "react-i18next";
import { useNavigate, useLocation } from "react-router-dom";
import { inject, observer } from "mobx-react";
@@ -39,6 +41,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
import Headline from "@docspace/shared/components/headline/Headline";
import { SectionHeaderSkeleton } from "@docspace/shared/skeletons/sections";
+import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen";
import { DeleteSelfProfileDialog } from "SRC_DIR/components/dialogs";
import { DeleteOwnerProfileDialog } from "SRC_DIR/components/dialogs";
@@ -72,6 +75,7 @@ const Header = (props) => {
showProfileLoader,
setIsLoading,
userId,
+ enabledHotkeys,
} = props;
const navigate = useNavigate();
@@ -152,6 +156,11 @@ const Header = (props) => {
// setFilter(filter);
};
+ useHotkeys("Backspace", onClickBack, {
+ filter: () => !checkDialogsOpen() && enabledHotkeys,
+ filterPreventDefault: false,
+ });
+
if (showProfileLoader) return ;
return (
@@ -219,6 +228,8 @@ export default inject(
peopleStore,
clientLoadingStore,
profileActionsStore,
+ filesStore,
+ mediaViewerDataStore,
}) => {
const { isAdmin } = authStore;
@@ -234,6 +245,9 @@ export default inject(
const { profileClicked } = profileActionsStore;
+ const { enabledHotkeys } = filesStore;
+ const { visible: mediaViewerIsVisible } = mediaViewerDataStore;
+
const { setChangePasswordVisible, setChangeAvatarVisible } =
targetUserStore;
@@ -258,6 +272,8 @@ export default inject(
showProfileLoader,
profileClicked,
+ enabledHotkeys:
+ enabledHotkeys && !mediaViewerIsVisible && !showProfileLoader,
};
},
)(
diff --git a/packages/client/src/pages/Sdk/index.js b/packages/client/src/pages/Sdk/index.js
index 87c3128c14..8d5fe08d7f 100644
--- a/packages/client/src/pages/Sdk/index.js
+++ b/packages/client/src/pages/Sdk/index.js
@@ -262,7 +262,10 @@ const Sdk = ({
: {};
const headerProps = frameConfig?.showSelectorHeader
- ? { withHeader: true, headerProps: { headerLabel: "" } }
+ ? {
+ withHeader: true,
+ headerProps: { headerLabel: "", isCloseable: false },
+ }
: {};
component = (
@@ -301,6 +304,7 @@ const Sdk = ({
currentFolderId={frameConfig?.id}
openRoot={selectorOpenRoot}
descriptionText={formatsDescription[frameConfig?.filterParam] || ""}
+ headerProps={{ isCloseable: false }}
/>
);
break;
diff --git a/packages/client/src/store/FilesActionsStore.js b/packages/client/src/store/FilesActionsStore.js
index 2d5ad5ba02..93d22a772c 100644
--- a/packages/client/src/store/FilesActionsStore.js
+++ b/packages/client/src/store/FilesActionsStore.js
@@ -2538,7 +2538,9 @@ class FilesActionStore {
const urlFilter = getObjectByLocation(window.DocSpace.location);
- const isArchivedRoom = !!(CategoryType.Archive && urlFilter?.folder);
+ const isArchivedRoom = !!(
+ CategoryType.Trash !== categoryType && urlFilter?.folder
+ );
if (this.publicRoomStore.isPublicRoom) {
return this.backToParentFolder();
@@ -2559,10 +2561,11 @@ class FilesActionStore {
return this.moveToRoomsPage();
}
- if (
- categoryType === CategoryType.Personal ||
- categoryType === CategoryType.Trash
- ) {
+ if (categoryType === CategoryType.Trash) {
+ return;
+ }
+
+ if (categoryType === CategoryType.Personal) {
return this.backToParentFolder();
}
diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js
index 80c747e88b..3c26da606a 100644
--- a/packages/client/src/store/HotkeyStore.js
+++ b/packages/client/src/store/HotkeyStore.js
@@ -692,7 +692,7 @@ class HotkeyStore {
const files = await getFilesFromEvent(event);
- createFoldersTree(files, uploadToFolder).then((f) => {
+ createFoldersTree(files).then((f) => {
if (f.length > 0) startUpload(f, null, t);
});
};
diff --git a/packages/doceditor/src/app/(root)/create/page.tsx b/packages/doceditor/src/app/(root)/create/page.tsx
index 4bbf3af410..4a5ab030f2 100644
--- a/packages/doceditor/src/app/(root)/create/page.tsx
+++ b/packages/doceditor/src/app/(root)/create/page.tsx
@@ -25,13 +25,19 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { permanentRedirect, redirect } from "next/navigation";
+import dynamic from "next/dynamic";
import { getBaseUrl } from "@docspace/shared/utils/next-ssr-helper";
+import { EditorConfigErrorType } from "@docspace/shared/enums";
import { createFile, fileCopyAs, getEditorUrl } from "@/utils/actions";
-import CreateFileError from "@/components/CreateFileError";
-import Editor from "@/components/Editor";
-import { EditorConfigErrorType } from "@docspace/shared/enums";
+
+const Editor = dynamic(() => import("@/components/Editor"), {
+ ssr: false,
+});
+const CreateFileError = dynamic(() => import("@/components/CreateFileError"), {
+ ssr: false,
+});
type TSearchParams = {
parentId: string;
diff --git a/packages/doceditor/src/app/(root)/layout.tsx b/packages/doceditor/src/app/(root)/layout.tsx
index 6e4f1b65b6..6e22a44e5a 100644
--- a/packages/doceditor/src/app/(root)/layout.tsx
+++ b/packages/doceditor/src/app/(root)/layout.tsx
@@ -55,18 +55,14 @@ export default async function RootLayout({
return <>;
}
- const startDate = new Date();
const [user, settings, colorTheme] = await Promise.all([
getUser(),
getSettings(),
getColorTheme(),
]);
- const timer = new Date().getTime() - startDate.getTime();
if (settings === "access-restricted") redirect(`${getBaseUrl()}/${settings}`);
- const api_host = process.env.API_HOST?.trim();
-
return (
@@ -82,11 +78,7 @@ export default async function RootLayout({
-
+
{children}
diff --git a/packages/doceditor/src/app/(root)/page.tsx b/packages/doceditor/src/app/(root)/page.tsx
index 553af8bbe3..19d93efbf6 100644
--- a/packages/doceditor/src/app/(root)/page.tsx
+++ b/packages/doceditor/src/app/(root)/page.tsx
@@ -26,6 +26,7 @@
import { headers } from "next/headers";
import Script from "next/script";
+import dynamic from "next/dynamic";
import { getSelectorsByUserAgent } from "react-device-detect";
@@ -34,7 +35,10 @@ import { ValidationStatus } from "@docspace/shared/enums";
import { getData, validatePublicRoomKey } from "@/utils/actions";
import { RootPageProps } from "@/types";
import Root from "@/components/Root";
-import FilePassword from "@/components/file-password";
+
+const FilePassword = dynamic(() => import("@/components/file-password"), {
+ ssr: false,
+});
const initialSearchParams: RootPageProps["searchParams"] = {
fileId: undefined,
diff --git a/packages/doceditor/src/components/Editor.tsx b/packages/doceditor/src/components/Editor.tsx
index 06eb9976b8..add387bab8 100644
--- a/packages/doceditor/src/components/Editor.tsx
+++ b/packages/doceditor/src/components/Editor.tsx
@@ -27,7 +27,7 @@
"use client";
import React from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
import { useTranslation } from "react-i18next";
import { DocumentEditor } from "@onlyoffice/document-editor-react";
@@ -51,7 +51,6 @@ import {
} from "@/utils/events";
import useInit from "@/hooks/useInit";
import useEditorEvents from "@/hooks/useEditorEvents";
-import useFilesSettings from "@/hooks/useFilesSettings";
type IConfigType = IConfig & {
events?: {
@@ -77,6 +76,8 @@ const Editor = ({
errorMessage,
isSkipError,
+ filesSettings,
+
onDownloadAs,
onSDKRequestSharingSettings,
onSDKRequestSaveAs,
@@ -88,9 +89,7 @@ const Editor = ({
}: EditorProps) => {
const { t, i18n } = useTranslation(["Common", "Editor", "DeepLink"]);
- const router = useRouter();
const searchParams = useSearchParams();
- const { filesSettings } = useFilesSettings({});
const openOnNewPage = IS_ZOOM ? false : !filesSettings?.openEditorInSameTab;
diff --git a/packages/doceditor/src/components/Error/Error.tsx b/packages/doceditor/src/components/Error/Error.tsx
index 832c230346..e26f254ea3 100644
--- a/packages/doceditor/src/components/Error/Error.tsx
+++ b/packages/doceditor/src/components/Error/Error.tsx
@@ -9,7 +9,6 @@ import type { TFirebaseSettings } from "@docspace/shared/api/settings/types";
import useI18N from "@/hooks/useI18N";
import useTheme from "@/hooks/useTheme";
import useDeviceType from "@/hooks/useDeviceType";
-import useWhiteLabel from "@/hooks/useWhiteLabel";
import pkg from "../../../package.json";
@@ -18,7 +17,7 @@ import { ErrorProps } from "./Error.types";
const Error = ({ settings, user, error }: ErrorProps) => {
const { i18n } = useI18N({ settings, user });
const { currentDeviceType } = useDeviceType();
- const { logoUrls } = useWhiteLabel();
+
const { theme } = useTheme({ user });
const firebaseHelper = useMemo(() => {
@@ -32,7 +31,6 @@ const Error = ({ settings, user, error }: ErrorProps) => {
errorLog={error}
version={pkg.version}
user={user ?? ({} as TUser)}
- whiteLabelLogoUrls={logoUrls}
firebaseHelper={firebaseHelper}
currentDeviceType={currentDeviceType}
/>
diff --git a/packages/doceditor/src/components/Root.tsx b/packages/doceditor/src/components/Root.tsx
index 378b9aac04..474dc967d6 100644
--- a/packages/doceditor/src/components/Root.tsx
+++ b/packages/doceditor/src/components/Root.tsx
@@ -25,15 +25,21 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
"use client";
+import dynamic from "next/dynamic";
-import React, { useEffect } from "react";
+import React from "react";
import { useTranslation } from "react-i18next";
-import ErrorContainer from "@docspace/shared/components/error-container/ErrorContainer";
+const ErrorContainer = dynamic(
+ () => import("@docspace/shared/components/error-container/ErrorContainer"),
+ {
+ ssr: false,
+ },
+);
import { TResponse } from "@/types";
-import useError from "@/hooks/useError";
+import useError from "@/hooks/useError";
import useRootInit from "@/hooks/useRootInit";
import useDeepLink from "@/hooks/useDeepLink";
import useSelectFileDialog from "@/hooks/useSelectFileDialog";
@@ -44,14 +50,31 @@ import useFilesSettings from "@/hooks/useFilesSettings";
import useUpdateSearchParamId from "@/hooks/useUpdateSearchParamId";
import useStartFillingSelectDialog from "@/hooks/useStartFillingSelectDialog";
-import DeepLink from "./deep-link";
import Editor from "./Editor";
-import SelectFileDialog from "./SelectFileDialog";
-import SelectFolderDialog from "./SelectFolderDialog";
-import SharingDialog from "./ShareDialog";
+
+const DeepLink = dynamic(() => import("./deep-link"), {
+ ssr: false,
+});
+const SelectFileDialog = dynamic(() => import("./SelectFileDialog"), {
+ ssr: false,
+});
+const SelectFolderDialog = dynamic(() => import("./SelectFolderDialog"), {
+ ssr: false,
+});
+const SharingDialog = dynamic(() => import("./ShareDialog"), {
+ ssr: false,
+});
+const StartFillingSelectorDialog = dynamic(
+ () => import("./StartFillingSelectDialog"),
+ {
+ ssr: false,
+ },
+);
+const ConflictResolveDialog = dynamic(() => import("./ConflictResolveDialog"), {
+ ssr: false,
+});
+
import { calculateAsideHeight } from "@/utils";
-import StartFillingSelectorDialog from "./StartFillingSelectDialog";
-import ConflictResolveDialog from "./ConflictResolveDialog";
const Root = ({
settings,
@@ -64,7 +87,6 @@ const Root = ({
doc,
fileId,
hash,
- timer,
}: TResponse) => {
const editorRef = React.useRef(null);
@@ -81,11 +103,6 @@ const Root = ({
const { t } = useTranslation(["Editor", "Common"]);
- useEffect(() => {
- console.log("editor timer: ", timer);
- console.log("openEdit timer: ", config?.timer);
- }, [config?.timer, timer]);
-
useRootInit({
documentType: config?.documentType,
});
@@ -214,6 +231,7 @@ const Root = ({
errorMessage={error?.message}
isSkipError={!!isSkipError}
onDownloadAs={onDownloadAs}
+ filesSettings={filesSettings}
onSDKRequestSharingSettings={onSDKRequestSharingSettings}
onSDKRequestSaveAs={onSDKRequestSaveAs}
onSDKRequestInsertImage={onSDKRequestInsertImage}
diff --git a/packages/doceditor/src/components/Scripts.tsx b/packages/doceditor/src/components/Scripts.tsx
index e5f8e1a0be..7e3ba8617e 100644
--- a/packages/doceditor/src/components/Scripts.tsx
+++ b/packages/doceditor/src/components/Scripts.tsx
@@ -37,7 +37,7 @@ const Scripts = () => {
<>
diff --git a/packages/doceditor/src/components/file-password/index.tsx b/packages/doceditor/src/components/file-password/index.tsx
index 78cf52078e..735ec414b5 100644
--- a/packages/doceditor/src/components/file-password/index.tsx
+++ b/packages/doceditor/src/components/file-password/index.tsx
@@ -178,7 +178,7 @@ const FilePassword = ({ shareKey, title, entryTitle }: FilePasswordProps) => {
id="password"
inputName="password"
placeholder={t("Common:Password")}
- type={InputType.password}
+ inputType={InputType.password}
inputValue={password}
hasError={!!errorMessage}
size={InputSize.large}
diff --git a/packages/doceditor/src/hooks/useFilesSettings.ts b/packages/doceditor/src/hooks/useFilesSettings.ts
index 87343031dd..005b918f94 100644
--- a/packages/doceditor/src/hooks/useFilesSettings.ts
+++ b/packages/doceditor/src/hooks/useFilesSettings.ts
@@ -30,28 +30,21 @@ import { getSettingsFiles } from "@docspace/shared/api/files";
import { TFilesSettings } from "@docspace/shared/api/files/types";
const useFilesSettings = ({}) => {
- const [settings, setSettings] = React.useState({} as TFilesSettings);
-
- const requestRunning = React.useRef(false);
-
- const initSettings = React.useCallback(async () => {
- if (requestRunning.current) return;
-
- requestRunning.current = true;
-
- const res = await getSettingsFiles();
-
- setSettings(res);
- requestRunning.current = false;
- }, []);
+ const [settings, setSettings] = React.useState(
+ {} as TFilesSettings,
+ );
React.useEffect(() => {
- if (settings.extsArchive) return;
+ const initSettings = async () => {
+ const res = await getSettingsFiles();
+
+ setSettings(res);
+ };
+
initSettings();
- }, [initSettings, settings.extsArchive]);
+ }, []);
return { filesSettings: settings };
};
export default useFilesSettings;
-
diff --git a/packages/doceditor/src/hooks/useSocketHelper.ts b/packages/doceditor/src/hooks/useSocketHelper.ts
index 9eeb1a98b7..7ccca3856e 100644
--- a/packages/doceditor/src/hooks/useSocketHelper.ts
+++ b/packages/doceditor/src/hooks/useSocketHelper.ts
@@ -95,7 +95,7 @@ const useSocketHelper = ({ socketUrl, user }: UseSocketHelperProps) => {
});
setSocketHelper(socketIOHelper);
- }, [socketHelper, socketUrl]);
+ }, [socketHelper, socketUrl, user?.id, user?.loginEventId]);
return { socketHelper };
};
diff --git a/packages/doceditor/src/hooks/useTheme.ts b/packages/doceditor/src/hooks/useTheme.ts
index 33330b3c79..b1a2abd991 100644
--- a/packages/doceditor/src/hooks/useTheme.ts
+++ b/packages/doceditor/src/hooks/useTheme.ts
@@ -90,17 +90,17 @@ const useTheme = ({
const isRequestRunning = React.useRef(false);
const getCurrentColorTheme = React.useCallback(async () => {
- if (isRequestRunning.current) return;
+ if (isRequestRunning.current || colorTheme) return;
isRequestRunning.current = true;
const colorThemes = await getAppearanceTheme();
- const colorTheme = colorThemes.themes.find(
+ const curColorTheme = colorThemes.themes.find(
(t) => t.id === colorThemes.selected,
);
isRequestRunning.current = false;
- if (colorTheme) setCurrentColorTheme(colorTheme);
- }, []);
+ if (curColorTheme) setCurrentColorTheme(curColorTheme);
+ }, [colorTheme]);
const getUserTheme = React.useCallback(() => {
const SYSTEM_THEME = getSystemTheme();
diff --git a/packages/doceditor/src/providers/TranslationProvider.tsx b/packages/doceditor/src/providers/TranslationProvider.tsx
index df62ddfa5c..f3556653cb 100644
--- a/packages/doceditor/src/providers/TranslationProvider.tsx
+++ b/packages/doceditor/src/providers/TranslationProvider.tsx
@@ -44,16 +44,9 @@ const TranslationProvider = ({
children,
settings,
user,
- api_host,
- timer,
}: TTranslationProvider) => {
const { i18n } = useI18N({ settings, user });
- React.useEffect(() => {
- console.log("API_HOST: ", api_host);
- console.log("LAYOUT API timer:", timer);
- }, [api_host, timer]);
-
return {children};
};
diff --git a/packages/doceditor/src/providers/index.tsx b/packages/doceditor/src/providers/index.tsx
index 5d955aa434..f1ffa53cde 100644
--- a/packages/doceditor/src/providers/index.tsx
+++ b/packages/doceditor/src/providers/index.tsx
@@ -48,9 +48,9 @@ export type TProviders = {
contextData: TContextData;
};
-const Providers = ({ children, contextData, api_host, timer }: TProviders) => {
+const Providers = ({ children, contextData }: TProviders) => {
return (
-
+
{children}
diff --git a/packages/doceditor/src/types/index.ts b/packages/doceditor/src/types/index.ts
index 739282d2e6..0a39da9771 100644
--- a/packages/doceditor/src/types/index.ts
+++ b/packages/doceditor/src/types/index.ts
@@ -229,6 +229,7 @@ export type EditorProps = {
isSharingAccess?: boolean;
errorMessage?: string;
isSkipError?: boolean;
+ filesSettings: TFilesSettings;
onDownloadAs?: (obj: object) => void;
onSDKRequestSharingSettings?: () => void;
diff --git a/packages/doceditor/src/utils/actions.ts b/packages/doceditor/src/utils/actions.ts
index 8dcdc27b9d..9050912e2b 100644
--- a/packages/doceditor/src/utils/actions.ts
+++ b/packages/doceditor/src/utils/actions.ts
@@ -65,8 +65,6 @@ export async function getFillingSession(
);
try {
- console.log({ request });
-
const response = await fetch(request);
if (response.ok) return await response.json();
diff --git a/packages/login/src/app/layout.tsx b/packages/login/src/app/layout.tsx
index f39c621083..6530a325cd 100644
--- a/packages/login/src/app/layout.tsx
+++ b/packages/login/src/app/layout.tsx
@@ -37,6 +37,7 @@ import { Providers } from "@/providers";
import { getColorTheme, getSettings } from "@/utils/actions";
import "../styles/globals.scss";
+import Scripts from "@/components/Scripts";
export default async function RootLayout({
children,
@@ -136,6 +137,7 @@ export default async function RootLayout({
{children}
+
);
diff --git a/packages/login/src/components/LoginForm/sub-components/EmailContainer.tsx b/packages/login/src/components/LoginForm/sub-components/EmailContainer.tsx
index 61095a6ae1..2f532c486d 100644
--- a/packages/login/src/components/LoginForm/sub-components/EmailContainer.tsx
+++ b/packages/login/src/components/LoginForm/sub-components/EmailContainer.tsx
@@ -98,8 +98,8 @@ const EmailContainer = ({
defaults={DEFAULT_EMAIL_TEXT}
values={{
email: emailFromInvitation,
+ productName: t("Common:ProductName"),
}}
- productName={t("Common:ProductName")}
components={{
1: (
-
-
- {t("PasswordRecoveryTitle")}
-
-
+ {t("PasswordRecoveryTitle")}
-
-
- {t("RegisterTitle")}
-
-
+ {t("RegisterTitle")}
{getDomainsBlock()}
diff --git a/packages/shared/components/aside/Aside.styled.tsx b/packages/shared/components/aside/Aside.styled.tsx
index f83f6a025f..ec8cbfbcf2 100644
--- a/packages/shared/components/aside/Aside.styled.tsx
+++ b/packages/shared/components/aside/Aside.styled.tsx
@@ -27,8 +27,6 @@
import React from "react";
import styled, { css } from "styled-components";
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
-
import { Base } from "../../themes";
import { MOBILE_FOOTER_HEIGHT } from "../../constants";
import { tablet, mobile } from "../../utils";
@@ -114,66 +112,57 @@ const StyledAside = styled(Container)`
`;
StyledAside.defaultProps = { theme: Base };
-const StyledControlContainer = styled.div`
+const StyledHeaderContainer = styled.div<{ withoutBorder?: boolean }>`
display: flex;
-
- width: 17px;
- height: 17px;
- position: absolute;
-
- cursor: pointer;
-
align-items: center;
- justify-content: center;
- z-index: 450;
+ justify-content: space-between;
+ margin: 0 16px;
+ height: 53px;
+ min-height: 53px;
+ position: relative;
- top: 18px;
+ .additional-icons-container {
+ display: flex;
+ margin-inline: 16px 16px;
+ gap: 16px;
+ }
+ .heading {
+ font-family: ${(props) => props.theme.fontFamily};
+ color: ${(props) => props.theme.modalDialog.textColor};
+ font-weight: 700;
+ font-size: 21px;
+ }
+
+ .arrow-button {
+ margin-inline: 0 12px;
+
+ svg {
+ ${({ theme }) =>
+ theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`}
+ }
+ }
+ .close-button {
+ margin-inline: auto 0;
+ min-width: 17px;
+ }
+ .header-component {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
${(props) =>
- props.theme.interfaceDirection === "rtl" ? `right: -27px;` : `left: -27px;`}
-
- @media ${tablet} {
- display: flex;
-
- top: 18px;
-
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? `right: -27px;`
- : `left: -27px;`}
- }
-
- @media ${mobile} {
- display: flex;
-
- top: -27px;
- right: 10px;
- left: unset;
-
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- right: unset;
- left: 10px;
- `
- : css`
- right: 10px;
- left: unset;
- `}
- }
+ !props.withoutBorder &&
+ css`
+ ::after {
+ content: "";
+ border-bottom: ${(props) =>
+ `1px solid ${props.theme.modalDialog.headerBorderColor}`};
+ width: calc(100% + 32px);
+ position: absolute;
+ inset-inline-end: -16px;
+ bottom: 0;
+ }
+ `}
`;
-
-StyledControlContainer.defaultProps = { theme: Base };
-
-const StyledCrossIcon = styled(CrossReactSvg)`
- width: 17px;
- height: 17px;
- z-index: 455;
- path {
- fill: ${(props) => props.theme.catalog.control.fill};
- }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
-export { StyledAside, StyledControlContainer, StyledCrossIcon };
+export { StyledAside, StyledHeaderContainer };
diff --git a/packages/shared/components/aside/Aside.tsx b/packages/shared/components/aside/Aside.tsx
index 8846d1807f..da52d8f2af 100644
--- a/packages/shared/components/aside/Aside.tsx
+++ b/packages/shared/components/aside/Aside.tsx
@@ -27,13 +27,9 @@
import React from "react";
import { Scrollbar } from "../scrollbar";
-
-import {
- StyledAside,
- StyledControlContainer,
- StyledCrossIcon,
-} from "./Aside.styled";
+import { StyledAside } from "./Aside.styled";
import { AsideProps } from "./Aside.types";
+import { AsideHeader } from "./AsideHeader";
const AsidePure = (props: AsideProps) => {
const {
@@ -45,6 +41,8 @@ const AsidePure = (props: AsideProps) => {
contentPaddingBottom,
withoutBodyScroll = false,
onClose,
+ withoutHeader = false,
+ ...rest
} = props;
const contentRef = React.useRef(null);
@@ -58,14 +56,8 @@ const AsidePure = (props: AsideProps) => {
forwardRef={contentRef}
data-testid="aside"
>
- {/* */}
+ {!withoutHeader && }
{withoutBodyScroll ? children : {children}}
-
- {visible && (
-
-
-
- )}
);
};
diff --git a/packages/shared/components/aside/Aside.types.ts b/packages/shared/components/aside/Aside.types.ts
index f74daa4da6..7ab6e26acf 100644
--- a/packages/shared/components/aside/Aside.types.ts
+++ b/packages/shared/components/aside/Aside.types.ts
@@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-export interface AsideProps {
+export type AsideProps = AsideHeaderProps & {
visible: boolean;
scale?: boolean;
className?: string;
@@ -33,8 +33,22 @@ export interface AsideProps {
children: React.ReactNode;
withoutBodyScroll?: boolean;
onClose: () => void;
-}
+ withoutHeader: boolean;
+};
+export interface AsideHeaderProps {
+ header: string | React.ReactNode;
+ className?: string;
+ id?: string;
+ isBackButton?: boolean;
+ isCloseable?: boolean;
+ headerIcons?: { key: string; url: string; onClick: () => void }[];
+ onBackClick?: () => void;
+ onCloseClick?: () => void;
+ style?: React.CSSProperties;
+ isLoading?: boolean;
+ withoutBorder?: boolean;
+}
export interface StyledAsideProps {
visible: boolean;
scale?: boolean;
diff --git a/packages/shared/components/aside/AsideHeader.tsx b/packages/shared/components/aside/AsideHeader.tsx
new file mode 100644
index 0000000000..dddbcb51f5
--- /dev/null
+++ b/packages/shared/components/aside/AsideHeader.tsx
@@ -0,0 +1,123 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import React from "react";
+
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
+import CrossReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
+
+import { IconButton } from "../icon-button";
+import { Text } from "../text";
+import { AsideHeaderProps } from "./Aside.types";
+import { StyledHeaderContainer } from "./Aside.styled";
+import { RectangleSkeleton } from "../../skeletons/rectangle";
+import { Heading, HeadingSize } from "../heading";
+
+const AsideHeader = (props: AsideHeaderProps) => {
+ const {
+ isBackButton = false,
+ onBackClick,
+ onCloseClick,
+ header,
+ headerIcons = [],
+ isCloseable = true,
+ className,
+ id,
+ style,
+ isLoading,
+ withoutBorder = false,
+ } = props;
+
+ const backButtonRender = (
+
+ );
+
+ const closeIconRender = (
+
+ );
+
+ // TODO: Heading is temporary until all dialogues are checked
+
+ const mainComponent = (
+ <>
+ {isBackButton && backButtonRender}
+ {typeof header === "string" ? (
+
+ {header}
+
+ ) : (
+
+ {header}
+
+ )}
+ {headerIcons.length > 0 && (
+
+ {headerIcons.map((item) => (
+
+ ))}
+
+ )}
+ {isCloseable && closeIconRender}
+
+ );
+
+ const loaderComponent = ;
+
+ return (
+
+ {isLoading ? loaderComponent : mainComponent}
+
+ );
+};
+
+export { AsideHeader };
diff --git a/packages/shared/components/aside/index.tsx b/packages/shared/components/aside/index.tsx
index 6cf8688684..c065ddb580 100644
--- a/packages/shared/components/aside/index.tsx
+++ b/packages/shared/components/aside/index.tsx
@@ -25,3 +25,4 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
export { Aside } from "./Aside";
+export { AsideHeader } from "./AsideHeader";
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
index 4599e616a8..923816e8e1 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
@@ -73,13 +73,13 @@ const StyledContent = styled.div`
`;
StyledContent.defaultProps = { theme: Base };
-const StyledHeaderContent = styled.div`
- display: flex;
- align-items: center;
- border-bottom: ${(props) =>
- props.theme.contextMenuButton.headerContent.borderBottom};
-`;
-StyledHeaderContent.defaultProps = { theme: Base };
+// const StyledHeaderContent = styled.div`
+// display: flex;
+// align-items: center;
+// border-bottom: ${(props) =>
+// props.theme.contextMenuButton.headerContent.borderBottom};
+// `;
+// StyledHeaderContent.defaultProps = { theme: Base };
const StyledBodyContent = styled.div`
position: relative;
@@ -101,4 +101,4 @@ const StyledBodyContent = styled.div`
`;
StyledBodyContent.defaultProps = { theme: Base };
-export { StyledBodyContent, StyledHeaderContent, StyledContent, StyledOuter };
+export { StyledBodyContent, StyledContent, StyledOuter };
diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.tsx b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
index a304537ab0..fb8437ae97 100644
--- a/packages/shared/components/context-menu-button/ContextMenuButton.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.tsx
@@ -38,13 +38,11 @@ import { DropDown } from "../drop-down";
import { IconButton } from "../icon-button";
import { Backdrop } from "../backdrop";
import { Aside } from "../aside";
-import { Heading, HeadingLevel, HeadingSize } from "../heading";
import { Link } from "../link";
import { ContextMenuModel } from "../context-menu";
import {
StyledBodyContent,
- StyledHeaderContent,
StyledContent,
StyledOuter,
} from "./ContextMenuButton.styled";
@@ -297,9 +295,10 @@ const ContextMenuButtonPure = ({
scale={false}
zIndex={310}
onClose={onCloseAction}
+ header={asideHeader}
>
-
+ {/*
{asideHeader}
-
+ */}
{state.data.map(
(item: ContextMenuModel, index: number) =>
diff --git a/packages/shared/components/drop-down/DropDown.styled.ts b/packages/shared/components/drop-down/DropDown.styled.ts
index 36418faf1c..bb622db405 100644
--- a/packages/shared/components/drop-down/DropDown.styled.ts
+++ b/packages/shared/components/drop-down/DropDown.styled.ts
@@ -54,6 +54,7 @@ const StyledDropdown = styled.div<{
`}
height: fit-content;
position: absolute;
+ overflow: hidden;
${(props) => props.manualWidth && `width: ${props.manualWidth};`}
${(props) =>
diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts
index 2e59390171..90bc0cf27f 100644
--- a/packages/shared/components/filter/Filter.styled.ts
+++ b/packages/shared/components/filter/Filter.styled.ts
@@ -26,8 +26,6 @@
import styled, { css } from "styled-components";
-import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
-
import { tablet, mobile } from "../../utils";
import { Base } from "../../themes";
import { TViewAs } from "../../types";
@@ -218,44 +216,6 @@ const StyledFilterBlock = styled.div`
StyledFilterBlock.defaultProps = { theme: Base };
-const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
- height: 53px;
- min-height: 53px;
-
- padding: 0 16px;
- margin: 0;
-
- box-sizing: border-box;
-
- border-bottom: ${(props) =>
- props.isSelector ? "none" : props.theme.filterInput.filter.border};
-
- display: flex;
- align-items: center;
- justify-content: ${(props) => (props.isSelector ? "start" : "space-between")};
-
- h1 {
- font-weight: 700;
- }
-
- .arrow-button {
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- margin-left: 12px;
- `
- : css`
- margin-right: 12px;
- `}
- }
-
- svg {
- cursor: pointer;
- }
-`;
-
-StyledFilterBlockHeader.defaultProps = { theme: Base };
-
const StyledFilterBlockItem = styled.div<{
withoutHeader: boolean;
isFirst?: boolean;
@@ -490,59 +450,6 @@ const StyledFilterBlockFooter = styled.div`
StyledFilterBlockFooter.defaultProps = { theme: Base };
-const StyledControlContainer = styled.div`
- display: flex;
-
- width: 24px;
- height: 24px;
- position: absolute;
-
- border-radius: 100px;
- cursor: pointer;
-
- align-items: center;
- justify-content: center;
- z-index: 450;
-
- top: 14px;
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- right: -34px;
- `
- : css`
- left: -34px;
- `}
-
- @media ${mobile} {
- top: -34px;
- ${(props) =>
- props.theme.interfaceDirection === "rtl"
- ? css`
- left: 10px;
- right: unset;
- `
- : css`
- right: 10px;
-
- left: unset;
- `}
- }
-`;
-
-StyledControlContainer.defaultProps = { theme: Base };
-
-const StyledCrossIcon = styled(CrossIcon)`
- width: 17px;
- height: 17px;
- z-index: 455;
- path {
- fill: ${(props) => props.theme.catalog.control.fill};
- }
-`;
-
-StyledCrossIcon.defaultProps = { theme: Base };
-
const selectedViewIcon = css`
svg {
path {
@@ -712,7 +619,6 @@ StyledSortButton.defaultProps = { theme: Base };
export {
StyledSortButton,
StyledFilterBlock,
- StyledFilterBlockHeader,
StyledFilterBlockItem,
StyledFilterBlockItemHeader,
StyledFilterBlockItemContent,
@@ -726,8 +632,6 @@ export {
StyledFilterBlockItemCheckboxContainer,
StyledFilterBlockItemSeparator,
StyledFilterBlockFooter,
- StyledControlContainer,
- StyledCrossIcon,
};
export { StyledFilterInput, StyledSearchInput, StyledButton };
diff --git a/packages/shared/components/filter/sub-components/FilterBlock.tsx b/packages/shared/components/filter/sub-components/FilterBlock.tsx
index 857cddd827..b57dc5d0c2 100644
--- a/packages/shared/components/filter/sub-components/FilterBlock.tsx
+++ b/packages/shared/components/filter/sub-components/FilterBlock.tsx
@@ -37,19 +37,11 @@ import { FilterBlockLoader } from "../../../skeletons/filter";
import { Backdrop } from "../../backdrop";
import { Button, ButtonSize } from "../../button";
-import { Heading, HeadingLevel, HeadingSize } from "../../heading";
-import { IconButton } from "../../icon-button";
import { Scrollbar } from "../../scrollbar";
import { Portal } from "../../portal";
import { TSelectorItem } from "../../selector";
-import {
- StyledControlContainer,
- StyledCrossIcon,
- StyledFilterBlock,
- StyledFilterBlockFooter,
- StyledFilterBlockHeader,
-} from "../Filter.styled";
+import { StyledFilterBlock, StyledFilterBlockFooter } from "../Filter.styled";
import { FilterBlockProps, TGroupItem, TItem } from "../Filter.types";
import {
@@ -58,6 +50,7 @@ import {
} from "../Filter.utils";
import FilterBlockItem from "./FilterBlockItem";
+import { AsideHeader } from "../../aside";
const FilterBlock = ({
selectedFilterValue,
@@ -496,10 +489,12 @@ const FilterBlock = ({
withHeader
headerProps={{
onBackClick: onArrowClick,
+ onCloseClick: hideFilterBlock,
headerLabel: selectorLabel,
withoutBackButton: false,
}}
currentUserId={userId}
+ onClose={hideFilterBlock}
/>
) : showSelector.type === FilterSelectorTypes.groups ? (
) : (
)}
-
-
-
) : (
-
-
- {filterHeader}
-
- {showClearFilterBtn && (
-
- )}
-
+
+
{isLoading ? (
-
-
-
-
)}
diff --git a/packages/shared/components/input-block/InputBlock.tsx b/packages/shared/components/input-block/InputBlock.tsx
index 49dfc1b599..bb32fd65f3 100644
--- a/packages/shared/components/input-block/InputBlock.tsx
+++ b/packages/shared/components/input-block/InputBlock.tsx
@@ -160,23 +160,25 @@ const InputBlock = ({
forwardedRef={forwardedRef}
/>
-
-
-
-
-
+ {!isDisabled && (
+
+
+
+
+
+ )}
);
};
diff --git a/packages/shared/components/modal-dialog/ModalDialog.styled.ts b/packages/shared/components/modal-dialog/ModalDialog.styled.ts
index 123c4c98e2..f6cdee154e 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.styled.ts
+++ b/packages/shared/components/modal-dialog/ModalDialog.styled.ts
@@ -147,24 +147,6 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
`}
`;
-const StyledHeader = styled.div<{ currentDisplayType?: ModalDialogType }>`
- display: flex;
- align-items: center;
- border-bottom: ${(props) =>
- `1px solid ${props.theme.modalDialog.headerBorderColor}`};
- height: 52px;
- margin-bottom: ${(props) =>
- props.currentDisplayType === "aside" ? "0px" : "16px"};
- padding: 0 16px 0;
-
- .heading {
- font-family: ${(props) => props.theme.fontFamily};
- color: ${(props) => props.theme.modalDialog.textColor};
- font-weight: 700;
- font-size: 21px;
- }
-`;
-
const StyledBody = styled(Box)<{
currentDisplayType?: ModalDialogType;
hasFooter?: boolean;
@@ -241,7 +223,6 @@ const StyledFooter = styled.div<{
`;
Dialog.defaultProps = { theme: Base };
-StyledHeader.defaultProps = { theme: Base };
Content.defaultProps = { theme: Base };
-export { StyledModal, StyledHeader, Content, Dialog, StyledBody, StyledFooter };
+export { StyledModal, Content, Dialog, StyledBody, StyledFooter };
diff --git a/packages/shared/components/modal-dialog/ModalDialog.tsx b/packages/shared/components/modal-dialog/ModalDialog.tsx
index a729a0b7cc..0615079bb3 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.tsx
+++ b/packages/shared/components/modal-dialog/ModalDialog.tsx
@@ -87,6 +87,8 @@ const ModalDialog = ({
withBodyScroll = false,
withFooterBorder = false,
containerVisible = false,
+
+ ...rest
}: ModalDialogProps) => {
const onCloseEvent = React.useCallback(() => {
if (embedded) return;
@@ -173,6 +175,7 @@ const ModalDialog = ({
isCloseable={isCloseable && !embedded}
embedded={embedded}
blur={blur}
+ {...rest}
/>
}
/>
diff --git a/packages/shared/components/modal-dialog/ModalDialog.types.ts b/packages/shared/components/modal-dialog/ModalDialog.types.ts
index 6c1a2d73d2..df6afebc19 100644
--- a/packages/shared/components/modal-dialog/ModalDialog.types.ts
+++ b/packages/shared/components/modal-dialog/ModalDialog.types.ts
@@ -24,6 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { AsideHeaderProps } from "../aside/Aside.types";
import { ModalDialogType } from "./ModalDialog.enums";
export type ModalDialogTypeDetailed = {
@@ -134,7 +135,7 @@ export interface ModalDialogBackdropProps {
modalSwipeOffset?: number;
}
-export interface ModalSubComponentsProps {
+export type ModalSubComponentsProps = AsideHeaderProps & {
id?: string;
style?: React.CSSProperties;
className?: string;
@@ -160,4 +161,4 @@ export interface ModalSubComponentsProps {
embedded?: boolean;
withForm?: boolean;
blur?: number;
-}
+};
diff --git a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx b/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
deleted file mode 100644
index 5e11b8c91b..0000000000
--- a/packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-// (c) Copyright Ascensio System SIA 2009-2024
-//
-// This program is a free software product.
-// You can redistribute it and/or modify it under the terms
-// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
-// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
-// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
-// any third-party rights.
-//
-// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
-// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
-// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
-//
-// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
-//
-// The interactive user interfaces in modified source and object code versions of the Program must
-// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
-//
-// Pursuant to Section 7(b) of the License you must retain the original Product logo when
-// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
-// trademark law for use of our trademarks.
-//
-// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
-// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
-// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-
-import React from "react";
-import styled, { css } from "styled-components";
-
-import CrossIconReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
-
-import { IconButton } from "../../icon-button";
-import { mobile } from "../../../utils";
-import { Base } from "../../../themes";
-
-import { ModalDialogCloseButtonProps } from "../ModalDialog.types";
-import { ModalDialogType } from "../ModalDialog.enums";
-
-const StyledCloseButtonWrapper = styled.div<{
- currentDisplayType: ModalDialogType;
-}>`
- width: 17px;
- height: 17px;
-
- display: flex;
- align-items: center;
- justify-content: center;
-
- cursor: pointer;
- position: absolute;
-
- ${(props) =>
- props.currentDisplayType === "modal"
- ? css`
- top: 18px;
-
- ${props.theme.interfaceDirection === "rtl"
- ? `left: -30px;`
- : `right: -30px;`}
-
- @media ${mobile} {
- ${props.theme.interfaceDirection === "rtl"
- ? `left: 10px;`
- : `right: 10px;`}
- top: -27px;
- }
- `
- : css`
- top: 18px;
- ${props.theme.interfaceDirection === "rtl"
- ? `right: -27px;`
- : `left: -27px;`}
- @media ${mobile} {
- top: -27px;
- ${props.theme.interfaceDirection === "rtl"
- ? css`
- right: auto;
- left: 10px;
- `
- : css`
- left: auto;
- right: 10px;
- `}
- }
- `}
-
- .close-button, .close-button:hover {
- cursor: pointer;
- path {
- stroke: ${(props) => props.theme.modalDialog.closeButton.fillColor};
- }
- }
-`;
-
-StyledCloseButtonWrapper.defaultProps = { theme: Base };
-
-const CloseButton = ({
- currentDisplayType,
-
- onClick,
-}: ModalDialogCloseButtonProps) => {
- return (
-
-
-
- );
-};
-
-export { CloseButton };
diff --git a/packages/shared/components/modal-dialog/sub-components/Modal.tsx b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
index cbcd04703d..a29a2eac34 100644
--- a/packages/shared/components/modal-dialog/sub-components/Modal.tsx
+++ b/packages/shared/components/modal-dialog/sub-components/Modal.tsx
@@ -30,18 +30,15 @@ import { isIOS, isMobileOnly, isSafari } from "react-device-detect";
import { classNames } from "../../../utils";
import { DialogSkeleton, DialogAsideSkeleton } from "../../../skeletons";
-import { Heading, HeadingSize } from "../../heading";
import { Scrollbar } from "../../scrollbar";
-
+import { AsideHeader } from "../../aside";
import {
StyledModal,
- StyledHeader,
Content,
Dialog,
StyledBody,
StyledFooter,
} from "../ModalDialog.styled";
-import { CloseButton } from "./CloseButton";
import { ModalBackdrop } from "./ModalBackdrop";
import { FormWrapper } from "./FormWrapper";
import { ModalSubComponentsProps } from "../ModalDialog.types";
@@ -68,10 +65,12 @@ const Modal = ({
modalSwipeOffset,
containerVisible,
isDoubleFooterLine,
- isCloseable,
+
embedded,
withForm,
blur,
+
+ ...rest
}: ModalSubComponentsProps) => {
const contentRef = React.useRef
(null);
@@ -132,7 +131,6 @@ const Modal = ({
className={visible ? "modal-backdrop-active backdrop-active" : ""}
visible
zIndex={zIndex}
- modalSwipeOffset={modalSwipeOffset}
>