mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-01 23:20:51 +00:00
optimize toolbar code (#4456)
This commit is contained in:
杨顺强
GitHub
@@ -7,6 +7,7 @@ import ModalPortal from '../modal-portal';
|
||||
import CreateFolder from '../../components/dialog/create-folder-dialog';
|
||||
import CreateFile from '../../components/dialog/create-file-dialog';
|
||||
import ShareDialog from '../../components/dialog/share-dialog';
|
||||
import ViewModeToolbar from './view-mode-toolbar';
|
||||
|
||||
const propTypes = {
|
||||
path: PropTypes.string.isRequired,
|
||||
@@ -22,6 +23,8 @@ const propTypes = {
|
||||
onUploadFile: PropTypes.func.isRequired,
|
||||
onUploadFolder: PropTypes.func.isRequired,
|
||||
direntList: PropTypes.array.isRequired,
|
||||
currentMode: PropTypes.string.isRequired,
|
||||
switchViewMode: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class DirOperationToolbar extends React.Component {
|
||||
@@ -168,51 +171,56 @@ class DirOperationToolbar extends React.Component {
|
||||
let itemType = path === '/' ? 'library' : 'dir';
|
||||
let itemName = path == '/' ? repoName : Utils.getFolderName(path);
|
||||
|
||||
const content = Utils.isDesktop() ? (
|
||||
<Fragment>
|
||||
{Utils.isSupportUploadFolder() ?
|
||||
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
|
||||
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
|
||||
<button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
|
||||
{this.props.showShareBtn &&
|
||||
<button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
|
||||
</Fragment>
|
||||
) : (
|
||||
<Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
|
||||
<DropdownToggle
|
||||
tag="span"
|
||||
className="sf2-icon-plus mobile-toolbar-icon"
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
let content = null;
|
||||
if (Utils.isDesktop()) {
|
||||
let { showShareBtn } = this.props;
|
||||
content = (
|
||||
<Fragment>
|
||||
{Utils.isSupportUploadFolder() ?
|
||||
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
|
||||
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
|
||||
<button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
|
||||
{showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
|
||||
</Fragment>
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
|
||||
<DropdownToggle tag="span" className="sf2-icon-plus mobile-toolbar-icon" />
|
||||
<DropdownMenu>
|
||||
<DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
|
||||
<DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="operation">
|
||||
{content}
|
||||
<div className="dir-operation">
|
||||
<div className="operation">
|
||||
{content}
|
||||
</div>
|
||||
{this.state.isUploadMenuShow && (
|
||||
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
|
||||
<li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
|
||||
<li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
|
||||
</ul>
|
||||
)}
|
||||
{this.state.isCreateMenuShow && (
|
||||
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
|
||||
<li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
|
||||
<li className="dropdown-divider"></li>
|
||||
<li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{this.state.isUploadMenuShow && (
|
||||
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
|
||||
<li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
|
||||
<li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
|
||||
</ul>
|
||||
)}
|
||||
{this.state.isCreateMenuShow && (
|
||||
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
|
||||
<li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
|
||||
<li className="dropdown-divider"></li>
|
||||
<li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
|
||||
<li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
|
||||
</ul>
|
||||
)}
|
||||
{Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
|
||||
{this.state.isCreateFileDialogShow && (
|
||||
<ModalPortal>
|
||||
<CreateFile
|
||||
|
||||
@@ -14,6 +14,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
|
||||
import ZipDownloadDialog from '../dialog/zip-download-dialog';
|
||||
import Rename from '../dialog/rename-dirent';
|
||||
import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
|
||||
import ViewModeToolbar from './view-mode-toolbar';
|
||||
|
||||
import ModalPortal from '../modal-portal';
|
||||
import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
|
||||
@@ -36,6 +37,8 @@ const propTypes = {
|
||||
onFilesTagChanged: PropTypes.func.isRequired,
|
||||
unSelectDirent: PropTypes.func.isRequired,
|
||||
updateDirent: PropTypes.func.isRequired,
|
||||
currentMode: PropTypes.string.isRequired,
|
||||
switchViewMode: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
class MultipleDirOperationToolbar extends React.Component {
|
||||
@@ -331,23 +334,26 @@ class MultipleDirOperationToolbar extends React.Component {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="d-flex">
|
||||
<ButtonGroup className="flex-row group-operations">
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
|
||||
{this.props.selectedDirentList.length === 1 &&
|
||||
<ItemDropdownMenu
|
||||
tagName={'button'}
|
||||
item={this.props.selectedDirentList[0]}
|
||||
toggleClass={'fas fa-ellipsis-v dirents-more-menu'}
|
||||
onMenuItemClick={this.onMenuItemClick}
|
||||
getMenuList={this.getDirentMenuList}
|
||||
/>
|
||||
}
|
||||
</ButtonGroup>
|
||||
<div className="dir-operation">
|
||||
<div className="d-flex">
|
||||
<ButtonGroup className="flex-row group-operations">
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
|
||||
<Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
|
||||
{this.props.selectedDirentList.length === 1 &&
|
||||
<ItemDropdownMenu
|
||||
tagName={'button'}
|
||||
item={this.props.selectedDirentList[0]}
|
||||
toggleClass={'fas fa-ellipsis-v dirents-more-menu'}
|
||||
onMenuItemClick={this.onMenuItemClick}
|
||||
getMenuList={this.getDirentMenuList}
|
||||
/>
|
||||
}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
{Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
|
||||
{this.state.isMoveDialogShow &&
|
||||
<MoveDirentDialog
|
||||
path={this.props.path}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Utils } from '../../utils/utils';
|
||||
import { gettext } from '../../utils/constants';
|
||||
import CommonToolbar from '../../components/toolbar/common-toolbar';
|
||||
import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
|
||||
@@ -87,48 +86,49 @@ class LibContentToolbar extends React.Component {
|
||||
<Fragment>
|
||||
<div className="cur-view-toolbar">
|
||||
<span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
|
||||
<div className="dir-operation">
|
||||
{this.props.isDirentSelected ?
|
||||
<MultipleDirOperationToolbar
|
||||
repoID={this.props.repoID}
|
||||
path={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
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}
|
||||
relatedFiles={this.props.relatedFiles}
|
||||
unSelectDirent={this.props.unSelectDirent}
|
||||
onFilesTagChanged={this.props.onFilesTagChanged}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
showDirentDetail={this.props.showDirentDetail}
|
||||
/> :
|
||||
<DirOperationToolBar
|
||||
path={this.props.path}
|
||||
repoID={this.props.repoID}
|
||||
repoName={this.props.repoName}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
direntList={this.props.direntList}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
userPerm={this.props.userPerm}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
onAddFile={this.props.onAddFile}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onUploadFile={this.props.onUploadFile}
|
||||
onUploadFolder={this.props.onUploadFolder}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
{Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
|
||||
{this.props.isDirentSelected ?
|
||||
<MultipleDirOperationToolbar
|
||||
repoID={this.props.repoID}
|
||||
path={this.props.path}
|
||||
userPerm={this.props.userPerm}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
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}
|
||||
relatedFiles={this.props.relatedFiles}
|
||||
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}
|
||||
/> :
|
||||
<DirOperationToolBar
|
||||
path={this.props.path}
|
||||
repoID={this.props.repoID}
|
||||
repoName={this.props.repoName}
|
||||
repoEncrypted={this.props.repoEncrypted}
|
||||
direntList={this.props.direntList}
|
||||
showShareBtn={this.props.showShareBtn}
|
||||
enableDirPrivateShare={this.props.enableDirPrivateShare}
|
||||
userPerm={this.props.userPerm}
|
||||
isGroupOwnedRepo={this.props.isGroupOwnedRepo}
|
||||
onAddFile={this.props.onAddFile}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onUploadFile={this.props.onUploadFile}
|
||||
onUploadFolder={this.props.onUploadFolder}
|
||||
currentMode={this.props.currentMode}
|
||||
switchViewMode={this.props.switchViewMode}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
|
||||
</Fragment>
|
||||
|
||||
@@ -1730,7 +1730,6 @@ class LibContentView extends React.Component {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
<div className="main-panel o-hidden">
|
||||
<div className="main-panel-north border-left-show">
|
||||
<LibContentToolbar
|
||||
|
||||
Reference in New Issue
Block a user