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