haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-22 20:08:19 +00:00
Code Issues Releases Wiki Activity

feat: sdoc history empty changes tip (#5580)

Browse Source 
* feat: sdoc history empty changes tip

* feat: optimize code
This commit is contained in:
杨国璇
2023-08-10 17:31:53 +08:00
committed by GitHub
parent dd32616168
commit 73a9089884
2 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/css/sdoc-file-history.css
View File

@@ -20,7 +20,6 @@
.sdoc-file-history .sdoc-file-history-header .sdoc-file-history-header-right {
height: 100%;
min-width: 100px;
}
.sdoc-file-history .sdoc-file-history-header .sdoc-file-changes-container {

86
frontend/src/pages/sdoc-file-history/index.js
View File

@@ -138,50 +138,66 @@ class SdocFileHistory extends React.Component {
this.jumpToElement(currentDiffIndex + 1);
}
render() {
const { currentVersion, isShowChanges, currentVersionContent, lastVersionContent, isLoading, changes, currentDiffIndex } = this.state;
renderChangesTip = () => {
const { isShowChanges, changes, currentDiffIndex, isLoading } = this.state;
if (isLoading) return null;
if (!isShowChanges) return null;
const changesCount = changes ? changes.length : 0;
const isShowChangesTips = isShowChanges && changesCount > 0;
if (changesCount === 0) {
return (
<div className="sdoc-file-history-header-right d-flex align-items-center">
<div className="sdoc-file-changes-container d-flex align-items-center pl-2 pr-2">
{gettext('No changes')}
</div>
</div>
);
}
return (
<div className="sdoc-file-history-header-right d-flex align-items-center">
<div className="sdoc-file-changes-container d-flex align-items-center">
<div className="sdoc-file-changes-tip d-flex align-items-center justify-content-center pl-2 pr-2">
{`${gettext('Changes')} ${currentDiffIndex + 1}/${changesCount}`}
</div>
<div className="sdoc-file-changes-divider"></div>
<div
className="sdoc-file-changes-last d-flex align-items-center justify-content-center"
id="sdoc-file-changes-last"
onClick={this.lastChange}
>
<span className="fas fa-chevron-up"></span>
</div>
<div className="sdoc-file-changes-divider"></div>
<div
className="sdoc-file-changes-next d-flex align-items-center justify-content-center"
id="sdoc-file-changes-next"
onClick={this.nextChange}
>
<span className="fas fa-chevron-down"></span>
</div>
<UncontrolledTooltip placement="bottom" target="sdoc-file-changes-last">
{gettext('Last modification')}
</UncontrolledTooltip>
<UncontrolledTooltip placement="bottom" target="sdoc-file-changes-next">
{gettext('Next modification')}
</UncontrolledTooltip>
</div>
</div>
);
}
render() {
const { currentVersion, isShowChanges, currentVersionContent, lastVersionContent, isLoading } = this.state;
return (
<div className="sdoc-file-history d-flex h-100 w-100 o-hidden">
<div className="sdoc-file-history-container d-flex flex-column">
<div className="sdoc-file-history-header pt-2 pb-2 pl-4 pr-4 d-flex justify-content-between w-100 o-hidden">
<div className={classnames('sdoc-file-history-header-left d-flex align-items-center o-hidden', { 'pr-4': isShowChangesTips })}>
<div className={classnames('sdoc-file-history-header-left d-flex align-items-center o-hidden', { 'pr-4': isShowChanges })}>
<GoBack />
<div className="file-name text-truncate">{fileName}</div>
</div>
{isShowChangesTips && (
<div className="sdoc-file-history-header-right d-flex align-items-center">
<div className="sdoc-file-changes-container d-flex align-items-center ">
<div className="sdoc-file-changes-tip d-flex align-items-center justify-content-center pl-2 pr-2">
{`${gettext('Changes')} ${currentDiffIndex + 1}/${changesCount}`}
</div>
<div className="sdoc-file-changes-divider"></div>
<div
className="sdoc-file-changes-last d-flex align-items-center justify-content-center"
id="sdoc-file-changes-last"
onClick={this.lastChange}
>
<span className="fas fa-chevron-up"></span>
</div>
<div className="sdoc-file-changes-divider"></div>
<div
className="sdoc-file-changes-next d-flex align-items-center justify-content-center"
id="sdoc-file-changes-next"
onClick={this.nextChange}
>
<span className="fas fa-chevron-down"></span>
</div>
<UncontrolledTooltip placement="bottom" target="sdoc-file-changes-last">
{gettext('Last modification')}
</UncontrolledTooltip>
<UncontrolledTooltip placement="bottom" target="sdoc-file-changes-next">
{gettext('Next modification')}
</UncontrolledTooltip>
</div>
</div>
)}
{this.renderChangesTip()}
</div>
<div className="sdoc-file-history-content f-flex flex-column" ref={ref => this.historyContentRef = ref}>
{isLoading ? (