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

Side nav (#6309)

Browse Source 
* [user panel] combined 7 commits into 1:

[user side nav] added 'fold/unfold' for the sidebar

[redesign] redesigned toolbar for 'my libs' & 'shared with all'; redesigned 'top bar' for 'help', 'clients' and other pages

[Shared with all] 'share existing libraries' dialog: added the 'close' icon back, enabled clicking outside to close the dialog

['Invite Guest' page] redesigned the toolbar

['Share Admin' - 'Links'] 'Share Links' page: redesigned the toolbar

['Share Admin' - 'Links'] 'Upload Links' page: redesigned the toolbar

cleaned up code

* [user side panel] update

* [user panel] update

* [code style] update: remove an eslint warning
This commit is contained in:
llj
2024-07-09 15:08:47 +08:00
committed by GitHub
parent 0d5dd2a65a
commit ddbf0e7855
20 changed files with 378 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/toolbar/invitations-toolbar.js
View File

@@ -1,46 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import CommonToolbar from './common-toolbar';
import { Button } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
const propTypes = {
onShowSidePanel: PropTypes.func.isRequired,
onSearchedClick: PropTypes.func.isRequired,
toggleInvitePeopleDialog: PropTypes.func.isRequired,
searchPlaceholder: PropTypes.string.isRequired,
};
class InvitationsToolbar extends React.Component {
constructor(props) {
super(props);
}
render() {
let { onShowSidePanel, onSearchedClick, toggleInvitePeopleDialog } = this.props;
return (
<div className="main-panel-north border-left-show">
<div className="cur-view-toolbar">
<span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
</span>
{Utils.isDesktop() ? (
<div className="operation">
<Button color="btn btn-secondary operation-item" onClick={toggleInvitePeopleDialog}>
<i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('Invite Guest')}
</Button>
</div>
) : (
<span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite Guest')} onClick={toggleInvitePeopleDialog}></span>
)}
</div>
<CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
</div>
);
}
}
InvitationsToolbar.propTypes = propTypes;
export default InvitationsToolbar;

91
frontend/src/components/toolbar/my-libs-toolbar.js
View File

@@ -1,91 +0,0 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
import { Link, navigate } from '@gatsbyjs/reach-router';
import { Utils } from '../../utils/utils';
import { siteRoot, gettext } from '../../utils/constants';
import ModalPortal from '../modal-portal';
import CreateRepoDialog from '../dialog/create-repo-dialog';
const propTypes = {
onCreateRepo: PropTypes.func.isRequired,
moreShown: PropTypes.bool
};
class MyLibsToolbar extends React.Component {
constructor(props) {
super(props);
this.state = {
isCreateRepoDialogOpen: false,
isOpen: false,
};
}
onCreateRepo = (repo) => {
this.props.onCreateRepo(repo);
this.onCreateToggle();
};
onCreateToggle = () => {
this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
};
toggleMore = () => {
this.setState({ isOpen: !this.state.isOpen });
};
onDropdownToggleKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.toggleMore();
}
};
visitDeletedviaKey = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
navigate(`${siteRoot}my-libs/deleted/`);
}
};
render() {
const { moreShown = false } = this.props;
return (
<Fragment>
{Utils.isDesktop() ? (
<div className="operation">
<button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
<i className="sf3-font sf3-font-enlarge text-secondary mr-1"></i>{gettext('New Library')}
</button>
{moreShown &&
<Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
<DropdownToggle className='btn btn-secondary operation-item' onKeyDown={this.onDropdownToggleKeyDown}>
{gettext('More')}
</DropdownToggle>
<DropdownMenu>
<DropdownItem className="link-dropdown-container" onKeyDown={this.visitDeletedviaKey}>
<Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
}
</div>
) : (
<span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
)}
{this.state.isCreateRepoDialogOpen && (
<ModalPortal>
<CreateRepoDialog
libraryType='mine'
onCreateRepo={this.onCreateRepo}
onCreateToggle={this.onCreateToggle}
/>
</ModalPortal>
)}
</Fragment>
);
}
}
MyLibsToolbar.propTypes = propTypes;
export default MyLibsToolbar;