{isLoading ? (
-
-
-
-
)}
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..77ef900f47 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);
@@ -158,12 +157,6 @@ const Modal = ({
embedded={embedded}
ref={contentRef}
>
- {isCloseable && (
-
- )}
{isLoading ? (
currentDisplayType === "modal" ? (
{header && (
-
+ header={headerComponent}
+ onCloseClick={onClose}
+ {...(currentDisplayType === "modal" && {
+ style: { marginBottom: "16px" },
+ })}
+ {...rest}
+ />
)}
+
{body && (
= ({
onClose={onRecoverModalClose}
displayType={ModalDialogType.modal}
>
-
-
- {t("Common:RecoverTitle")}
-
-
+ {t("Common:RecoverTitle")}
{
const infoPanelRef = useRef(null);
- const closeInfoPanel = () => setIsVisible?.(false);
-
useEffect(() => {
const onMouseDown = (e: MouseEvent) => {
const target = e.target as HTMLElement;
@@ -74,13 +67,7 @@ const InfoPanel = ({
id="InfoPanelWrapper"
ref={infoPanelRef}
>
-
-
-
-
-
- {children}
-
+ {children}
);
diff --git a/packages/shared/components/selector/Selector.styled.ts b/packages/shared/components/selector/Selector.styled.ts
index a98ff30cfc..7246ee7de3 100644
--- a/packages/shared/components/selector/Selector.styled.ts
+++ b/packages/shared/components/selector/Selector.styled.ts
@@ -63,8 +63,11 @@ const StyledSelector = styled.div`
overflow: hidden;
`;
-const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
- width: calc(100% - 32px);
+const StyledHeader = styled.div<{
+ withoutBorder?: boolean;
+ withoutIcon: boolean;
+}>`
+ width: calc(100% - 53px);
min-height: 53px;
height: 53px;
max-height: 53px;
@@ -82,6 +85,7 @@ const StyledHeader = styled.div<{ withoutBorder?: boolean }>`
.arrow-button {
cursor: pointer;
margin-right: 12px;
+ min-width: 17px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
diff --git a/packages/shared/components/selector/Selector.types.ts b/packages/shared/components/selector/Selector.types.ts
index 1e3714a6e4..5cdae0d369 100644
--- a/packages/shared/components/selector/Selector.types.ts
+++ b/packages/shared/components/selector/Selector.types.ts
@@ -73,6 +73,8 @@ export type BreadCrumbsProps = {
export type HeaderProps = {
headerLabel: string;
+ onCloseClick: () => void;
+ isCloseable?: boolean;
} & THeaderBackButton;
export type TSelectorHeader =
diff --git a/packages/shared/components/selector/sub-components/Header.tsx b/packages/shared/components/selector/sub-components/Header.tsx
index a3e781c5c1..47fc3518bf 100644
--- a/packages/shared/components/selector/sub-components/Header.tsx
+++ b/packages/shared/components/selector/sub-components/Header.tsx
@@ -26,34 +26,29 @@
import React from "react";
-import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
-
-import { IconButton } from "../../icon-button";
-import { Heading } from "../../heading";
-
-import { StyledHeader } from "../Selector.styled";
import { HeaderProps } from "../Selector.types";
+import { AsideHeader } from "../../aside";
const Header = React.memo(
({
onBackClick,
+ onCloseClick,
withoutBackButton,
headerLabel,
withoutBorder,
+ isCloseable,
}: HeaderProps) => {
return (
-
- {!withoutBackButton && typeof withoutBackButton === "boolean" && (
-
- )}
-
- {headerLabel}
-
+
);
},
);
diff --git a/packages/shared/selectors/Files/FilesSelector.types.ts b/packages/shared/selectors/Files/FilesSelector.types.ts
index 9d68481865..a15b528245 100644
--- a/packages/shared/selectors/Files/FilesSelector.types.ts
+++ b/packages/shared/selectors/Files/FilesSelector.types.ts
@@ -28,6 +28,7 @@ import { TSelectorItem } from "../../components/selector";
import {
TBreadCrumb,
TInfoBar,
+ TSelectorHeader,
} from "../../components/selector/Selector.types";
import {
TFileSecurity,
@@ -143,7 +144,8 @@ export type TSelectedFileInfo = {
export type TGetIcon = (size: number, fileExst: string) => string;
-export type FilesSelectorProps = TInfoBar &
+export type FilesSelectorProps = TSelectorHeader &
+ TInfoBar &
(
| {
getIcon: TGetIcon;
diff --git a/packages/shared/selectors/Files/index.tsx b/packages/shared/selectors/Files/index.tsx
index ddcd246312..d038133895 100644
--- a/packages/shared/selectors/Files/index.tsx
+++ b/packages/shared/selectors/Files/index.tsx
@@ -114,6 +114,7 @@ const FilesSelectorComponent = ({
createDefineRoomType,
withInfoBar,
infoBarData,
+ headerProps,
}: FilesSelectorProps) => {
const theme = useTheme();
const { t } = useTranslation(["Common"]);
@@ -475,8 +476,15 @@ const FilesSelectorComponent = ({
openRoot,
]);
- const headerProps: TSelectorHeader = withHeader
- ? { withHeader, headerProps: { headerLabel } }
+ const headerSelectorProps: TSelectorHeader = withHeader
+ ? {
+ withHeader,
+ headerProps: {
+ ...headerProps,
+ headerLabel,
+ onCloseClick: onCancel,
+ },
+ }
: {};
const withSearch = withSearchProp
@@ -553,7 +561,7 @@ const FilesSelectorComponent = ({
const SelectorBody = (
{SelectorBody}