Seahub UI (#5261)

* [top toolbar] fixed the position of the vertical line between 2 sides

- fixed it for all the pages
- removed the duplicated 'div.main-panel' in 'lib-content-view'

* [search] modified the UI

* [top toolbar] redesigned the notification

* [top toolbar] avatar & the triangle: modified the UI

* [left side panel] updated the UI; fixup & improvement

* [misc] modified links' color, op-icon, and etc.

* [misc] updated UI for share dialog, other dialogs, & 'more operations' dropdown

* [misc] UI: modified markdown side panels, comment panels, input/textarea placeholder

* ['user settings' page] modified UI

* [shared dir upload link page] modified the UI

* [user settings] modified the UI

* [user settings] fixup

* [seafile-ui.css] use an updated one (modified color of buttons)

frontend/src/components/common/account.js

@@ -144,7 +144,7 @@ class Account extends Component {
     return (
       <div id="account">
         <a id="my-info" href="#" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label={gettext("View profile and more")}>
-          <span>{this.renderAvatar()}</span>
+          {this.renderAvatar()}
           <span className="fas fa-caret-down vam"></span>
         </a>
         <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label={gettext("View profile and more")} onClick={this.onClickAccount}></span>

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -143,7 +143,7 @@ class ItemDropdownMenu extends React.Component {
     }
 
     return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick}>
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.onDropdownToggleClick} className="vam">
         <DropdownToggle
           tag={tagName || 'i'}
           role="button"

frontend/src/components/main-panel.js

@@ -9,7 +9,7 @@ class MainPanel extends Component {
 
   render() {
     return (
-      <div className="main-panel o-hidden">
+      <div className="main-panel">
         {this.props.children}
       </div>
     );

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

@@ -210,9 +210,9 @@ class MainSideNav extends React.Component {
             }
             <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>
                 <span className="nav-text">{gettext('Shared with groups')}</span>
+                <span className={`toggle-icon fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
               </a>
               {this.renderSharedGroups()}
             </li>
@@ -263,10 +263,8 @@ class MainSideNav extends React.Component {
               <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                   <span className="sf2-icon-edit" aria-hidden="true"></span>
-                  <span className="draft-info nav-text">
-                    {gettext('Drafts')}
-                    {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
-                  </span>
+                  <span className="nav-text">{gettext('Drafts')}</span>
+                  {this.props.draftCounts > 0 && <span id="draft-num">{this.props.draftCounts}</span>}
                 </Link>
               </li>
             }
@@ -286,9 +284,9 @@ class MainSideNav extends React.Component {
             }
             <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 className="sf2-icon-wrench" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
+                <span className={`toggle-icon fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
               </a>
               {this.renderSharedAdmin()}
             </li>

frontend/src/components/user-settings/side-nav.js

@@ -11,7 +11,7 @@ class SideNav extends React.Component {
       <ul className="nav flex-column user-setting-nav">
         {this.props.data.map((item, index) => {
           return item.show ?
-            <li key={index} className={`nav-item ${this.props.curItemID == item.href.substr(1) && 'active'}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
+            <li key={index} className={`nav-item${this.props.curItemID == item.href.substr(1) ? ' active' : ''}`}><a className="nav-link" href={item.href}>{item.text}</a></li> : null;
         })}
       </ul>
     );