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

[dir view] designed top toolbar for mobile (#4029)

Browse Source
This commit is contained in:
llj
2019-08-28 18:30:19 +08:00
committed by Daniel Pan
parent 752aa3001c
commit 84735b6eaa
3 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/toolbar/dir-operation-toolbar.js
View File

@@ -1,5 +1,6 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { Utils } from '../../utils/utils';
import { gettext } from '../../utils/constants';
import ModalPortal from '../modal-portal';
@@ -35,6 +36,7 @@ class DirOperationToolbar extends React.Component {
isCreateMenuShow: false,
isShareDialogShow: false,
operationMenuStyle: '',
isMobileOpMenuOpen: false
};
}
@@ -46,6 +48,10 @@ class DirOperationToolbar extends React.Component {
document.removeEventListener('click', this.hideOperationMenu);
}
toggleMobileOpMenu = () => {
this.setState({isMobileOpMenuOpen: !this.state.isMobileOpMenuOpen});
}
hideOperationMenu = () => {
this.setState({
isUploadMenuShow: false,
@@ -161,17 +167,34 @@ 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>
);
return (
<Fragment>
<div className="operation">
{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>
}
{content}
</div>
{this.state.isUploadMenuShow && (
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>