Web: Files: VersionHistoryPanel: rewritten to modal-dialog

packages/client/src/components/panels/StyledPanels.js

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

packages/client/src/components/panels/VersionHistoryPanel/index.js

@@ -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,35 +54,21 @@ 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"
-        visible={visible}
-        isLoading={true}
-      >
-        <Backdrop
-          onClick={this.onClose}
-          visible={visible}
-          zIndex={zIndex}
-          isAside={true}
-        />
-        <Aside
-          className="version-history-aside-panel"
+    return (
+      <ModalDialog
+        isLoading={!versions && !isLoading}
         visible={visible}
         onClose={this.onClose}
-          withoutBodyScroll
-          isLoading={!versions && !isLoading}
-          header={versions ? versions[0].title : ""}
+        displayType={ModalDialogType.aside}
       >
-          <StyledContent>
-            <StyledBody className="version-history-panel-body">
+        <ModalDialog.Header>
+          {versions ? versions[0].title : ""}
+        </ModalDialog.Header>
+        <ModalDialog.Body>
           <SectionBodyContent onClose={this.onClose} />
-            </StyledBody>
+
           {showProgressBar && (
             <FloatingButton
               className="layout-progress-bar"
@@ -96,15 +76,8 @@ class PureVersionHistoryPanel extends React.Component {
               alert={false}
             />
           )}
-          </StyledContent>
-        </Aside>
-      </StyledVersionHistoryPanel>
-    );
-
-    return currentDeviceType === DeviceType.mobile ? (
-      <Portal element={element} />
-    ) : (
-      element
+        </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));

packages/client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js

@@ -238,6 +238,7 @@ const StyledVersionRow = styled(Row)`
   }
 
   .version-comment-wrapper {
+    margin-inline-start: 85px;
     white-space: normal !important;
 
     .version_text {