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

fix tab highlight (#2551)

Browse Source
This commit is contained in:
C_Q
2018-11-22 17:00:23 +08:00
committed by Daniel Pan
parent fb6c097028
commit 2cf8f1b46e
9 changed files with 79 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/main-side-nav.js
View File

@@ -9,18 +9,18 @@ import { canViewOrg } from '../utils/constants';
const propTypes = {
currentTab: PropTypes.string.isRequired,
tabItemClick: PropTypes.func.isRequired,
draftCounts: PropTypes.number,
};
class MainSideNav extends React.Component {
constructor(props) {
super(props);
let currentTab = this.props.currentTab || '';
this.state = {
groupsExtended: false,
sharedExtended: false,
closeSideBar:false,
groupItems: [],
currentTab: currentTab,
};
this.listHeight = 24; //for caculate tabheight
@@ -53,9 +53,7 @@ class MainSideNav extends React.Component {
}
tabItemClick = (param) => {
this.setState({
currentTab: param
});
this.props.tabItemClick(param);
}
renderSharedGroups() {
@@ -65,7 +63,7 @@ class MainSideNav extends React.Component {
}
return (
<ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
<li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}>
<li className={this.props.currentTab === 'groups' ? 'tab-cur' : ''}>
<a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
<span className="sharp" aria-hidden="true">#</span>
{gettext('All Groups')}
@@ -73,7 +71,7 @@ class MainSideNav extends React.Component {
</li>
{this.state.groupItems.map(item => {
return (
<li key={item.id} className={this.state.currentTab === item.id ? 'tab-cur' : ''}>
<li key={item.id} className={this.props.currentTab === item.id ? 'tab-cur' : ''}>
<a href={siteRoot + '#group/' + item.id + '/'} className="ellipsis" onClick={() => this.tabItemClick(item.id)}>
<span className="sharp" aria-hidden="true">#</span>
{item.name}
@@ -96,19 +94,19 @@ 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.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
<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')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Libraries')}
</Link>
</li>
<li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
<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')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Folders')}
</Link>
</li>
<li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
<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')}>
<span aria-hidden="true" className="sharp">#</span>
{gettext('Links')}
@@ -124,20 +122,20 @@ class MainSideNav extends React.Component {
<div className="side-nav-con">
<h3 className="sf-heading">Files</h3>
<ul className="side-tabnav-tabs">
<li className={`tab ${this.state.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
<a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
<span className="sf2-icon-user" aria-hidden="true"></span>
{gettext('My Libraries')}
</a>
</li>
<li className={`tab ${this.state.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
<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')}>
<span className="sf2-icon-share" aria-hidden="true"></span>
{gettext('Shared with me')}
</Link>
</li>
{ canViewOrg &&
<li className={`tab ${this.state.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
<li className={`tab ${this.props.currentTab === 'org' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('org')}>
<a href={ siteRoot + '#org/' } className="ellipsis" title={gettext('Shared with all')}>
<span className="sf2-icon-organization" aria-hidden="true"></span>
{gettext('Shared with all')}
@@ -156,25 +154,25 @@ class MainSideNav extends React.Component {
<h3 className="sf-heading">Tools</h3>
<ul className="side-tabnav-tabs">
<li className={`tab ${this.state.currentTab === 'starred' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'starred' ? 'tab-cur' : ''}`}>
<Link 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.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
<Link 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.state.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
<li className={`tab ${this.props.currentTab === 'linked-devices' ? 'tab-cur' : ''}`}>
<Link 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.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
<li className={`tab ${this.props.currentTab === 'drafts' || this.props.currentTab === 'reviews' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
<Link 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>}