haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-14 14:21:23 +00:00
Code Issues Releases Wiki Activity

select files and right dir tools is show (#6581)

Browse Source
This commit is contained in:
Michael An
2024-08-20 11:20:30 +08:00
committed by GitHub
parent 9051ad836e
commit a4caf6e970
3 changed files with 99 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/cur-dir-path/index.js
View File

@@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Utils } from '../../utils/utils';
import SortOptionsDialog from '../../components/dialog/sort-options'; import SortOptionsDialog from '../../components/dialog/sort-options';
import DirPath from './dir-path'; import DirPath from './dir-path';
import DirTool from './dir-tool';
const propTypes = { const propTypes = {
currentRepoInfo: PropTypes.object.isRequired, currentRepoInfo: PropTypes.object.isRequired,
@@ -15,17 +13,12 @@ const propTypes = {
onTabNavClick: PropTypes.func, onTabNavClick: PropTypes.func,
pathPrefix: PropTypes.array, pathPrefix: PropTypes.array,
isViewFile: PropTypes.bool, isViewFile: PropTypes.bool,
updateUsedRepoTags: PropTypes.func.isRequired,
fileTags: PropTypes.array.isRequired, fileTags: PropTypes.array.isRequired,
onDeleteRepoTag: PropTypes.func.isRequired,
toggleTreePanel: PropTypes.func.isRequired, toggleTreePanel: PropTypes.func.isRequired,
direntList: PropTypes.array, direntList: PropTypes.array,
sortBy: PropTypes.string, sortBy: PropTypes.string,
sortOrder: PropTypes.string, sortOrder: PropTypes.string,
sortItems: PropTypes.func, sortItems: PropTypes.func,
currentMode: PropTypes.string.isRequired,
switchViewMode: PropTypes.func.isRequired,
isCustomPermission: PropTypes.bool,
repoEncrypted: PropTypes.bool.isRequired, repoEncrypted: PropTypes.bool.isRequired,
isGroupOwnedRepo: PropTypes.bool.isRequired, isGroupOwnedRepo: PropTypes.bool.isRequired,
enableDirPrivateShare: PropTypes.bool.isRequired, enableDirPrivateShare: PropTypes.bool.isRequired,
@@ -38,7 +31,6 @@ const propTypes = {
filePermission: PropTypes.string, filePermission: PropTypes.string,
repoTags: PropTypes.array.isRequired, repoTags: PropTypes.array.isRequired,
onFileTagChanged: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func.isRequired,
viewId: PropTypes.string,
onItemMove: PropTypes.func.isRequired, onItemMove: PropTypes.func.isRequired,
}; };
@@ -58,7 +50,6 @@ class CurDirPath extends React.Component {
}; };
render() { render() {
const isDesktop = Utils.isDesktop();
return ( return (
<div className="cur-dir-path d-flex justify-content-between align-items-center"> <div className="cur-dir-path d-flex justify-content-between align-items-center">
<DirPath <DirPath
@@ -87,23 +78,7 @@ class CurDirPath extends React.Component {
repoTags={this.props.repoTags} repoTags={this.props.repoTags}
onItemMove={this.props.onItemMove} onItemMove={this.props.onItemMove}
/> />
{isDesktop && {!this.props.isDesktop && this.props.direntList.length > 0 &&
<DirTool
repoID={this.props.repoID}
repoName={this.props.repoName}
userPerm={this.props.userPerm}
currentPath={this.props.currentPath}
updateUsedRepoTags={this.props.updateUsedRepoTags}
onDeleteRepoTag={this.props.onDeleteRepoTag}
currentMode={this.props.currentMode}
switchViewMode={this.props.switchViewMode}
isCustomPermission={this.props.isCustomPermission}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
sortItems={this.props.sortItems}
viewId={this.props.viewId}
/>}
{!isDesktop && this.props.direntList.length > 0 &&
<span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>} <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
{this.state.isSortOptionsDialogOpen && {this.state.isSortOptionsDialogOpen &&
<SortOptionsDialog <SortOptionsDialog

13
frontend/src/css/lib-content-view.css
View File

@@ -379,3 +379,16 @@
.custom-modal .file-list-col .file-chooser-search-input { .custom-modal .file-list-col .file-chooser-search-input {
padding: 0 1rem; padding: 0 1rem;
} }
.cur-view-container .cur-view-path {
display: flex;
align-items: flex-start;
border-bottom: none;
}
.cur-view-container .cur-view-path .cur-view-path-left {
border-bottom: none;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}

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

@@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import CurDirPath from '../../components/cur-dir-path'; import CurDirPath from '../../components/cur-dir-path';
import DirTool from '../../components/cur-dir-path/dir-tool';
import Detail from '../../components/dirent-detail'; import Detail from '../../components/dirent-detail';
import DirColumnView from '../../components/dir-view-mode/dir-column-view'; import DirColumnView from '../../components/dir-view-mode/dir-column-view';
import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar'; import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar';
@@ -167,17 +169,14 @@ class LibContentContainer extends React.Component {
}; };
render() { render() {
const { path, repoID, usedRepoTags } = this.props; const isDesktop = Utils.isDesktop();
const { path, repoID, usedRepoTags, isDirentSelected } = this.props;
let isRepoInfoBarShow = false; let isRepoInfoBarShow = false;
if (path === '/') { if (path === '/') {
if (Utils.isDesktop() && usedRepoTags.length !== 0) { if (isDesktop && usedRepoTags.length !== 0) {
isRepoInfoBarShow = true; isRepoInfoBarShow = true;
} }
} }
let curViewPathStyle = { 'borderBottom': 'none' };
if (this.props.isDirentSelected) {
curViewPathStyle.transform = 'translateY(-50px)';
}
return ( return (
<div className="cur-view-container"> <div className="cur-view-container">
@@ -186,67 +185,86 @@ class LibContentContainer extends React.Component {
{gettext('This library has been set to read-only by admin and cannot be updated.')} {gettext('This library has been set to read-only by admin and cannot be updated.')}
</div> </div>
} }
<div className="cur-view-path d-block" style={curViewPathStyle}> <div className="cur-view-path">
<CurDirPath <div
currentRepoInfo={this.props.currentRepoInfo} className={classnames('cur-view-path-left', { 'w-100': !isDesktop })}
repoID={repoID} style={isDirentSelected ? { transform: 'translateY(-50px)' } : {}}
repoName={this.props.currentRepoInfo.repo_name} >
repoEncrypted={this.props.repoEncrypted} <CurDirPath
isGroupOwnedRepo={this.props.isGroupOwnedRepo} currentRepoInfo={this.props.currentRepoInfo}
pathPrefix={this.props.pathPrefix} repoID={repoID}
currentPath={this.props.path} repoName={this.props.currentRepoInfo.repo_name}
userPerm={this.props.userPerm} repoEncrypted={this.props.repoEncrypted}
isViewFile={this.props.isViewFile} isGroupOwnedRepo={this.props.isGroupOwnedRepo}
onTabNavClick={this.props.onTabNavClick} pathPrefix={this.props.pathPrefix}
onPathClick={this.onPathClick} currentPath={this.props.path}
updateUsedRepoTags={this.props.updateUsedRepoTags} userPerm={this.props.userPerm}
fileTags={this.props.fileTags} isViewFile={this.props.isViewFile}
onDeleteRepoTag={this.props.onDeleteRepoTag} onTabNavClick={this.props.onTabNavClick}
direntList={this.props.direntList} onPathClick={this.onPathClick}
sortBy={this.props.sortBy} fileTags={this.props.fileTags}
sortOrder={this.props.sortOrder} direntList={this.props.direntList}
sortItems={this.props.sortItems} sortBy={this.props.sortBy}
toggleTreePanel={this.props.toggleTreePanel} sortOrder={this.props.sortOrder}
currentMode={this.props.currentMode} sortItems={this.props.sortItems}
switchViewMode={this.props.switchViewMode} toggleTreePanel={this.props.toggleTreePanel}
isCustomPermission={this.props.isCustomPermission} enableDirPrivateShare={this.props.enableDirPrivateShare}
enableDirPrivateShare={this.props.enableDirPrivateShare} showShareBtn={this.props.showShareBtn}
showShareBtn={this.props.showShareBtn} onAddFolder={this.props.onAddFolder}
onAddFolder={this.props.onAddFolder} onAddFile={this.props.onAddFile}
onAddFile={this.props.onAddFile} onUploadFile={this.props.onUploadFile}
onUploadFile={this.props.onUploadFile} onUploadFolder={this.props.onUploadFolder}
onUploadFolder={this.props.onUploadFolder} fullDirentList={this.props.fullDirentList}
fullDirentList={this.props.fullDirentList} filePermission={this.props.filePermission}
filePermission={this.props.filePermission} onFileTagChanged={this.props.onToolbarFileTagChanged}
onFileTagChanged={this.props.onToolbarFileTagChanged} repoTags={this.props.repoTags}
repoTags={this.props.repoTags} onItemMove={this.props.onItemMove}
viewId={this.props.viewId} isDesktop={isDesktop}
onItemMove={this.props.onItemMove} />
/> <ToolbarForSelectedDirents
<ToolbarForSelectedDirents repoID={this.props.repoID}
repoID={this.props.repoID} path={this.props.path}
path={this.props.path} userPerm={this.props.userPerm}
userPerm={this.props.userPerm} repoEncrypted={this.props.repoEncrypted}
repoEncrypted={this.props.repoEncrypted} repoTags={this.props.repoTags}
repoTags={this.props.repoTags} selectedDirentList={this.props.selectedDirentList}
selectedDirentList={this.props.selectedDirentList} direntList={this.props.direntList}
direntList={this.props.direntList} onItemsMove={this.props.onItemsMove}
onItemsMove={this.props.onItemsMove} onItemsCopy={this.props.onItemsCopy}
onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete}
onItemsDelete={this.props.onItemsDelete} onItemRename={this.props.onItemRename}
onItemRename={this.props.onItemRename} isRepoOwner={this.props.isRepoOwner}
isRepoOwner={this.props.isRepoOwner} currentRepoInfo={this.props.currentRepoInfo}
currentRepoInfo={this.props.currentRepoInfo} enableDirPrivateShare={this.props.enableDirPrivateShare}
enableDirPrivateShare={this.props.enableDirPrivateShare} updateDirent={this.props.updateDirent}
updateDirent={this.props.updateDirent} unSelectDirent={this.props.unSelectDirent}
unSelectDirent={this.props.unSelectDirent} onFilesTagChanged={this.props.onFilesTagChanged}
onFilesTagChanged={this.props.onFilesTagChanged} showShareBtn={this.props.showShareBtn}
showShareBtn={this.props.showShareBtn} isGroupOwnedRepo={this.props.isGroupOwnedRepo}
isGroupOwnedRepo={this.props.isGroupOwnedRepo} showDirentDetail={this.props.showDirentDetail}
showDirentDetail={this.props.showDirentDetail} currentMode={this.props.currentMode}
currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}
switchViewMode={this.props.switchViewMode} />
/> </div>
{isDesktop &&
<div className="cur-view-path-right py-1">
<DirTool
repoID={repoID}
repoName={this.props.currentRepoInfo.repo_name}
userPerm={this.props.userPerm}
currentPath={path}
updateUsedRepoTags={this.props.updateUsedRepoTags}
onDeleteRepoTag={this.props.onDeleteRepoTag}
currentMode={this.props.currentMode}
switchViewMode={this.props.switchViewMode}
isCustomPermission={this.props.isCustomPermission}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
sortItems={this.props.sortItems}
viewId={this.props.viewId}
/>
</div>
}
</div> </div>
<div <div
className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`}