haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-06 17:33:18 +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 React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import ModalPortal from '../modal-portal'; import ModalPortal from '../modal-portal';
@@ -35,6 +36,7 @@ class DirOperationToolbar extends React.Component {
isCreateMenuShow: false, isCreateMenuShow: false,
isShareDialogShow: false, isShareDialogShow: false,
operationMenuStyle: '', operationMenuStyle: '',
isMobileOpMenuOpen: false
}; };
} }
@@ -46,6 +48,10 @@ class DirOperationToolbar extends React.Component {
document.removeEventListener('click', this.hideOperationMenu); document.removeEventListener('click', this.hideOperationMenu);
} }
toggleMobileOpMenu = () => {
this.setState({isMobileOpMenuOpen: !this.state.isMobileOpMenuOpen});
}
hideOperationMenu = () => { hideOperationMenu = () => {
this.setState({ this.setState({
isUploadMenuShow: false, isUploadMenuShow: false,
@@ -161,17 +167,34 @@ class DirOperationToolbar extends React.Component {
let itemType = path === '/' ? 'library' : 'dir'; let itemType = path === '/' ? 'library' : 'dir';
let itemName = path == '/' ? repoName : Utils.getFolderName(path); 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 ( return (
<Fragment> <Fragment>
<div className="operation"> <div className="operation">
{Utils.isSupportUploadFolder() ? {content}
<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>
}
</div> </div>
{this.state.isUploadMenuShow && ( {this.state.isUploadMenuShow && (
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}> <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>

3
frontend/src/pages/lib-content-view/lib-content-toolbar.js
View File

@@ -1,5 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Utils } from '../../utils/utils';
import { gettext } from '../../utils/constants'; import { gettext } from '../../utils/constants';
import CommonToolbar from '../../components/toolbar/common-toolbar'; import CommonToolbar from '../../components/toolbar/common-toolbar';
import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar'; import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
@@ -123,7 +124,7 @@ class LibContentToolbar extends React.Component {
/> />
} }
</div> </div>
<ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/> {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
</div> </div>
<CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/> <CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
</Fragment> </Fragment>

2
frontend/src/pages/shared-with-all/public-shared-view.js
View File

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import cookie from 'react-cookies'; import cookie from 'react-cookies';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { seafileAPI } from '../../utils/seafile-api'; import { seafileAPI } from '../../utils/seafile-api';
import { gettext, loginUrl, canAddPublicRepo } from '../../utils/constants'; import { gettext, loginUrl, canAddPublicRepo } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';