[settings] redesigned the 'heading' bar; fixup for the side nav; impr… (#6250)

* [settings] redesigned the 'heading' bar; fixup for the side nav; improved UI for content headings

* [settings] resigned it (the top bar, the side panel; the code frame)

frontend/src/settings.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import { navigate } from '@gatsbyjs/reach-router';
+import MediaQuery from 'react-responsive';
+import { Modal } from 'reactstrap';
 import { Utils } from './utils/utils';
-import { isPro, isDBSqlite3, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
+import { isPro, isDBSqlite3, gettext, siteRoot } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import toaster from './components/toast';
-import CommonToolbar from './components/toolbar/common-toolbar';
+import SidePanel from './components/side-panel';
+import MainPanel from './components/main-panel';
+import TopToolbar from './components/toolbar/top-toolbar';
 import SideNav from './components/user-settings/side-nav';
 import UserAvatarForm from './components/user-settings/user-avatar-form';
 import UserBasicInfoForm from './components/user-settings/user-basic-info-form';
@@ -21,6 +24,7 @@ import SocialLoginSAML from './components/user-settings/social-login-saml';
 import LinkedDevices from './components/user-settings/linked-devices';
 import DeleteAccount from './components/user-settings/delete-account';
 
+import './css/layout.css';
 import './css/toolbar.css';
 import './css/search.css';
 
@@ -59,6 +63,7 @@ class Settings extends React.Component {
     ];
 
     this.state = {
+      isSidePanelClosed: false,
       curItemID: this.sideNavItems[0].href.substr(1)
     };
   }
@@ -86,17 +91,6 @@ class Settings extends React.Component {
     });
   };
 
-  onSearchedClick = (selectedItem) => {
-    if (selectedItem.is_dir === true) {
-      let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
-      navigate(url, {repalce: true});
-    } else {
-      let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
-      let newWindow = window.open('about:blank');
-      newWindow.location.href = url;
-    }
-  };
-
   handleContentScroll = (e) => {
     const scrollTop = e.target.scrollTop;
     const scrolled = this.sideNavItems.filter((item, index) => {
@@ -109,50 +103,79 @@ class Settings extends React.Component {
     }
   };
 
+  onCloseSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  };
+
+  onShowSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  };
+
+  toggleSidePanel = () => {
+    this.setState({
+      isSidePanelClosed: !this.state.isSidePanelClosed
+    });
+  };
+
   render() {
+    const { isSidePanelClosed } = this.state;
     return (
       <React.Fragment>
-        <div className="h-100 d-flex flex-column">
-          <div className="top-header d-flex justify-content-between">
-            <a href={siteRoot}>
-              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
-            </a>
-            <CommonToolbar onSearchedClick={this.onSearchedClick} />
-          </div>
-          <div className="flex-auto d-flex o-hidden">
-            <div className="side-panel o-auto">
-              <SideNav data={this.sideNavItems} curItemID={this.state.curItemID} />
-            </div>
-            <div className="main-panel d-flex flex-column">
-              <h2 className="heading">{gettext('Settings')}</h2>
-              <div className="content position-relative" onScroll={this.handleContentScroll}>
-                <div id="user-basic-info" className="setting-item">
-                  <h3 className="setting-item-heading">{gettext('Profile Setting')}</h3>
-                  <UserAvatarForm  />
-                  {this.state.userInfo && <UserBasicInfoForm userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+        <div id="main" className="h-100">
+          <SidePanel
+            isSidePanelClosed={isSidePanelClosed}
+            onCloseSidePanel={this.onCloseSidePanel}
+          >
+            <SideNav data={this.sideNavItems} curItemID={this.state.curItemID} />
+          </SidePanel>
+          <MainPanel>
+            <>
+              <TopToolbar
+                onShowSidePanel={this.onShowSidePanel}
+                showSearch={false}
+              >
+              </TopToolbar>
+              <div className="main-panel-center flex-row">
+                <div className="cur-view-container">
+                  <div className="cur-view-path">
+                    <h3 className="sf-heading m-0">{gettext('Settings')}</h3>
+                  </div>
+                  <div className="cur-view-content content position-relative" onScroll={this.handleContentScroll}>
+                    <div id="user-basic-info" className="setting-item">
+                      <h3 className="setting-item-heading">{gettext('Profile Setting')}</h3>
+                      <UserAvatarForm />
+                      {this.state.userInfo && <UserBasicInfoForm userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+                    </div>
+                    {canUpdatePassword &&
+                    <div id="update-user-passwd" className="setting-item">
+                      <h3 className="setting-item-heading">{gettext('Password')}</h3>
+                      <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
+                    </div>
+                    }
+                    {enableGetAuthToken && <WebAPIAuthToken />}
+                    {enableWebdavSecret && <WebdavPassword />}
+                    {enableAddressBook && this.state.userInfo &&
+                    <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
+                    <LanguageSetting />
+                    {(isPro || !isDBSqlite3) && <EmailNotice />}
+                    {twoFactorAuthEnabled && <TwoFactorAuthentication />}
+                    {enableWechatWork && <SocialLogin />}
+                    {enableDingtalk && <SocialLoginDingtalk />}
+                    {(enableADFS || (enableMultiADFS && isOrgContext)) && <SocialLoginSAML />}
+                    <LinkedDevices />
+                    {enableDeleteAccount && <DeleteAccount />}
+                  </div>
                 </div>
-                {canUpdatePassword &&
-                <div id="update-user-passwd" className="setting-item">
-                  <h3 className="setting-item-heading">{gettext('Password')}</h3>
-                  <a href={`${siteRoot}accounts/password/change/`} className="btn btn-outline-primary">{passwordOperationText}</a>
-                </div>
-                }
-
-                {enableGetAuthToken && <WebAPIAuthToken />}
-                {enableWebdavSecret && <WebdavPassword />}
-                {enableAddressBook && this.state.userInfo &&
-                  <ListInAddressBook userInfo={this.state.userInfo} updateUserInfo={this.updateUserInfo} />}
-                <LanguageSetting />
-                {(isPro || !isDBSqlite3) && <EmailNotice />}
-                {twoFactorAuthEnabled && <TwoFactorAuthentication />}
-                {enableWechatWork && <SocialLogin />}
-                {enableDingtalk && <SocialLoginDingtalk />}
-                {(enableADFS || (enableMultiADFS && isOrgContext)) && <SocialLoginSAML />}
-                <LinkedDevices />
-                {enableDeleteAccount && <DeleteAccount />}
               </div>
-            </div>
-          </div>
+            </>
+          </MainPanel>
+          <MediaQuery query="(max-width: 767.8px)">
+            <Modal zIndex="1030" isOpen={!isSidePanelClosed} toggle={this.toggleSidePanel} contentClassName="d-none"></Modal>
+          </MediaQuery>
         </div>
       </React.Fragment>
     );