mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-06 09:21:54 +00:00
Add sharing dialog and optimize nav-link style (#2580)
This commit is contained in:
C_Q
Daniel Pan
@@ -8,7 +8,7 @@ import { Badge } from 'reactstrap';
|
||||
import { canViewOrg } from '../utils/constants';
|
||||
|
||||
const propTypes = {
|
||||
currentTab: PropTypes.string.isRequired,
|
||||
currentTab: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
tabItemClick: PropTypes.func.isRequired,
|
||||
draftCounts: PropTypes.number,
|
||||
};
|
||||
@@ -56,23 +56,27 @@ class MainSideNav extends React.Component {
|
||||
this.props.tabItemClick(param);
|
||||
}
|
||||
|
||||
getActiveClass = (tab) => {
|
||||
return this.props.currentTab === tab ? 'active' : '';
|
||||
}
|
||||
|
||||
renderSharedGroups() {
|
||||
let style = {height: 0};
|
||||
if (this.state.groupsExtended) {
|
||||
style = {height: this.groupsHeight};
|
||||
}
|
||||
return (
|
||||
<ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
|
||||
<li className={this.props.currentTab === 'groups' ? 'tab-cur' : ''}>
|
||||
<Link to={siteRoot + 'groups/'} onClick={() => this.tabItemClick('groups')}>
|
||||
<ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
|
||||
<li className="nav-item">
|
||||
<Link to={siteRoot + 'groups/'} className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={() => this.tabItemClick('groups')}>
|
||||
<span className="sharp" aria-hidden="true">#</span>
|
||||
{gettext('All Groups')}
|
||||
</Link>
|
||||
</li>
|
||||
{this.state.groupItems.map(item => {
|
||||
return (
|
||||
<li key={item.id} className={this.props.currentTab === item.id ? 'tab-cur' : ''}>
|
||||
<Link to={siteRoot + 'group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
|
||||
<li key={item.id} className="nav-item">
|
||||
<Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.id)}`} onClick={() => this.tabItemClick(item.id)}>
|
||||
<span className="sharp" aria-hidden="true">#</span>
|
||||
{item.name}
|
||||
</Link>
|
||||
@@ -93,21 +97,21 @@ class MainSideNav extends React.Component {
|
||||
}
|
||||
let style = {height: height};
|
||||
return (
|
||||
<ul className={`${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
|
||||
<li className={this.props.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
|
||||
<Link to={siteRoot + 'share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
|
||||
<ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
|
||||
<li className="nav-item">
|
||||
<Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
|
||||
<span aria-hidden="true" className="sharp">#</span>
|
||||
{gettext('Libraries')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={this.props.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
|
||||
<Link to={siteRoot + 'share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
|
||||
<li className="nav-item">
|
||||
<Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
|
||||
<span aria-hidden="true" className="sharp">#</span>
|
||||
{gettext('Folders')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={this.props.currentTab === 'share-admin-share-links' || this.props.currentTab == 'share-admin-upload-links' ? 'tab-cur' : ''}>
|
||||
<Link to={siteRoot + 'share-admin-share-links/'} className="ellipsis" title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
|
||||
<li className="nav-item">
|
||||
<Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links') || this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
|
||||
<span aria-hidden="true" className="sharp">#</span>
|
||||
{gettext('Links')}
|
||||
</Link>
|
||||
@@ -118,32 +122,32 @@ class MainSideNav extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="side-nav" className="home-side-nav">
|
||||
<div className="side-nav">
|
||||
<div className="side-nav-con">
|
||||
<h3 className="sf-heading">Files</h3>
|
||||
<ul className="side-tabnav-tabs">
|
||||
<li className={`tab ${this.props.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
|
||||
<Link to={ siteRoot + 'my-libs/' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
|
||||
<ul className="nav nav-pills flex-column nav-container">
|
||||
<li className="nav-item">
|
||||
<Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs')}`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
|
||||
<span className="sf2-icon-user" aria-hidden="true"></span>
|
||||
{gettext('My Libraries')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`tab ${this.props.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
|
||||
<Link to={siteRoot + 'shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
|
||||
<li className="nav-item">
|
||||
<Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
|
||||
<span className="sf2-icon-share" aria-hidden="true"></span>
|
||||
{gettext('Shared with me')}
|
||||
</Link>
|
||||
</li>
|
||||
{ canViewOrg &&
|
||||
<li className={`tab ${this.props.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
|
||||
<a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
|
||||
<li className="nav-item" onClick={() => this.tabItemClick('org')}>
|
||||
<a href={ siteRoot + '#org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
|
||||
<span className="sf2-icon-organization" aria-hidden="true"></span>
|
||||
{gettext('Shared with all')}
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
<li className="tab" id="group-nav">
|
||||
<a className="ellipsis user-select-no" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
|
||||
<li className="nav-item flex-column" id="group-nav">
|
||||
<a className="nav-link ellipsis" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
|
||||
<span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
|
||||
<span className="sf2-icon-group" aria-hidden="true"></span>
|
||||
{gettext('Shared with groups')}
|
||||
@@ -153,33 +157,36 @@ class MainSideNav extends React.Component {
|
||||
</ul>
|
||||
|
||||
<h3 className="sf-heading">Tools</h3>
|
||||
<ul className="side-tabnav-tabs">
|
||||
<li className={`tab ${this.props.currentTab === 'starred' ? 'tab-cur' : ''}`}>
|
||||
<Link to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
|
||||
<ul className="nav nav-pills flex-column nav-container">
|
||||
<li className="nav-item">
|
||||
<Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
|
||||
<span className="sf2-icon-star" aria-hidden="true"></span>
|
||||
{gettext('Favorites')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`tab ${this.props.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
|
||||
<Link to={siteRoot + 'dashboard/'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
|
||||
<li className="nav-item">
|
||||
<Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
|
||||
<span className="sf2-icon-clock" aria-hidden="true"></span>
|
||||
{gettext('Acitivities')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`tab ${this.props.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
|
||||
<Link to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
|
||||
<li className="nav-item">
|
||||
<Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
|
||||
<span className="sf2-icon-monitor" aria-hidden="true"></span>
|
||||
{gettext('Linked Devices')}
|
||||
</Link>
|
||||
</li>
|
||||
<li className={`tab ${this.props.currentTab === 'drafts' || this.props.currentTab === 'reviews' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
|
||||
<Link to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
|
||||
<li className="nav-item" onClick={() => this.tabItemClick('drafts')}>
|
||||
<Link className={`nav-link ellipsis ${this.getActiveClass('drafts') || this.getActiveClass('reviews')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
|
||||
<span className="sf2-icon-edit" aria-hidden="true"></span>
|
||||
{gettext('Drafts')} {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
|
||||
<span className="draft-info">
|
||||
{gettext('Drafts')}
|
||||
{this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="tab" id="share-admin-nav">
|
||||
<a className="ellipsis user-select-no" title={gettext('Share Admin')} onClick={this.shExtend}>
|
||||
<li className="nav-item flex-column" id="share-admin-nav">
|
||||
<a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
|
||||
<span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
|
||||
<span aria-hidden="true" className="sf2-icon-wrench"></span>
|
||||
{gettext('Share Admin')}
|
||||
|
||||
Reference in New Issue
Block a user