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

12.0 add buttons animation (#6167)

Browse Source 
* add library container animation

* change animation and style
This commit is contained in:
Michael An
2024-06-17 14:48:16 +08:00
committed by GitHub
parent 5db1bd93ac
commit 422108b312
6 changed files with 126 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/pages/lib-content-view/lib-content-container.js
View File

@@ -173,6 +173,10 @@ class LibContentContainer extends React.Component {
isRepoInfoBarShow = true;
}
}
let curViewPathStyle = { 'borderBottom': 'none' };
if (this.props.isDirentSelected) {
curViewPathStyle.transform = 'translateY(-50px)';
}
return (
<Fragment>
@@ -182,32 +186,8 @@ class LibContentContainer extends React.Component {
{gettext('This library has been set to read-only by admin and cannot be updated.')}
</div>
}
<div className="cur-view-path">
{this.props.isDirentSelected ?
<ToolbarForSelectedDirents
repoID={this.props.repoID}
path={this.props.path}
userPerm={this.props.userPerm}
repoEncrypted={this.props.repoEncrypted}
repoTags={this.props.repoTags}
selectedDirentList={this.props.selectedDirentList}
direntList={this.props.direntList}
onItemsMove={this.props.onItemsMove}
onItemsCopy={this.props.onItemsCopy}
onItemsDelete={this.props.onItemsDelete}
onItemRename={this.props.onItemRename}
isRepoOwner={this.props.isRepoOwner}
currentRepoInfo={this.props.currentRepoInfo}
enableDirPrivateShare={this.props.enableDirPrivateShare}
updateDirent={this.props.updateDirent}
unSelectDirent={this.props.unSelectDirent}
onFilesTagChanged={this.props.onFilesTagChanged}
showShareBtn={this.props.showShareBtn}
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
showDirentDetail={this.props.showDirentDetail}
currentMode={this.props.currentMode}
switchViewMode={this.props.switchViewMode}
/> :
<div className="cur-view-path d-block" style={curViewPathStyle}>
<div className="d-flex justify-content-between align-items-center CurDirPath" style={{height: '32px'}}>
<CurDirPath
repoID={repoID}
repoName={this.props.currentRepoInfo.repo_name}
@@ -241,7 +221,33 @@ class LibContentContainer extends React.Component {
onFileTagChanged={this.props.onToolbarFileTagChanged}
repoTags={this.props.repoTags}
/>
}
</div>
<div style={{marginTop: '24px'}}>
<ToolbarForSelectedDirents
repoID={this.props.repoID}
path={this.props.path}
userPerm={this.props.userPerm}
repoEncrypted={this.props.repoEncrypted}
repoTags={this.props.repoTags}
selectedDirentList={this.props.selectedDirentList}
direntList={this.props.direntList}
onItemsMove={this.props.onItemsMove}
onItemsCopy={this.props.onItemsCopy}
onItemsDelete={this.props.onItemsDelete}
onItemRename={this.props.onItemRename}
isRepoOwner={this.props.isRepoOwner}
currentRepoInfo={this.props.currentRepoInfo}
enableDirPrivateShare={this.props.enableDirPrivateShare}
updateDirent={this.props.updateDirent}
unSelectDirent={this.props.unSelectDirent}
onFilesTagChanged={this.props.onFilesTagChanged}
showShareBtn={this.props.showShareBtn}
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
showDirentDetail={this.props.showDirentDetail}
currentMode={this.props.currentMode}
switchViewMode={this.props.switchViewMode}
/>
</div>
</div>
<div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
{!this.props.pathExist && this.errMessage}