From 33c80ff085cd7d72c76b4ff4460358538e9c2a47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?= <37972689+er-pai-r@users.noreply.github.com> Date: Thu, 18 May 2023 13:52:49 +0800 Subject: [PATCH] fix: sodc history ui (#5478) --- frontend/package-lock.json | 14 +++--- frontend/package.json | 2 +- frontend/src/css/sdoc-file-history.css | 47 ++++++++++++++----- frontend/src/pages/sdoc-file-history/index.js | 24 ++++++++-- .../src/pages/sdoc-file-history/side-panel.js | 7 ++- 5 files changed, 70 insertions(+), 24 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 90c9bb522f..27084bfd33 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,7 @@ "@gatsbyjs/reach-router": "1.3.9", "@seafile/react-image-lightbox": "2.0.2", "@seafile/resumablejs": "1.1.16", - "@seafile/sdoc-editor": "0.1.35", + "@seafile/sdoc-editor": "0.1.36", "@seafile/seafile-calendar": "0.0.12", "@seafile/seafile-editor": "0.3.132", "@seafile/slate-react": "0.54.13", @@ -5198,9 +5198,9 @@ "license": "MIT" }, "node_modules/@seafile/sdoc-editor": { - "version": "0.1.35", - "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-0.1.35.tgz", - "integrity": "sha512-5f2VJ/Qg2lCK8jnYV0X0ACnmCEWWWRjHan+32TLnTduK0VfFyz3k7wlqhUPM9WODXsRPqg9iGsSmNrTJjREskQ==", + "version": "0.1.36", + "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-0.1.36.tgz", + "integrity": "sha512-DVGbfqmemRUlecUA4CVpyGSbx8zpm9edfFNBPe1iTsNGfx8WDZYnEd1Kc7ltuz5ja+xEs99FgvKDJsR7Bs62Tw==", "dependencies": { "@seafile/react-image-lightbox": "2.0.2", "@seafile/slate": "0.91.8", @@ -33279,9 +33279,9 @@ "version": "1.1.16" }, "@seafile/sdoc-editor": { - "version": "0.1.35", - "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-0.1.35.tgz", - "integrity": "sha512-5f2VJ/Qg2lCK8jnYV0X0ACnmCEWWWRjHan+32TLnTduK0VfFyz3k7wlqhUPM9WODXsRPqg9iGsSmNrTJjREskQ==", + "version": "0.1.36", + "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-0.1.36.tgz", + "integrity": "sha512-DVGbfqmemRUlecUA4CVpyGSbx8zpm9edfFNBPe1iTsNGfx8WDZYnEd1Kc7ltuz5ja+xEs99FgvKDJsR7Bs62Tw==", "requires": { "@seafile/react-image-lightbox": "2.0.2", "@seafile/slate": "0.91.8", diff --git a/frontend/package.json b/frontend/package.json index a988916b2c..10242cd38a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,7 +6,7 @@ "@gatsbyjs/reach-router": "1.3.9", "@seafile/react-image-lightbox": "2.0.2", "@seafile/resumablejs": "1.1.16", - "@seafile/sdoc-editor": "0.1.35", + "@seafile/sdoc-editor": "0.1.36", "@seafile/seafile-calendar": "0.0.12", "@seafile/seafile-editor": "0.3.132", "@seafile/slate-react": "0.54.13", diff --git a/frontend/src/css/sdoc-file-history.css b/frontend/src/css/sdoc-file-history.css index 32e408e1a7..e39470705b 100644 --- a/frontend/src/css/sdoc-file-history.css +++ b/frontend/src/css/sdoc-file-history.css @@ -6,7 +6,7 @@ .sdoc-file-history .sdoc-file-history-header { height: 50px; border-bottom: 1px solid #e5e5e5; - background-color: #f4f4f7; + background-color: #fff; } .sdoc-file-history .sdoc-file-history-header .sdoc-file-history-header-left { @@ -38,22 +38,32 @@ .sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last, .sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next { padding: 0 8px; + height: 100%; +} + +.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last .fas, +.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next .fas { color: #000; opacity: .5; - height: 100%; } .sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last:hover, .sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next:hover { cursor: pointer; opacity: .75; + background-color: #F5F5F5; +} + +.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-last:hover .fas, +.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-next:hover .fas { + opacity: .75; } .sdoc-file-history .sdoc-file-history-content { flex: 1; min-height: 0; padding: 20px 40px; - background-color: #fafaf9; + background-color: #F5F5F5; overflow-y: scroll; } @@ -85,7 +95,7 @@ padding: 10px 18px; height: 50px;; border-bottom: 1px solid #e5e5e5; - background-color: rgb(250, 250, 249); + background-color: #fff; } .sdoc-file-history .sdoc-file-history-panel .sdoc-file-history-select-range-title { @@ -136,11 +146,31 @@ border-bottom: none; } -.sdoc-file-history-versions .history-list-item:hover { - background-color: #ffe7d5; +.sdoc-file-history-versions .history-list-item:not(.item-active):hover { + background-color: #F5F5F5; cursor: pointer; } +.sdoc-file-history-versions .history-list-item .history-operation:hover { + cursor: pointer; +} + +.sdoc-file-history-versions .history-list-item .history-operation a.fas { + color: #888; +} + +.sdoc-file-history-versions .history-list-item .history-operation:hover a.fas { + color: #333; +} + +.sdoc-file-history-versions .history-list-item.item-active { + background-color: #FFECD9 !important; +} + +.sdoc-file-history-versions .history-list-item.item-active .history-info .time { + color: #ff8000; +} + .history-info .owner { min-height: 22.5px; } @@ -149,11 +179,6 @@ min-width: 8rem; } -.sdoc-file-history-versions .dropdown-menu a { - text-decoration: none; - color: #6e7687; -} - .history-content .main-panel { flex: 1 1 auto; } diff --git a/frontend/src/pages/sdoc-file-history/index.js b/frontend/src/pages/sdoc-file-history/index.js index 8a17de3477..fddb3b787b 100644 --- a/frontend/src/pages/sdoc-file-history/index.js +++ b/frontend/src/pages/sdoc-file-history/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDom from 'react-dom'; import { UncontrolledTooltip } from 'reactstrap'; import classnames from 'classnames'; -import DiffViewer from '@seafile/sdoc-editor/dist/pages/diff-viewer'; +import { DiffViewer } from '@seafile/sdoc-editor'; import { seafileAPI } from '../../utils/seafile-api'; import { gettext, historyRepoID } from '../../utils/constants'; import Loading from '../../components/loading'; @@ -79,7 +79,26 @@ class SdocFileHistory extends React.Component { this.setState({ currentVersionContent, lastVersionContent, isLoading: false, changes: [], currentDiffIndex: 0 }); } - onShowChanges = (isShowChanges) => { + onShowChanges = (isShowChanges, lastVersion) => { + if (isShowChanges && lastVersion) { + const { currentVersionContent } = this.state; + this.setState({ isLoading: true }, () => { + localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + ''); + seafileAPI.getFileRevision(historyRepoID, lastVersion.commitId, lastVersion.path).then(res => { + return seafileAPI.getFileContent(res.data); + }).then(res => { + const lastVersionContent = res.data; + this.setContent(currentVersionContent, lastVersionContent); + this.setState({ isShowChanges }); + }).catch(error => { + const errorMessage = Utils.getErrorMsg(error, true); + toaster.danger(gettext(errorMessage)); + this.setContent(currentVersionContent, ''); + this.setState({ isShowChanges }); + }); + }); + return; + } this.setState({ isShowChanges }, () => { localStorage.setItem('seahub-sdoc-history-show-changes', isShowChanges + ''); }); @@ -171,7 +190,6 @@ class SdocFileHistory extends React.Component { ) : ( this.diffViewerRef = ref} currentContent={currentVersionContent} lastContent={isShowChanges ? lastVersionContent : ''} didMountCallback={this.setDiffCount} diff --git a/frontend/src/pages/sdoc-file-history/side-panel.js b/frontend/src/pages/sdoc-file-history/side-panel.js index e9872929ea..26607c8201 100644 --- a/frontend/src/pages/sdoc-file-history/side-panel.js +++ b/frontend/src/pages/sdoc-file-history/side-panel.js @@ -163,8 +163,11 @@ class SidePanel extends Component { } onShowChanges = () => { - const { isShowChanges } = this.props; - this.props.onShowChanges(!isShowChanges); + const { isShowChanges, currentVersion } = this.props; + const { historyVersions } = this.state; + const historyVersionIndex = historyVersions.findIndex(item => item.commitId === currentVersion.commitId); + const lastVersion = historyVersions[historyVersionIndex + 1]; + this.props.onShowChanges(!isShowChanges, lastVersion); } render() {