Web: Files: VersionHistory: Fixed styles for version history, added blocked interactions with version histories during restore.

products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js

@@ -1,19 +1,17 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Row from "@appserver/components/row";
 import { tablet } from "@appserver/components/utils/device";
 
 const StyledVersionRow = styled(Row)`
-  min-height: 70px;
-
   @media ${tablet} {
-    min-height: 69px;
+    height: 66px;
+    box-sizing: border-box;
     position: relative;
   }
 
   .row_content {
     position: relative;
     padding-top: 14px;
-    padding-bottom: 14px;
   }
 
   .version_badge {
@@ -129,6 +127,24 @@ const StyledVersionRow = styled(Row)`
   .row_context-menu-wrapper {
     display: none;
 
+    right: 16px !important;
+    .expandButton {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+      svg {
+        path {
+          ${(props) =>
+            props.isRestoreProcess &&
+            `
+              fill: #d0d5da;
+            `};
+        }
+      }
+    }
     @media ${tablet} {
       display: block;
       position: absolute;
@@ -139,6 +155,54 @@ const StyledVersionRow = styled(Row)`
 
   .row_content {
     display: block;
+
+    .version_link,
+    .version-link-file,
+    .version_content-length,
+    .version_link-action,
+    .row_context-menu-wrapper,
+    .version_text {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+          color: #d0d5da;
+          touch-action: none;
+          pointer-events: none;
+        `}
+    }
+
+    .version_badge {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+      svg {
+        path {
+          ${(props) =>
+            props.isVersion &&
+            props.isRestoreProcess &&
+            `
+              fill: #d0d5da;
+            `};
+        }
+      }
+    }
+
+    .icon-link {
+      ${(props) =>
+        props.isRestoreProcess &&
+        `
+        touch-action: none;
+        pointer-events: none;
+        `}
+      svg {
+        path {
+          ${(props) => props.isRestoreProcess && " fill: #d0d5da"}
+        }
+      }
+    }
   }
 
   .modal-dialog-aside-footer {

products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js

@@ -31,6 +31,8 @@ const VersionRow = (props) => {
     markAsVersion,
     restoreVersion,
     updateCommentVersion,
+    onSetRestoreProcess,
+    isRestoreProcess,
   } = props;
   const [showEditPanel, setShowEditPanel] = useState(false);
   const [commentValue, setCommentValue] = useState(info.comment);
@@ -64,7 +66,13 @@ const VersionRow = (props) => {
   const onOpenFile = () => window.open(info.webUrl);
 
   const onRestoreClick = () => {
-    restoreVersion(info.id, info.version).catch((err) => toastr.error(err));
+  
+    onSetRestoreProcess(true);
+    restoreVersion(info.id, info.version)
+      .catch((err) => toastr.error(err))
+      .finally(() => {
+        onSetRestoreProcess(false);
+      });
   };
 
   const onVersionClick = () => {
@@ -93,6 +101,8 @@ const VersionRow = (props) => {
       showEditPanel={showEditPanel}
       contextOptions={contextOptions}
       canEdit={canEdit}
+      isRestoreProcess={isRestoreProcess}
+      isVersion={isVersion}
     >
       <>
         <Box displayProp="flex">

products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js

@@ -6,6 +6,12 @@ import VersionRow from "./VersionRow";
 import { inject, observer } from "mobx-react";
 
 class SectionBodyContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isRestoreProcess: false,
+    };
+  }
   componentDidMount() {
     const { match, setFirstLoad } = this.props;
     const fileId = match.params.fileId || this.props.fileId;
@@ -21,34 +27,46 @@ class SectionBodyContent extends React.Component {
     setIsLoading(true);
     fetchFileVersions(fileId).then(() => setIsLoading(false));
   };
+
+  onSetRestoreProcess = (isRestoreProcess) => {
+    this.setState({
+      isRestoreProcess,
+    });
+  };
   render() {
     const { versions, culture, isLoading } = this.props;
+    const { isRestoreProcess } = this.state;
     //console.log("VersionHistory SectionBodyContent render()", versions);
 
     let itemVersion = null;
 
     return versions && !isLoading ? (
-      <RowContainer useReactWindow={false}>
-        {versions.map((info, index) => {
-          let isVersion = true;
-          if (itemVersion === info.versionGroup) {
-            isVersion = false;
-          } else {
-            itemVersion = info.versionGroup;
-          }
+      <div style={{ height: "100%", width: "100%" }}>
+        <RowContainer useReactWindow={true} itemHeight={66}>
+          {versions.map((info, index) => {
+            console.log("render row");
+            let isVersion = true;
+            if (itemVersion === info.versionGroup) {
+              isVersion = false;
+            } else {
+              itemVersion = info.versionGroup;
+            }
 
-          return (
-            <VersionRow
-              getFileVersions={this.getFileVersions}
-              isVersion={isVersion}
-              key={`${info.id}-${index}`}
-              info={info}
-              index={index}
-              culture={culture}
-            />
-          );
-        })}
-      </RowContainer>
+            return (
+              <VersionRow
+                getFileVersions={this.getFileVersions}
+                isVersion={isVersion}
+                key={`${info.id}-${index}`}
+                info={info}
+                index={index}
+                culture={culture}
+                isRestoreProcess={isRestoreProcess}
+                onSetRestoreProcess={this.onSetRestoreProcess}
+              />
+            );
+          })}
+        </RowContainer>
+      </div>
     ) : (
       <Loaders.HistoryRows title="version-history-body-loader" />
     );