UI details (#6049)

* ['Files'] make the headings such as 'My Libraries' and the library star/unstar icons left-aligned

* ['dir view'] 'path bar' improvement: display the current side nav item(such as 'Files', 'My Libraries', groupname & etc.) in it

* [side nav] improvement: when visit the siteRoot page, highlight the 'Files' tab

* [border color] modified border color in tables & other UIs (so that they are same)

frontend/src/app.js

@@ -52,10 +52,10 @@ class App extends Component {
     this.state = {
       isOpen: false,
       isSidePanelClosed: false,
-      currentTab: '/',
+      currentTab: '',
       pathPrefix: [],
     };
-    this.dirViewPanels = ['my-libs', 'shared-libs', 'org']; // and group
+    this.dirViewPanels = ['libraries', 'my-libs', 'shared-libs', 'org']; // and group
     window.onpopstate = this.onpopstate;
   }
 
@@ -88,9 +88,15 @@ class App extends Component {
     // navigate to library page http://127.0.0.1:8000/library/34e7fb92-e91d-499d-bcde-c30ea8af9828/
     this.navigateClientUrlToLib();
 
-    // TODO: need refactor later
+    let currentTab;
+    // when visit the siteRoot page, highlight the 'Files' tab in the side nav.
+    if (location.pathname == siteRoot) {
+      currentTab = 'libraries';
+    } else {
       let href = window.location.href.split('/');
-    this.setState({currentTab: href[href.length - 2]});
+      currentTab = href[href.length - 2];
+    }
+    this.setState({currentTab: currentTab});
   }
 
   onCloseSidePanel = () => {
@@ -129,7 +135,7 @@ class App extends Component {
         url = siteRoot + 'group/' + groupID + '/';
       }
       else {
-        url = siteRoot + 'groups/';
+        url = siteRoot + 'libraries/';
       }
       window.location = url.toString();
     }, 1);
@@ -155,20 +161,13 @@ class App extends Component {
   generatorPrefix = (tabName, groupID) => {
     let pathPrefix = [];
     if (groupID) {
-      let navTab1 = {
-        url: siteRoot + 'groups/',
-        showName: 'Groups',
-        name: 'groups',
-        id: null,
-      };
-      let navTab2 = {
+      let navTab = {
         url: siteRoot + 'group/' + groupID + '/',
         showName: tabName,
         name: tabName,
         id: groupID,
       };
-      pathPrefix.push(navTab1);
-      pathPrefix.push(navTab2);
+      pathPrefix.push(navTab);
     } else {
       let navTab = {
         url: siteRoot + tabName + '/',
@@ -182,15 +181,20 @@ class App extends Component {
   };
 
   getTabShowName = (tabName) => {
-    if (tabName === 'my-libs') {
-      return 'Libraries';
+    switch (tabName) {
+      case 'libraries': {
+        return 'Files';
       }
-    if (tabName === 'shared-libs') {
+      case 'my-libs': {
+        return 'My Libraries';
+      }
+      case 'shared-libs': {
         return 'Shared with me';
       }
-    if (tabName === 'org') {
+      case 'org': {
         return 'Shared with all';
       }
+    }
   };
 
   toggleSidePanel = () => {

frontend/src/components/cur-dir-path/dir-path.js

@@ -88,13 +88,13 @@ class DirPath extends React.Component {
         })}
         {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
           <Fragment>
-            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
+            <Link to={siteRoot + 'libraries/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}
         {!this.props.pathPrefix && (
           <Fragment>
-            <Link href={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
+            <Link to={siteRoot + 'libraries/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}

frontend/src/css/files.css

@@ -0,0 +1,5 @@
+#files-content-container td:first-child {
+  text-align: left!important;
+  padding-left: 20px;
+}
+  

frontend/src/css/groups.css

@@ -25,5 +25,5 @@
   color: #a4a4a4;
   text-align: center;
   padding: 4px 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e8e8e8;
 }

frontend/src/pages/groups/group-item.js

@@ -74,7 +74,7 @@ class GroupItem extends React.Component {
     const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
     return (
       <div className="pb-3">
-        <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
+        <div className="d-flex justify-content-between mt-3 py-1 sf-border-bottom">
           <h4 className="sf-heading m-0 ellipsis">
             <span className="sf3-font-group sf3-font nav-icon" aria-hidden="true"></span>
             <a href={`${siteRoot}group/${group.id}/`} title={group.name}>{group.name}</a>

frontend/src/pages/libraries/index.js

@@ -19,6 +19,8 @@ import SharedLibs from '../../pages/shared-libs/shared-libs.js';
 import SharedWithAll from '../../pages/shared-with-all';
 import GroupItem from '../../pages/groups/group-item';
 
+import '../../css/files.css';
+
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired
@@ -224,7 +226,7 @@ class Libraries extends Component {
             <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
             </div>
-            <div className="cur-view-content">
+            <div className="cur-view-content" id="files-content-container">
 
               <table aria-hidden={true} className="my-3">
                 <thead>
@@ -242,7 +244,7 @@ class Libraries extends Component {
 
               {canAddRepo && (
                 <div className="pb-3">
-                  <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
+                  <div className="d-flex justify-content-between mt-3 py-1 sf-border-bottom">
                     <h4 className="sf-heading m-0">
                       <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                       {gettext('My Libraries')}

frontend/src/pages/shared-libs/shared-libs.js

@@ -478,7 +478,7 @@ class SharedLibraries extends Component {
       <Fragment>
         {inAllLibs ? (
           <>
-            <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
+            <div className="d-flex justify-content-between mt-3 py-1 sf-border-bottom">
               <h4 className="sf-heading m-0">
                 {inAllLibs && <span className="sf3-font-share-with-me sf3-font nav-icon" aria-hidden="true"></span>}
                 {gettext('Shared with me')}

frontend/src/pages/shared-with-all/index.js

@@ -154,7 +154,7 @@ class PublicSharedView extends React.Component {
     if (inAllLibs) {
       return (
         <>
-          <div className="d-flex justify-content-between mt-3 p-1 border-bottom">
+          <div className="d-flex justify-content-between mt-3 py-1 sf-border-bottom">
             <h4 className="sf-heading m-0">
               <span className="sf3-font-share-with-all sf3-font nav-icon" aria-hidden="true"></span>
               {gettext('Shared with all')}

media/css/seahub_react.css

@@ -163,6 +163,10 @@ a, a:hover { color: #ec8000; }
     cursor: pointer;
 }
 
+.sf-border-bottom {
+  border-bottom: 1px solid #e8e8e8;
+}
+
 .vh {
     visibility: hidden;
 }
@@ -857,7 +861,7 @@ table tbody tr {
 
 table th {
     padding: 0.3125rem 0.1875rem;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e8e8e8;
     text-align: left;
     font-weight: normal;
     font-size: 0.8125rem;
@@ -867,7 +871,7 @@ table th {
 
 table td {
     padding: 0.5rem 0.1875rem;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e8e8e8;
     color: #333;
     font-size: 0.875rem;
     word-break: break-all;