diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js index eb22eac487b..8a39b98f720 100644 --- a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js +++ b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionRow.js @@ -3,17 +3,15 @@ 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 { @@ -133,6 +131,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; @@ -143,6 +159,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 { diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js index f8efbc5125b..05881e6cc4f 100644 --- a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js +++ b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js @@ -31,11 +31,12 @@ const VersionRow = (props) => { markAsVersion, restoreVersion, updateCommentVersion, + onSetRestoreProcess, + isRestoreProcess, } = props; const [showEditPanel, setShowEditPanel] = useState(false); const [commentValue, setCommentValue] = useState(info.comment); - const [isRestoring, setIsRestoring] = useState(false); const canEdit = info.access === 1 || info.access === 0; @@ -66,11 +67,13 @@ const VersionRow = (props) => { const onOpenFile = () => window.open(info.webUrl); const onRestoreClick = () => { - setIsRestoring(true); - + + onSetRestoreProcess(true); restoreVersion(info.id, info.version) .catch((err) => toastr.error(err)) - .finally(() => setIsRestoring(false)); + .finally(() => { + onSetRestoreProcess(false); + }); }; const onVersionClick = () => { @@ -99,7 +102,8 @@ const VersionRow = (props) => { showEditPanel={showEditPanel} contextOptions={contextOptions} canEdit={canEdit} - isRestoring={isRestoring} + isRestoreProcess={isRestoreProcess} + isVersion={isVersion} > <> <Box displayProp="flex"> diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js b/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js index 1301dc7ee33..fdff2f5535f 100644 --- a/products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/index.js +++ b/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" /> );