Web: Files: VersionHistoryPanel: rewritten to modal-dialog
This commit is contained in:
parent
a062573d4c
commit
b5166514c7
@ -25,10 +25,8 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import styled, { css } from "styled-components";
|
||||
import { Scrollbar } from "@docspace/shared/components/scrollbar";
|
||||
import { Link } from "@docspace/shared/components/link";
|
||||
import { desktop, mobile, tablet } from "@docspace/shared/utils";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { Base, globalColors } from "@docspace/shared/themes";
|
||||
|
||||
const PanelStyles = css`
|
||||
@ -84,45 +82,6 @@ const StyledAsidePanel = styled.div`
|
||||
|
||||
StyledAsidePanel.defaultProps = { theme: Base };
|
||||
|
||||
const StyledVersionHistoryPanel = styled.div`
|
||||
${PanelStyles}
|
||||
|
||||
.version-history-modal-dialog {
|
||||
transition: unset;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.version-history-panel-header {
|
||||
height: 53px;
|
||||
margin-inline-start: 0;
|
||||
.version-history-panel-heading {
|
||||
font-weight: 700;
|
||||
margin-bottom: 13px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.version-history-panel-body {
|
||||
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
|
||||
margin-inline-start: 16px;
|
||||
|
||||
height: calc(100% - 53px);
|
||||
box-sizing: border-box;
|
||||
|
||||
.version-comment-wrapper {
|
||||
margin-inline-start: 85px;
|
||||
}
|
||||
|
||||
.version_edit-comment {
|
||||
padding-inline-start: 7px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledVersionHistoryPanel.defaultProps = { theme: Base };
|
||||
|
||||
const StyledEmbeddingPanel = styled.div`
|
||||
${PanelStyles}
|
||||
`;
|
||||
@ -179,6 +138,9 @@ const StyledContent = styled.div`
|
||||
StyledContent.defaultProps = { theme: Base };
|
||||
|
||||
const StyledBody = styled.div`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.files-operations-body {
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
@ -513,7 +475,6 @@ const StyledUploadBody = styled.div`
|
||||
export {
|
||||
StyledAsidePanel,
|
||||
StyledEmbeddingPanel,
|
||||
StyledVersionHistoryPanel,
|
||||
StyledContent,
|
||||
StyledBody,
|
||||
StyledFooter,
|
||||
|
@ -26,21 +26,15 @@
|
||||
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Backdrop } from "@docspace/shared/components/backdrop";
|
||||
import { Aside } from "@docspace/shared/components/aside";
|
||||
|
||||
import { FloatingButton } from "@docspace/shared/components/floating-button";
|
||||
import { Portal } from "@docspace/shared/components/portal";
|
||||
import { DeviceType } from "@docspace/shared/enums";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import {
|
||||
StyledVersionHistoryPanel,
|
||||
StyledContent,
|
||||
StyledBody,
|
||||
} from "../StyledPanels";
|
||||
import { SectionBodyContent } from "../../../pages/VersionHistory/Section/";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import config from "PACKAGE_FILE";
|
||||
import {
|
||||
ModalDialog,
|
||||
ModalDialogType,
|
||||
} from "@docspace/shared/components/modal-dialog";
|
||||
|
||||
class PureVersionHistoryPanel extends React.Component {
|
||||
onClose = () => {
|
||||
@ -60,51 +54,30 @@ class PureVersionHistoryPanel extends React.Component {
|
||||
onKeyPress = (e) => (e.key === "Esc" || e.key === "Escape") && this.onClose();
|
||||
|
||||
render() {
|
||||
//console.log("render versionHistoryPanel");
|
||||
const { visible, isLoading, versions, showProgressBar, currentDeviceType } =
|
||||
this.props;
|
||||
const zIndex = 310;
|
||||
const { visible, isLoading, versions, showProgressBar } = this.props;
|
||||
|
||||
const element = (
|
||||
<StyledVersionHistoryPanel
|
||||
className="version-history-modal-dialog"
|
||||
return (
|
||||
<ModalDialog
|
||||
isLoading={!versions && !isLoading}
|
||||
visible={visible}
|
||||
isLoading={true}
|
||||
onClose={this.onClose}
|
||||
displayType={ModalDialogType.aside}
|
||||
>
|
||||
<Backdrop
|
||||
onClick={this.onClose}
|
||||
visible={visible}
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside
|
||||
className="version-history-aside-panel"
|
||||
visible={visible}
|
||||
onClose={this.onClose}
|
||||
withoutBodyScroll
|
||||
isLoading={!versions && !isLoading}
|
||||
header={versions ? versions[0].title : ""}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledBody className="version-history-panel-body">
|
||||
<SectionBodyContent onClose={this.onClose} />
|
||||
</StyledBody>
|
||||
{showProgressBar && (
|
||||
<FloatingButton
|
||||
className="layout-progress-bar"
|
||||
icon="file"
|
||||
alert={false}
|
||||
/>
|
||||
)}
|
||||
</StyledContent>
|
||||
</Aside>
|
||||
</StyledVersionHistoryPanel>
|
||||
);
|
||||
<ModalDialog.Header>
|
||||
{versions ? versions[0].title : ""}
|
||||
</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<SectionBodyContent onClose={this.onClose} />
|
||||
|
||||
return currentDeviceType === DeviceType.mobile ? (
|
||||
<Portal element={element} />
|
||||
) : (
|
||||
element
|
||||
{showProgressBar && (
|
||||
<FloatingButton
|
||||
className="layout-progress-bar"
|
||||
icon="file"
|
||||
alert={false}
|
||||
/>
|
||||
)}
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -124,7 +97,7 @@ export default inject(
|
||||
versionHistoryStore,
|
||||
infoPanelStore,
|
||||
}) => {
|
||||
const { isTabletView, currentDeviceType } = settingsStore;
|
||||
const { isTabletView } = settingsStore;
|
||||
const { isLoading } = clientLoadingStore;
|
||||
const { setIsMobileHidden: setInfoPanelIsMobileHidden } = infoPanelStore;
|
||||
const {
|
||||
@ -146,7 +119,6 @@ export default inject(
|
||||
|
||||
setIsVerHistoryPanel,
|
||||
setInfoPanelIsMobileHidden,
|
||||
currentDeviceType,
|
||||
};
|
||||
},
|
||||
)(observer(VersionHistoryPanel));
|
||||
|
@ -238,6 +238,7 @@ const StyledVersionRow = styled(Row)`
|
||||
}
|
||||
|
||||
.version-comment-wrapper {
|
||||
margin-inline-start: 85px;
|
||||
white-space: normal !important;
|
||||
|
||||
.version_text {
|
||||
|
Loading…
Reference in New Issue
Block a user