IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'hotfix/v2.6.1' of github.com:ONLYOFFICE/DocSpace-client into hotfix/v2.6.1

Browse Source 
# Conflicts:
#	packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
This commit is contained in:
Akmal Isomadinov 2024-08-26 19:32:47 +05:00
commit ee552fd205
51 changed files with 360 additions and 798 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/client/src/components/FilesSelector/FilesSelector.types.ts
View File

@ -29,12 +29,15 @@ import {
TFilesSettings,
TFolder,
} from "@docspace/shared/api/files/types";
import { TBreadCrumb } from "@docspace/shared/components/selector/Selector.types";
import {
TBreadCrumb,
TSelectorHeader,
} from "@docspace/shared/components/selector/Selector.types";
import { DeviceType } from "@docspace/shared/enums";
import { TTheme } from "@docspace/shared/themes";
import SocketIOHelper from "@docspace/shared/utils/socket";
export type FilesSelectorProps = {
export type FilesSelectorProps = TSelectorHeader & {
isPanelVisible: boolean;
// withoutImmediatelyClose: boolean;
isThirdParty: boolean;

2
packages/client/src/components/FilesSelector/index.tsx
View File

@ -140,6 +140,7 @@ const FilesSelectorWrapper = ({
openRoot,
filesSettings,
headerProps,
}: FilesSelectorProps) => {
const { t }: { t: TTranslation } = useTranslation([
"Files",
@ -392,6 +393,7 @@ const FilesSelectorWrapper = ({
getFilesArchiveError={getFilesArchiveError}
withCreate={(isMove || isCopy || isRestore || isRestoreAll) ?? false}
filesSettings={filesSettings}
headerProps={headerProps}
/>
);
};

3
packages/client/src/components/RoomsSelectorInput/index.js
View File

@ -105,7 +105,7 @@ const RoomsSelectorInput = (props) => {
submitButtonLabel={submitButtonLabel}
onSubmit={handleOnSubmit}
withHeader={withHeader}
headerProps={headerProps}
headerProps={{ ...headerProps, onCloseClick: onClose }}
setIsDataReady={setIsDataReady}
roomType={roomType}
/>
@ -137,6 +137,7 @@ const RoomsSelectorInput = (props) => {
withoutBodyScroll
zIndex={310}
onClose={onClose}
withoutHeader
>
{SelectorBody}
</Aside>

1
packages/client/src/components/dialogs/ChangePortalOwnerDialog/index.js
View File

@ -154,6 +154,7 @@ const ChangePortalOwnerDialog = ({
disableSubmitButton={false}
withHeader
headerProps={{
onCloseClick: onCloseAction,
onBackClick,
withoutBackButton: false,
headerLabel: "",

6
packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js
View File

@ -97,11 +97,7 @@ const ChangePricingPlanDialog = ({
isLarge
isLoading={!ready}
>
<ModalDialog.Header>
<Text isBold fontSize="21px">
{t("ChangePricingPlan")}
</Text>
</ModalDialog.Header>
<ModalDialog.Header>{t("ChangePricingPlan")}</ModalDialog.Header>
<ModalDialog.Body>
<Text fontSize="13px" isBold className="cannot-downgrade-plan">
{t("CannotChangePlan")}

36
packages/client/src/components/dialogs/ChangeStorageQuotaDialog/StyledComponent.js
View File

@ -1,36 +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 styled from "styled-components";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
const StyledModalDialog = styled(ModalDialog)`
p {
margin-bottom: 16px;
}
`;
export default StyledModalDialog;

5
packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js
View File

@ -34,7 +34,6 @@ import { toastr } from "@docspace/shared/components/toast";
import { setTenantQuotaSettings } from "@docspace/shared/api/settings";
import QuotaForm from "../../../components/QuotaForm";
import StyledModalDialog from "./StyledComponent";
const ChangeStorageQuotaDialog = (props) => {
const {
@ -115,7 +114,7 @@ const ChangeStorageQuotaDialog = (props) => {
};
return (
<StyledModalDialog visible={isVisible} onClose={onCloseClick}>
<ModalDialog visible={isVisible} onClose={onCloseClick}>
<ModalDialog.Header>
{isDisableQuota
? t("Common:DisableStorageQuota")
@ -159,7 +158,7 @@ const ChangeStorageQuotaDialog = (props) => {
scale
/>
</ModalDialog.Footer>
</StyledModalDialog>
</ModalDialog>
);
};

15
packages/client/src/components/dialogs/CreateEditRoomDialog/CreateRoomDialog.js
View File

@ -33,7 +33,6 @@ import TagHandler from "./handlers/TagHandler";
import SetRoomParams from "./sub-components/SetRoomParams";
import RoomTypeList from "./sub-components/RoomTypeList";
import DialogHeader from "./sub-components/DialogHeader";
const StyledModalDialog = styled(ModalDialog)`
.header-with-button {
@ -161,6 +160,10 @@ const CreateRoomDialog = ({
onClose();
};
const dialogHeader = roomParams.type
? t("ChooseRoomType")
: t("Files:CreateRoom");
return (
<StyledModalDialog
displayType="aside"
@ -170,14 +173,10 @@ const CreateRoomDialog = ({
isScrollLocked={isScrollLocked}
withFooterBorder
isOauthWindowOpen={isOauthWindowOpen}
isBackButton={roomParams.type}
onBackClick={goBack}
>
<ModalDialog.Header>
<DialogHeader
disabledIcon={Boolean(startRoomType)}
isChooseRoomType={!roomParams.type}
onArrowClick={goBack}
/>
</ModalDialog.Header>
<ModalDialog.Header>{dialogHeader}</ModalDialog.Header>
<ModalDialog.Body>
{!roomParams.type ? (

5
packages/client/src/components/dialogs/CreateEditRoomDialog/EditRoomDialog.js
View File

@ -28,7 +28,6 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
import TagHandler from "./handlers/TagHandler";
import SetRoomParams from "./sub-components/SetRoomParams";
import DialogHeader from "./sub-components/DialogHeader";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { Button } from "@docspace/shared/components/button";
@ -132,9 +131,7 @@ const EditRoomDialog = ({
isScrollLocked={isScrollLocked}
withFooterBorder
>
<ModalDialog.Header>
<DialogHeader isEdit />
</ModalDialog.Header>
<ModalDialog.Header>{t("RoomEditing")}</ModalDialog.Header>
<ModalDialog.Body>
<SetRoomParams

67
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/DialogHeader.js
View File

@ -1,67 +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 ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
import React from "react";
import { withTranslation } from "react-i18next";
import withLoader from "@docspace/client/src/HOCs/withLoader";
import { IconButton } from "@docspace/shared/components/icon-button";
import CreateEditRoomDilogHeaderLoader from "@docspace/shared/skeletons/create-edit-room/DilogHeader";
const DialogHeader = ({
t,
isEdit,
isChooseRoomType,
onArrowClick,
disabledIcon,
}) => {
return (
<>
{isEdit ? (
<span>{t("RoomEditing")}</span>
) : isChooseRoomType ? (
<span>{t("ChooseRoomType")}</span>
) : (
<div className="header-with-button">
{!disabledIcon && (
<IconButton
size={17}
iconName={ArrowPathReactSvgUrl}
className="sharing_panel-arrow"
onClick={onArrowClick}
/>
)}
<div>{t("Files:CreateRoom")}</div>
</div>
)}
</>
);
};
export default withTranslation(["CreateEditRoomDialog", "Files"])(
withLoader(DialogHeader)(<CreateEditRoomDilogHeaderLoader />),
);

1
packages/client/src/components/dialogs/DataReassignmentDialog/index.js
View File

@ -227,6 +227,7 @@ const DataReassignmentDialog = ({
withCancelButton
cancelButtonLabel=""
headerProps={{
onCloseClick: onClose,
onBackClick: onClosePeopleSelector,
withoutBackButton: false,
headerLabel: "",

2
packages/client/src/components/panels/AddUsersPanel/index.tsx
View File

@ -529,6 +529,7 @@ const AddUsersPanel = ({
visible={visible}
onClose={onClosePanels}
withoutBodyScroll
withoutHeader
>
<Selector
withHeader
@ -539,6 +540,7 @@ const AddUsersPanel = ({
withoutBackButton: false,
withoutBorder: true,
onBackClick,
onCloseClick: onClosePanels,
}}
onSelect={onSelect}
renderCustomItem={renderCustomItem}

8
packages/client/src/components/panels/ChangeOwnerPanel/index.js
View File

@ -26,7 +26,6 @@
import React from "react";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Heading } from "@docspace/shared/components/heading";
import { Aside } from "@docspace/shared/components/aside";
import { Button } from "@docspace/shared/components/button";
import { Text } from "@docspace/shared/components/text";
@ -38,7 +37,6 @@ import {
StyledAsidePanel,
StyledContent,
StyledFooter,
StyledHeaderContent,
StyledBody,
} from "../StyledPanels";
import { inject, observer } from "mobx-react";
@ -116,13 +114,9 @@ class ChangeOwnerComponent extends React.Component {
className="header_aside-panel"
visible={visible}
onClose={this.onClose}
header={t("ChangeOwner", { fileName })}
>
<StyledContent>
<StyledHeaderContent>
<Heading className="sharing_panel-header" size="medium" truncate>
{t("ChangeOwner", { fileName })}
</Heading>
</StyledHeaderContent>
<StyledBody>
<div className="change-owner_body">
<Link

2
packages/client/src/components/panels/ChangeRoomOwnerPanel/index.js
View File

@ -120,6 +120,7 @@ const ChangeRoomOwner = (props) => {
className="header_aside-panel"
visible={visible}
onClose={onClose}
withoutHeader
withoutBodyScroll
>
<PeopleSelector
@ -133,6 +134,7 @@ const ChangeRoomOwner = (props) => {
disableSubmitButton={false}
withHeader
headerProps={{
onCloseClick: onClose,
onBackClick,
withoutBackButton: !showBackButton,
headerLabel: t("Files:ChangeTheRoomOwner"),

4
packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js
View File

@ -28,10 +28,6 @@ import styled, { css } from "styled-components";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
const StyledModalDialog = styled(ModalDialog)`
.modal-header {
margin: 0;
}
.modal-body {
padding: 0;
}

10
packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
View File

@ -43,16 +43,6 @@ const StyledHotkeysPanel = styled.div`
}
}
.hotkeys_header {
padding: 0 16px;
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
.hotkeys_heading {
font-weight: 700;
font-size: 18px;
}
}
.hotkeys_sub-header {
font-weight: 700;
font-size: 16px;

4
packages/client/src/components/panels/HotkeysPanel/index.js
View File

@ -90,10 +90,8 @@ const HotkeyPanel = ({
visible={visible}
onClose={onClose}
withoutBodyScroll={true}
header={t("Common:Hotkeys")}
>
<div className="hotkeys_header">
<Heading className="hotkeys_heading">{t("Common:Hotkeys")}</Heading>
</div>
<StyledScrollbar ref={scrollRef}>
<Heading className="hotkeys_sub-header">
{t("HotkeysNavigation")}

44
packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
View File

@ -38,7 +38,6 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
import { mobile, commonIconsStyles } from "@docspace/shared/utils";
import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg";
import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg";
import { isMobile, desktop, commonInputStyles } from "@docspace/shared/utils";
import Base from "@docspace/shared/themes/base";
@ -124,24 +123,15 @@ const ScrollList = styled.div`
}
`;
const StyledBlock = styled.div`
padding: ${(props) => (props.noPadding ? "0px" : "0 16px")};
const StyledExternalLink = styled.div`
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
`;
StyledBlock.defaultProps = { theme: Base };
const StyledInviteUserBody = styled.div`
display: flex;
flex-direction: column;
overflow: auto;
`;
const StyledHeading = styled(Heading)`
font-weight: 700;
font-size: 18px;
`;
const StyledSubHeader = styled(Heading)`
font-weight: 700;
font-size: 16px;
@ -493,25 +483,6 @@ const StyledToggleButton = styled(ToggleButton)`
margin-top: -4px;
`;
const StyledControlContainer = styled.div`
width: 17px;
height: 17px;
position: absolute;
cursor: pointer;
align-items: center;
justify-content: center;
z-index: 450;
@media ${mobile} {
display: flex;
top: -27px;
right: 10px;
left: unset;
}
`;
const StyledInviteLanguage = styled.div`
padding-left: 16px;
padding-right: 16px;
@ -566,14 +537,6 @@ const StyledInviteLanguage = styled.div`
gap: 2px;
}
`;
const StyledCrossIconMobile = styled(CrossIconMobile)`
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
`;
StyledCrossIcon.defaultProps = { theme: Base };
@ -585,8 +548,6 @@ const ErrorWrapper = styled.div`
`;
export {
StyledBlock,
StyledHeading,
StyledInvitePanel,
StyledRow,
StyledSubHeader,
@ -608,8 +569,7 @@ export {
StyledToggleButton,
StyledDescription,
StyledInviteLanguage,
StyledControlContainer,
StyledCrossIconMobile,
StyledInviteUserBody,
StyledExternalLink,
ErrorWrapper,
};

25
packages/client/src/components/panels/InvitePanel/index.js
View File

@ -38,20 +38,13 @@ import { DeviceType, EmployeeType } from "@docspace/shared/enums";
import { LOADER_TIMEOUT } from "@docspace/shared/constants";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Aside } from "@docspace/shared/components/aside";
import { Aside, AsideHeader } from "@docspace/shared/components/aside";
import { Button } from "@docspace/shared/components/button";
import { toastr } from "@docspace/shared/components/toast";
import { Portal } from "@docspace/shared/components/portal";
import { isDesktop, isMobile, size } from "@docspace/shared/utils";
import {
StyledBlock,
StyledHeading,
StyledInvitePanel,
StyledButtons,
StyledControlContainer,
StyledCrossIconMobile,
} from "./StyledInvitePanel";
import { StyledInvitePanel, StyledButtons } from "./StyledInvitePanel";
import ItemsList from "./sub-components/ItemsList";
import InviteInput from "./sub-components/InviteInput";
@ -60,7 +53,7 @@ import { Scrollbar } from "@docspace/shared/components/scrollbar";
import InfoBar from "./sub-components/InfoBar";
import InvitePanelLoader from "./sub-components/InvitePanelLoader";
import { Link } from "@docspace/shared/components/link";
import { Text } from "@docspace/shared/components/text";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
@ -429,9 +422,6 @@ const InvitePanel = ({
const invitePanelNode = (
<>
<StyledBlock>
<StyledHeading>{t("Common:InviteUsers")}</StyledHeading>
</StyledBlock>
{invitePanelIsLoding ? (
<InvitePanelLoader />
) : (
@ -479,9 +469,11 @@ const InvitePanel = ({
>
{isMobileView ? (
<div className="invite_panel" ref={invitePanelRef}>
<StyledControlContainer onClick={onClose}>
<StyledCrossIconMobile />
</StyledControlContainer>
<AsideHeader
header={t("Common:InviteUsers")}
onCloseClick={onClose}
/>
{invitePanelNode}
</div>
) : (
@ -498,6 +490,7 @@ const InvitePanel = ({
onClose={onClose}
withoutBodyScroll
zIndex={310}
header={t("Common:InviteUsers")}
>
{invitePanelNode}
</Aside>

6
packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
View File

@ -45,12 +45,12 @@ import { Text } from "@docspace/shared/components/text";
import AccessSelector from "../../../AccessSelector";
import PaidQuotaLimitError from "../../../PaidQuotaLimitError";
import {
StyledBlock,
StyledSubHeader,
StyledInviteInput,
StyledInviteInputContainer,
StyledToggleButton,
StyledDescription,
StyledExternalLink,
} from "../StyledInvitePanel";
import { getFreeUsersRoleArray, getFreeUsersTypeArray } from "../utils";
@ -212,7 +212,7 @@ const ExternalLinks = ({
roomId === -1 ? getFreeUsersTypeArray() : getFreeUsersRoleArray();
return (
<StyledBlock noPadding ref={inputsRef}>
<StyledExternalLink noPadding ref={inputsRef}>
<StyledSubHeader inline>
{t("InviteViaLink")}
{false && ( //TODO: Change to linksVisible after added link information from backend
@ -285,7 +285,7 @@ const ExternalLinks = ({
/>
</StyledInviteInputContainer>
)}
</StyledBlock>
</StyledExternalLink>
);
};

42
packages/client/src/components/panels/StyledPanels.js
View File

@ -256,39 +256,6 @@ const StyledContent = styled.div`
StyledContent.defaultProps = { theme: Base };
const StyledHeaderContent = styled.div`
display: flex;
align-items: center;
padding: 0 16px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -16px;
`
: css`
margin-right: -16px;
`}
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
.files-operations-header,
.sharing_panel-header {
font-weight: 700;
margin: 14px 0;
}
@media ${desktop} {
.files-operations-header,
.sharing_panel-header {
margin: 12px 0;
font-size: 18px;
}
}
`;
StyledHeaderContent.defaultProps = { theme: Base };
const StyledBody = styled.div`
&.files-operations-body {
${(props) =>
@ -711,13 +678,6 @@ const StyledLink = styled(Link)`
StyledModalRowContainer.defaultProps = { theme: Base };
const StyledUploadHeader = styled.div`
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
`;
const StyledUploadBody = styled.div`
width: calc(100% + 16px);
height: 100%;
@ -732,13 +692,11 @@ export {
StyledEmbeddingPanel,
StyledVersionHistoryPanel,
StyledContent,
StyledHeaderContent,
StyledBody,
StyledFooter,
StyledLinkRow,
StyledModalRowContainer,
StyledLink,
StyledNewFilesBody,
StyledUploadHeader,
StyledUploadBody,
};

37
packages/client/src/components/panels/UploadPanel/index.js
View File

@ -39,9 +39,10 @@ import {
} from "@docspace/shared/components/modal-dialog";
import { DialogAsideSkeleton } from "@docspace/shared/skeletons/dialog";
import { StyledUploadHeader, StyledUploadBody } from "../StyledPanels";
import { StyledUploadBody } from "../StyledPanels";
import FileList from "./FileList";
import withLoader from "../../../HOCs/withLoader";
import { AsideHeader } from "@docspace/shared/components/aside";
const StyledModal = styled(ModalDialog)`
.heading {
@ -124,34 +125,24 @@ class UploadPanelComponent extends React.Component {
? t("UploadAndConvert")
: t("Files:Convert");
const url =
uploaded && converted ? ClearReactSvgUrl : ButtonCancelReactSvgUrl;
const clickEvent =
uploaded && converted
? this.clearUploadPanel
: uploaded
? cancelConversion
: this.onCancelUpload;
return (
<StyledModal
visible={visible}
onClose={this.onClose}
displayType={ModalDialogType.aside}
headerIcons={[{ key: "upload-panel", url, onClick: clickEvent }]}
>
<ModalDialog.Header>
<StyledUploadHeader>
<div>{title}</div>
<div>
{uploaded && converted ? (
<IconButton
size={17}
iconName={ClearReactSvgUrl}
isClickable
onClick={this.clearUploadPanel}
/>
) : (
<IconButton
size="20"
iconName={ButtonCancelReactSvgUrl}
isClickable
onClick={uploaded ? cancelConversion : this.onCancelUpload}
/>
)}
</div>
</StyledUploadHeader>
</ModalDialog.Header>
<ModalDialog.Header>{title}</ModalDialog.Header>
<ModalDialog.Body>
<StyledUploadBody>
<FileList />

23
packages/client/src/components/panels/VersionHistoryPanel/index.js
View File

@ -27,7 +27,6 @@
import React from "react";
import PropTypes from "prop-types";
import { Backdrop } from "@docspace/shared/components/backdrop";
import { Heading } from "@docspace/shared/components/heading";
import { Aside } from "@docspace/shared/components/aside";
import { FloatingButton } from "@docspace/shared/components/floating-button";
@ -37,13 +36,11 @@ import { withTranslation } from "react-i18next";
import {
StyledVersionHistoryPanel,
StyledContent,
StyledHeaderContent,
StyledBody,
} from "../StyledPanels";
import { SectionBodyContent } from "../../../pages/VersionHistory/Section/";
import { inject, observer } from "mobx-react";
import config from "PACKAGE_FILE";
import { ArticleHeaderLoader } from "@docspace/shared/skeletons/article";
class PureVersionHistoryPanel extends React.Component {
onClose = () => {
@ -85,26 +82,10 @@ class PureVersionHistoryPanel extends React.Component {
visible={visible}
onClose={this.onClose}
withoutBodyScroll
isLoading={!versions && !isLoading}
header={versions ? versions[0].title : ""}
>
<StyledContent>
<StyledHeaderContent className="version-history-panel-header">
{versions && !isLoading ? (
<Heading
className="version-history-panel-heading"
size="medium"
truncate
>
{versions[0].title}
</Heading>
) : (
<ArticleHeaderLoader
className="loader-version-history"
height="28"
width="688"
/>
)}
</StyledHeaderContent>
<StyledBody className="version-history-panel-body">
<SectionBodyContent onClose={this.onClose} />
</StyledBody>

30
packages/client/src/pages/Home/InfoPanel/Header/index.js
View File

@ -24,14 +24,10 @@
// 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 CrossReactSvgUrl from "PUBLIC_DIR/images/icons/17/cross.react.svg?url";
import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import { IconButton } from "@docspace/shared/components/icon-button";
import { Text } from "@docspace/shared/components/text";
import { Tabs } from "@docspace/shared/components/tabs";
import {
isDesktop as isDesktopUtils,
@ -43,6 +39,7 @@ import { StyledInfoPanelHeader } from "./styles/common";
import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
import { FolderType } from "@docspace/shared/enums";
import { AsideHeader } from "@docspace/shared/components/aside";
const InfoPanelHeaderContent = (props) => {
const {
@ -194,25 +191,12 @@ const InfoPanelHeaderContent = (props) => {
return (
<StyledInfoPanelHeader isTablet={isTablet} withTabs={withTabs}>
<div className="main">
<Text className="header-text" fontSize="21px" fontWeight="700">
{t("Common:Info")}
</Text>
{!isTablet && (
<div className="info-panel-toggle-bg">
<IconButton
isStroke
size="17"
onClick={closeInfoPanel}
iconName={CrossReactSvgUrl}
title={t("Common:InfoPanel")}
className="info-panel-toggle"
id="info-panel-toggle--close"
/>
</div>
)}
</div>
<AsideHeader
header={t("Common:Info")}
onCloseClick={closeInfoPanel}
withoutBorder
className="header-text"
/>
{withTabs && (
<div className="tabs">

49
packages/client/src/pages/Home/InfoPanel/Header/styles/common.js
View File

@ -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%;

6
packages/client/src/pages/PortalSettings/categories/data-management/backup/restore-backup/sub-components/backup-list/index.js
View File

@ -230,11 +230,7 @@ const BackupListModalDialog = (props) => {
onClose={onModalClose}
withFooterBorder
>
<ModalDialog.Header>
<Text fontSize="21px" fontWeight={700}>
{t("BackupList")}
</Text>
</ModalDialog.Header>
<ModalDialog.Header>{t("BackupList")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledBackupList
isCopyingToLocal={isCopyingToLocal}

6
packages/client/src/pages/Sdk/index.js
View File

@ -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;

2
packages/client/src/store/HotkeyStore.js
View File

@ -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);
});
};

6
packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx
View File

@ -118,11 +118,7 @@ const ForgotPasswordModalDialog = ({
onClose={onDialogClose}
id="forgot-password-modal"
>
<ModalDialog.Header>
<Text isBold fontSize="21px">
{t("PasswordRecoveryTitle")}
</Text>
</ModalDialog.Header>
<ModalDialog.Header>{t("PasswordRecoveryTitle")}</ModalDialog.Header>
<ModalDialog.Body>
<Text
key="text-body"

6
packages/login/src/components/Register/sub-components/RegisterModalDialog.tsx
View File

@ -97,11 +97,7 @@ const RegisterModalDialog = ({
onClose={onRegisterModalClose}
isLarge
>
<ModalDialog.Header>
<Text isBold fontSize="21px">
{t("RegisterTitle")}
</Text>
</ModalDialog.Header>
<ModalDialog.Header>{t("RegisterTitle")}</ModalDialog.Header>
<ModalDialog.Body>
<Text key="text-body" isBold={false} fontSize="13px" noSelect>
{getDomainsBlock()}

107
packages/shared/components/aside/Aside.styled.tsx
View File

@ -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 };

18
packages/shared/components/aside/Aside.tsx
View File

@ -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<HTMLElement | null>(null);
@ -58,14 +56,8 @@ const AsidePure = (props: AsideProps) => {
forwardRef={contentRef}
data-testid="aside"
>
{/* <CloseButton displayType="aside" zIndex={zIndex}/> */}
{!withoutHeader && <AsideHeader onCloseClick={onClose} {...rest} />}
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
{visible && (
<StyledControlContainer className="close-button" onClick={onClose}>
<StyledCrossIcon />
</StyledControlContainer>
)}
</StyledAside>
);
};

18
packages/shared/components/aside/Aside.types.ts
View File

@ -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;

117
packages/shared/components/aside/AsideHeader.tsx Normal file
View File

@ -0,0 +1,117 @@
// (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 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 = (
<IconButton
className="arrow-button"
iconName={ArrowPathReactSvgUrl}
size={17}
onClick={onBackClick}
/>
);
const closeIconRender = (
<IconButton
size={17}
className="close-button"
iconName={CrossReactSvgUrl}
onClick={onCloseClick}
isClickable
/>
);
// TODO: Heading is temporary until all dialogues are checked
const mainComponent = (
<>
{isBackButton && backButtonRender}
{typeof header === "string" ? (
<Text fontSize="21px" fontWeight={700} className="header-component">
{header}
</Text>
) : (
<Heading className="heading" size={HeadingSize.medium} truncate>
{header}
</Heading>
)}
{headerIcons.length > 0 && (
<div className="additional-icons-container">
{headerIcons.map((item) => (
<IconButton
key={item.key}
size={17}
className="close-button"
iconName={item.url}
onClick={item.onClick}
isClickable
/>
))}
</div>
)}
{isCloseable && closeIconRender}
</>
);
const loaderComponent = <RectangleSkeleton height="28" width="100%" />;
return (
<StyledHeaderContainer
id={id}
className={className}
style={style}
withoutBorder={withoutBorder}
>
{isLoading ? loaderComponent : mainComponent}
</StyledHeaderContainer>
);
};
export { AsideHeader };

1
packages/shared/components/aside/index.tsx
View File

@ -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";

16
packages/shared/components/context-menu-button/ContextMenuButton.styled.ts
View File

@ -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 };

7
packages/shared/components/context-menu-button/ContextMenuButton.tsx
View File

@ -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}
>
<StyledContent>
<StyledHeaderContent>
{/* <StyledHeaderContent>
<Heading
className="header"
size={HeadingSize.medium}
@ -308,7 +307,7 @@ const ContextMenuButtonPure = ({
>
{asideHeader}
</Heading>
</StyledHeaderContent>
</StyledHeaderContent> */}
<StyledBodyContent>
{state.data.map(
(item: ContextMenuModel, index: number) =>

96
packages/shared/components/filter/Filter.styled.ts
View File

@ -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 };

52
packages/shared/components/filter/sub-components/FilterBlock.tsx
View File

@ -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 ? (
<GroupsSelector
@ -508,9 +503,11 @@ const FilterBlock = ({
withHeader
headerProps={{
onBackClick: onArrowClick,
onCloseClick: hideFilterBlock,
headerLabel: selectorLabel,
withoutBackButton: false,
}}
onClose={hideFilterBlock}
/>
) : (
<RoomSelector
@ -519,34 +516,33 @@ const FilterBlock = ({
withHeader
headerProps={{
onBackClick: onArrowClick,
onCloseClick: hideFilterBlock,
headerLabel: selectorLabel,
withoutBackButton: false,
}}
isMultiSelect={false}
withSearch
disableThirdParty={disableThirdParty}
onClose={hideFilterBlock}
/>
)}
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledFilterBlock>
) : (
<StyledFilterBlock>
<StyledFilterBlockHeader>
<Heading size={HeadingSize.medium} level={HeadingLevel.h1}>
{filterHeader}
</Heading>
{showClearFilterBtn && (
<IconButton
id="filter_search-options-clear"
iconName={ClearReactSvgUrl}
isFill
onClick={onClearFilter}
size={17}
/>
)}
</StyledFilterBlockHeader>
<AsideHeader
header={filterHeader}
onCloseClick={hideFilterBlock}
{...(showClearFilterBtn && {
headerIcons: [
{
key: "filter-icon",
url: ClearReactSvgUrl,
onClick: onClearFilter,
},
],
})}
/>
<div className="filter-body">
{isLoading ? (
<FilterBlockLoader
@ -598,10 +594,6 @@ const FilterBlock = ({
isDisabled={isLoading}
/>
</StyledFilterBlockFooter>
<StyledControlContainer id="filter_close" onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledFilterBlock>
)}

21
packages/shared/components/modal-dialog/ModalDialog.styled.ts
View File

@ -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 };

3
packages/shared/components/modal-dialog/ModalDialog.tsx
View File

@ -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}
/>
}
/>

5
packages/shared/components/modal-dialog/ModalDialog.types.ts
View File

@ -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;
}
};

117
packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
View File

@ -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 (
<StyledCloseButtonWrapper
onClick={onClick}
currentDisplayType={currentDisplayType}
className="modal-close"
>
<IconButton
size={17}
className="close-button"
iconName={CrossIconReactSvgUrl}
/>
</StyledCloseButtonWrapper>
);
};
export { CloseButton };

37
packages/shared/components/modal-dialog/sub-components/Modal.tsx
View File

@ -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 | HTMLDivElement>(null);
@ -158,12 +157,6 @@ const Modal = ({
embedded={embedded}
ref={contentRef}
>
{isCloseable && (
<CloseButton
currentDisplayType={currentDisplayType}
onClick={onClose}
/>
)}
{isLoading ? (
currentDisplayType === "modal" ? (
<DialogSkeleton
@ -184,25 +177,21 @@ const Modal = ({
) : (
<FormWrapper withForm={withForm || false}>
{header && (
<StyledHeader
<AsideHeader
id="modal-header-swipe"
className={
classNames(["modal-header", headerProps.className]) ||
"modal-header"
}
{...headerProps}
currentDisplayType={currentDisplayType}
>
<Heading
level={1}
className="heading"
size={HeadingSize.medium}
truncate
>
{headerComponent}
</Heading>
</StyledHeader>
header={headerComponent}
onCloseClick={onClose}
{...(currentDisplayType === "modal" && {
style: { marginBottom: "16px" },
})}
{...rest}
/>
)}
{body && (
<StyledBody
className={

6
packages/shared/components/recover-access-modal-dialog/RecoverAccessModalDialog.tsx
View File

@ -127,11 +127,7 @@ const RecoverAccessModalDialog: React.FC<IRecoverAccessModalDialogProps> = ({
onClose={onRecoverModalClose}
displayType={ModalDialogType.modal}
>
<ModalDialog.Header>
<Text isBold fontSize="21px">
{t("Common:RecoverTitle")}
</Text>
</ModalDialog.Header>
<ModalDialog.Header>{t("Common:RecoverTitle")}</ModalDialog.Header>
<ModalDialog.Body>
<Text
key="text-body"

17
packages/shared/components/section/sub-components/InfoPanel.tsx
View File

@ -29,12 +29,7 @@ import React, { useEffect, useRef } from "react";
import { DeviceType } from "../../../enums";
import { Portal } from "../../portal";
import {
StyledInfoPanelWrapper,
StyledInfoPanel,
StyledControlContainer,
StyledCrossIcon,
} from "../Section.styled";
import { StyledInfoPanelWrapper, StyledInfoPanel } from "../Section.styled";
import { InfoPanelProps } from "../Section.types";
const InfoPanel = ({
@ -49,8 +44,6 @@ const InfoPanel = ({
}: InfoPanelProps) => {
const infoPanelRef = useRef<null | HTMLDivElement>(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}
>
<StyledInfoPanel>
<StyledControlContainer onClick={closeInfoPanel}>
<StyledCrossIcon />
</StyledControlContainer>
{children}
</StyledInfoPanel>
<StyledInfoPanel>{children}</StyledInfoPanel>
</StyledInfoPanelWrapper>
);

8
packages/shared/components/selector/Selector.styled.ts
View File

@ -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`

2
packages/shared/components/selector/Selector.types.ts
View File

@ -73,6 +73,8 @@ export type BreadCrumbsProps = {
export type HeaderProps = {
headerLabel: string;
onCloseClick: () => void;
isCloseable?: boolean;
} & THeaderBackButton;
export type TSelectorHeader =

31
packages/shared/components/selector/sub-components/Header.tsx
View File

@ -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 (
<StyledHeader withoutBorder={withoutBorder}>
{!withoutBackButton && typeof withoutBackButton === "boolean" && (
<IconButton
className="arrow-button"
iconName={ArrowPathReactSvgUrl}
size={17}
onClick={onBackClick}
/>
)}
<Heading className="heading-text">{headerLabel}</Heading>
</StyledHeader>
<AsideHeader
header={headerLabel}
isBackButton={
!withoutBackButton && typeof withoutBackButton === "boolean"
}
onBackClick={onBackClick}
onCloseClick={onCloseClick}
withoutBorder={withoutBorder}
isCloseable={isCloseable}
/>
);
},
);

4
packages/shared/selectors/Files/FilesSelector.types.ts
View File

@ -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;

15
packages/shared/selectors/Files/index.tsx
View File

@ -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 = (
<Selector
{...headerProps}
{...headerSelectorProps}
{...searchProps}
{...submitButtonProps}
{...cancelButtonProps}
@ -617,6 +625,7 @@ const FilesSelectorComponent = ({
withoutBodyScroll
zIndex={310}
onClose={onCancel}
withoutHeader
>
{SelectorBody}
</Aside>