From c64bb90669514cd99d859cb0cf366ceb6da0d524 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Tue, 23 Jul 2024 10:49:42 +0800
Subject: [PATCH] 12.0 optimize wiki nav style (#6398)

* delete useless classnames

* change icon style

* fix click trigger area
---
 .../src/components/main-side-nav-folded.js    | 58 +++++++++----------
 frontend/src/css/main-side-nav-folded.css     |  4 ++
 frontend/src/css/side-nav-icon-tip.css        |  2 +
 .../filter-popover/widgets/filter-item.js     |  3 +-
 .../components/view-toolbar/index.js          |  3 +-
 frontend/src/pages/sdoc-revision/index.js     |  5 +-
 .../src/pages/wiki2/css/nav-item-icon.css     | 11 ++++
 frontend/src/pages/wiki2/css/wiki-nav.css     | 25 ++++----
 .../pages/wiki2/wiki-nav/pages/page-item.js   |  2 +-
 9 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/main-side-nav-folded.js b/frontend/src/components/main-side-nav-folded.js
index 12fc0fec18..0c0a13f851 100644
--- a/frontend/src/components/main-side-nav-folded.js
+++ b/frontend/src/components/main-side-nav-folded.js
@@ -39,47 +39,45 @@ class MainSideNavFolded extends React.Component {
         <div className={'side-nav-con d-flex flex-column'}>
           <ul className="nav nav-pills flex-column nav-container">
 
-            <li id="main-side-nav-folded-files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+            <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
               <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
-                <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
+                <span className="sf3-font-files sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-files"></span>
+                <Tip target="main-side-nav-folded-files" text={gettext('Files')} />
               </Link>
             </li>
-            <Tip target="main-side-nav-folded-files" text={gettext('Files')} />
 
-            <li className={`nav-item ${this.getActiveClass('starred')}`} id="main-side-nav-folded-starred">
+            <li className={`nav-item ${this.getActiveClass('starred')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
-                <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
+                <span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
+                <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
               </Link>
             </li>
-            <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
 
             {showActivity &&
               <>
-                <li className={`nav-item ${this.getActiveClass('dashboard')}`} id="main-side-nav-folded-dashboard">
+                <li className={`nav-item ${this.getActiveClass('dashboard')}`}>
                   <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
-                    <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
+                    <span className="sf3-font-activities sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-dashboard"></span>
+                    <Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
                   </Link>
                 </li>
-                <Tip target="main-side-nav-folded-dashboard" text={gettext('Activities')} />
               </>
             }
 
-            <li className={`nav-item ${this.getActiveClass('published')}`} id="main-side-nav-folded-wikis">
+            <li className={`nav-item ${this.getActiveClass('published')}`}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} onClick={(e) => this.tabItemClick(e, 'published')}>
-                <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
+                <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
+                <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
               </Link>
             </li>
-            <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
 
             {canInvitePeople &&
-              <>
-                <li className={`nav-item ${this.getActiveClass('invitations')}`} id="main-side-nav-folded-invitations">
-                  <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
-                    <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
-                  </Link>
-                </li>
-                <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
-              </>
+              <li className={`nav-item ${this.getActiveClass('invitations')}`}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} onClick={(e) => this.tabItemClick(e, 'invitations')}>
+                  <span className="sf3-font-invite-visitors sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-invitations"></span>
+                  <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
+                </Link>
+              </li>
             }
 
             {customNavItems &&
@@ -99,20 +97,20 @@ class MainSideNavFolded extends React.Component {
             <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
             :
             <ul className="nav nav-pills flex-column nav-container">
-              <li className='nav-item' id="main-side-nav-folded-help">
+              <li className='nav-item'>
                 <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
-                  <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
+                  <span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
+                  <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
                 </a>
               </li>
-              <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
               {enableTC &&
                 <>
-                  <li className='nav-item' id="main-side-nav-folded-terms">
+                  <li className='nav-item'>
                     <a href={`${siteRoot}terms/`} className="nav-link">
-                      <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
+                      <span className="sf3-font-terms sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-terms"></span>
+                      <Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
                     </a>
                   </li>
-                  <Tip target="main-side-nav-folded-terms" text={gettext('Terms')} />
                 </>
               }
               {additionalAppBottomLinks && (
@@ -120,18 +118,18 @@ class MainSideNavFolded extends React.Component {
                   {Object.keys(additionalAppBottomLinks).map((key, index) => {
                     return (
                       <a className="nav-link" href={additionalAppBottomLinks[key]}>
-                        <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
+                        <span className="sf3-font-terms sf3-font mr-0" aria-hidden="true"></span>
                       </a>
                     );
                   })}
                 </>
               )}
-              <li className='nav-item' id="main-side-nav-folded-clients">
+              <li className='nav-item'>
                 <a href={siteRoot + 'download_client_program/'} className="nav-link">
-                  <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
+                  <span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
+                  <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
                 </a>
               </li>
-              <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
             </ul>
           }
           <div
diff --git a/frontend/src/css/main-side-nav-folded.css b/frontend/src/css/main-side-nav-folded.css
index c54ba2f397..a705d73623 100644
--- a/frontend/src/css/main-side-nav-folded.css
+++ b/frontend/src/css/main-side-nav-folded.css
@@ -6,6 +6,10 @@
   overflow: visible;
 }
 
+.side-panel .side-nav-folded .nav-item {
+  cursor: default;
+}
+
 .side-panel .side-nav-folded .nav-item .nav-link:hover {
   transition: all 250ms cubic-bezier(0.25, 0.1, 0.25, 0.1);
 }
diff --git a/frontend/src/css/side-nav-icon-tip.css b/frontend/src/css/side-nav-icon-tip.css
index 52e2ae7d18..7210c75f3e 100644
--- a/frontend/src/css/side-nav-icon-tip.css
+++ b/frontend/src/css/side-nav-icon-tip.css
@@ -1,5 +1,7 @@
 .side-nav-icon-tip-popover {
   cursor: pointer;
+  padding-left: 0 !important;
+  left: 20px !important;
 }
 
 .side-nav-icon-tip {
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
index 2bec79cddc..3516e08f7b 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
 import { CustomizeSelect, IconBtn, SearchInput, Icon } from '@seafile/sf-metadata-ui-component';
 import {
@@ -250,7 +249,7 @@ class FilterItem extends React.Component {
           value={filterTerm}
           onChange={this.onFilterTermTextChanged}
           autoFocus={false}
-          className={classnames('text-truncate')}
+          className='text-truncate'
         />
       );
     } else if (type === 'checkbox') {
diff --git a/frontend/src/metadata/metadata-view/components/view-toolbar/index.js b/frontend/src/metadata/metadata-view/components/view-toolbar/index.js
index f8a992ad6f..ea13ddf5a3 100644
--- a/frontend/src/metadata/metadata-view/components/view-toolbar/index.js
+++ b/frontend/src/metadata/metadata-view/components/view-toolbar/index.js
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter';
 import { EVENT_BUS_TYPE } from '../../constants';
 
@@ -60,7 +59,7 @@ const ViewToolBar = ({ metadataViewId }) => {
 
   return (
     <div
-      className={classnames('sf-metadata-tool')}
+      className='sf-metadata-tool'
       // style={{ zIndex: Z_INDEX.TABLE_HEADER, transform: 'translateZ(1000px)' }}
       onClick={onHeaderClick}
     >
diff --git a/frontend/src/pages/sdoc-revision/index.js b/frontend/src/pages/sdoc-revision/index.js
index ed67ca9e4e..088c0f24d1 100644
--- a/frontend/src/pages/sdoc-revision/index.js
+++ b/frontend/src/pages/sdoc-revision/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import classnames from 'classnames';
 import { Button } from 'reactstrap';
 import { DiffViewer } from '@seafile/sdoc-editor';
 import { gettext } from '../../utils/constants';
@@ -8,10 +7,10 @@ import Loading from '../../components/loading';
 import GoBack from '../../components/common/go-back';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../../components/toast';
 
 import '../../css/layout.css';
 import '../../css/sdoc-revision.css';
-import toaster from '../../components/toast';
 
 const { serviceURL, avatarURL, siteRoot } = window.app.config;
 const { username, name } = window.app.pageOptions;
@@ -112,7 +111,7 @@ class SdocRevision extends React.Component {
       <div className="sdoc-revision d-flex h-100 w-100 o-hidden">
         <div className="sdoc-revision-container d-flex flex-column">
           <div className="sdoc-revision-header pl-4 pr-4 d-flex justify-content-between w-100 o-hidden">
-            <div className={classnames('sdoc-revision-header-left h-100 d-flex align-items-center o-hidden')}>
+            <div className='sdoc-revision-header-left h-100 d-flex align-items-center o-hidden'>
               <GoBack />
               <div className="file-name text-truncate">{fileName}</div>
             </div>
diff --git a/frontend/src/pages/wiki2/css/nav-item-icon.css b/frontend/src/pages/wiki2/css/nav-item-icon.css
index 74c4a8f2b6..62067779aa 100644
--- a/frontend/src/pages/wiki2/css/nav-item-icon.css
+++ b/frontend/src/pages/wiki2/css/nav-item-icon.css
@@ -9,6 +9,17 @@
   margin-right: 8px;
 }
 
+.nav-item-icon .sf3-font {
+  color: #666666;
+  line-height: 16px;
+}
+
+.nav-item-icon .seafile-multicolor-icon {
+  color: #666666;
+  height: 16px;
+  width: 16px;
+}
+
 .nav-item-icon:hover:not(.nav-item-icon-disable) {
   background-color: #DFDFDD;
 }
diff --git a/frontend/src/pages/wiki2/css/wiki-nav.css b/frontend/src/pages/wiki2/css/wiki-nav.css
index f3c134e548..b5764a7687 100644
--- a/frontend/src/pages/wiki2/css/wiki-nav.css
+++ b/frontend/src/pages/wiki2/css/wiki-nav.css
@@ -54,10 +54,9 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: 40px;
+  height: 32px;
   padding: 0 8px 0 0;
   font-size: 14px;
-  font-weight: 500;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
@@ -66,6 +65,7 @@
 
 .wiki-nav .wiki-page-item.selected-page {
   background-color: #EDEDEA;
+  font-weight: 500;
 }
 
 .wiki-nav .wiki-page-item:hover {
@@ -94,10 +94,6 @@
   overflow: hidden;
 }
 
-.wiki-nav .wiki-page-content {
-  padding-left: calc(12 * 0.8px + 0.5rem);
-}
-
 .wiki-nav .wiki-page-content:hover {
   cursor: pointer;
 }
@@ -108,19 +104,27 @@
 }
 
 .wiki-nav .wiki-page-content .wiki-page-title {
-  height: 40px;
-  line-height: 40px;
+  height: 32px;
+  line-height: 32px;
   flex: 1;
 }
 
 .wiki-nav .more-wiki-page-operation {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
+  padding: 0 2px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.wiki-nav .wiki-add-page-btn {
+  height: 20px;
+  line-height: 20px;
+  padding: 0 3px;
+  margin-left: 4px;
+}
+
 .wiki-nav .wiki-add-page-btn:hover,
 .wiki-nav .more-wiki-page-operation:hover {
   border-radius: 3px;
@@ -129,6 +133,7 @@
 
 .wiki-nav .wiki-page-item .sf3-font.sf3-font-enlarge,
 .wiki-nav .wiki-page-item .more-wiki-page-operation .seafile-multicolor-icon-more-level {
+  font-size: 14px;
   cursor: pointer;
   opacity: 0;
 }
diff --git a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
index 4da69d9415..caaa9da9eb 100644
--- a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
+++ b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
@@ -231,7 +231,7 @@ class PageItem extends Component {
                           />
                         }
                       </div>
-                      <div className="wiki-add-page-btn ml-1 px-1" onClick={this.toggleInsertPage}>
+                      <div className="wiki-add-page-btn" onClick={this.toggleInsertPage}>
                         <span className='sf3-font sf3-font-enlarge'></span>
                       </div>
                     </>