Draft dashboard optimized (#2384)

* create a common toolbar component

* optimized code

* combine side-panel

* add change state

frontend/src/components/main-side-nav.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { siteRoot } from './constants';
+import { gettext, siteRoot } from './constants';
 import { seafileAPI } from '../utils/seafile-api';
 
 class  MainSideNav extends React.Component {
   constructor(props) {
     super(props);
+    let currentTab = this.props.currentTab || '';
     this.state = {
       groupsExtended: false,
       sharedExtended: false,
       closeSideBar:false,
-      groupItems: []
+      groupItems: [],
+      currentTab: currentTab,
     };
 
     this.listHeight = 24; //for caculate tabheight
@@ -41,6 +43,12 @@ class  MainSideNav extends React.Component {
     })
   }
 
+  tabItemClick = (param) => {
+    this.setState({
+      currentTab: param
+    })
+  }
+
   renderSharedGroups() {
     let style = {height: 0};
     if (this.state.groupsExtended) {
@@ -48,15 +56,19 @@ class  MainSideNav extends React.Component {
     }
     return (
       <ul className={`grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
-        <li> 
-          <a href={siteRoot + '#groups/'}>
-          <span className="sharp" aria-hidden="true">#</span>All Groups</a>
+        <li className={this.state.currentTab === 'groups' ? 'tab-cur' : ''}> 
+          <a href={siteRoot + '#groups/'} onClick={() => this.tabItemClick('groups')}>
+          <span className="sharp" aria-hidden="true">#</span>
+          All Groups
+          </a>
         </li>
         {this.state.groupItems.map(item => {
           return (
-            <li key={item.id}> 
-              <a href={siteRoot + '#group/' + item.id + '/'}>
-              <span className="sharp" aria-hidden="true">#</span>{item.name}</a>
+            <li key={item.id} className={this.state.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}
+              </a>
             </li>
           )
         })}
@@ -75,14 +87,23 @@ 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>
-          <a href={siteRoot + '#share-admin-libs/'}><span aria-hidden="true" className="sharp">#</span>Libraries</a>
+        <li className={this.state.currentTab === 'share-admin-libs' ? 'tab-cur' : ''}>
+          <a href={siteRoot + '#share-admin-libs/'} className="ellipsis" title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
+            <span aria-hidden="true" className="sharp">#</span>
+            {gettext('Libraries')}
+          </a>
         </li>
-        <li>
-          <a href={siteRoot + '#share-admin-folders/'}><span aria-hidden="true" className="sharp">#</span>Folders</a>
+        <li className={this.state.currentTab === 'share-admin-folders' ? 'tab-cur' : ''}>
+          <a href={siteRoot + '#share-admin-folders/'} className="ellipsis" title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
+            <span aria-hidden="true" className="sharp">#</span>
+            {gettext('Folders')}
+          </a>
         </li>
-        <li>
-          <a href={siteRoot + '#share-admin-share-links/'}><span aria-hidden="true" className="sharp">#</span>Links</a>
+        <li className={this.state.currentTab === 'share-admin-share-links' ? 'tab-cur' : ''}>
+          <a href={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')}
+          </a>
         </li>
       </ul>
     )
@@ -94,31 +115,68 @@ class  MainSideNav extends React.Component {
         <div className="side-nav-con">
           <h3 className="sf-heading">Files</h3>
           <ul className="side-tabnav-tabs">
-            <li className="tab"><a href={ siteRoot + '#my-libs' } className="ellipsis" title="My Libraries"><span className="sf2-icon-user" aria-hidden="true"></span>My Libraries</a></li>
-            <li className="tab"><a href={ siteRoot + '#shared-libs/'} className="ellipsis" title="Shared with me"><span className="sf2-icon-share" aria-hidden="true"></span>Shared with me</a></li>
-            <li className="tab"><a href={ siteRoot + '#org/' } className="ellipsis" title="Shared with all"><span className="sf2-icon-organization" aria-hidden="true"></span>Shared with all</a></li>
+            <li className={`tab ${this.state.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' : ''}`}>
+              <a href={ 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')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.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')}
+              </a>
+            </li>
             <li className="tab" id="group-nav">
-              <a className="ellipsis user-select-no" title="Shared with groups" onClick={this.grpsExtend}><span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'icon-caret-left'}`} aria-hidden="true"></span><span className="sf2-icon-group" aria-hidden="true"></span>Shared with groups</a>
+              <a className="ellipsis user-select-no" 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')}
+              </a>
               {this.renderSharedGroups()}
             </li>
           </ul>
 
-          <div className="hd w-100 o-hidden">
-            <h3 className="float-left sf-heading">Tools</h3>
-          </div>
+          <h3 className="sf-heading">Tools</h3>
           <ul className="side-tabnav-tabs">
-            <li className="tab"><a href={siteRoot + '#starred/'}><span className="sf2-icon-star" aria-hidden="true"></span>Favorites</a></li>
-            <li className="tab"><a href={siteRoot + 'dashboard'}><span className="sf2-icon-clock" aria-hidden="true"></span>Acitivities</a></li>
-            <li className="tab"><a href={siteRoot + '#devices/'} className="ellipsis" title="Linked Devices"><span className="sf2-icon-monitor" aria-hidden="true"></span>Linked Devices</a></li>
-            <li className="tab" id="share-admin-nav">
-              <a className="ellipsis user-select-no" title="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>Share Admin</a>
-              {this.renderSharedAdmin()}
-            </li>
-            <li className="tab">
-              <a href={siteRoot + 'drafts/'}>
-                <span className="sf2-icon-edit" aria-hidden="true"></span>Drafts
+            <li className={`tab ${this.state.currentTab === 'favorites' ? 'tab-cur' : ''}`}>
+              <a href={siteRoot + '#starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('favorites')}>
+                <span className="sf2-icon-star" aria-hidden="true"></span>
+                {gettext('Favorites')}
               </a>
             </li>
+            <li className={`tab ${this.state.currentTab === 'dashboard' ? 'tab-cur' : ''}`}>
+              <a href={siteRoot + 'dashboard'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
+                <span className="sf2-icon-clock" aria-hidden="true"></span>
+                {gettext('Acitivities')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'devices' ? 'tab-cur' : ''}`}>
+              <a href={siteRoot + '#devices/'} className="ellipsis" title={gettext('Linked Devices')} onClick={() => this.tabItemClick('devices')}>
+                <span className="sf2-icon-monitor" aria-hidden="true"></span>
+                {gettext('Linked Devices')}
+              </a>
+            </li>
+            <li className={`tab ${this.state.currentTab === 'drafts' ? 'tab-cur' : ''}`} onClick={() => this.tabItemClick('drafts')}>
+              <a href={siteRoot + 'drafts/'} title={gettext('Drafts')}>
+                <span className="sf2-icon-edit" aria-hidden="true"></span>
+                {gettext('Drafts')}
+              </a>
+            </li>
+            <li className="tab" id="share-admin-nav">
+              <a className="ellipsis user-select-no" 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')}
+              </a>
+              {this.renderSharedAdmin()}
+            </li>
           </ul>
         </div>
       </div>