12.0 change triangle icon (#6233)

* change main page * change main panel icon to #666666 * change wiki icon * change sort icons * change hidden header table * change style
2025-04-28 03:10:45 +00:00 · 2024-06-21 12:07:58 +08:00 · 2024-06-21 12:07:58 +08:00 · b7e686786a
commit b7e686786a
parent bcc0576014
52 changed files with 102 additions and 169 deletions
--- a/frontend/src/assets/icons/drop-down.svg
+++ b/frontend/src/assets/icons/drop-down.svg
@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#949494;}
-</style>
-<title>drop-down</title>
-<g id="drop-down">
-	<g id="下拉" transform="translate(2.000000, 6.000000)">
-		<path id="路径" class="st0" d="M15.7,19.2L27.4,4.5C28.8,2.8,27.7,0,25.7,0H2.3c-2,0-3.1,2.7-1.7,4.5l11.7,14.7
-			C13.2,20.3,14.8,20.3,15.7,19.2z"/>
-	</g>
-</g>
-</svg>
--- a/frontend/src/assets/icons/left-slide.svg
+++ b/frontend/src/assets/icons/left-slide.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#949494;}
-</style>
-<title>left-slide</title>
-<g id="left-slide">
-	
-		<g id="下拉" transform="translate(16.000000, 16.000000) rotate(90.000000) translate(-16.000000, -16.000000) translate(2.000000, 6.000000)">
-		<path id="路径" class="st0" d="M15.7,19.2L27.4,4.5C28.8,2.8,27.7,0,25.7,0H2.3c-2,0-3.1,2.7-1.7,4.5l11.7,14.7
-			C13.2,20.3,14.8,20.3,15.7,19.2z"/>
-	</g>
-</g>
-</svg>
--- a/frontend/src/assets/icons/right-slide.svg
+++ b/frontend/src/assets/icons/right-slide.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#949494;}
-</style>
-<title>right-slide</title>
-<g id="right-slide">
-	
-		<g id="下拉" transform="translate(16.000000, 16.000000) rotate(-90.000000) translate(-16.000000, -16.000000) translate(2.000000, 6.000000)">
-		<path id="路径" class="st0" d="M15.7,19.2L27.4,4.5C28.8,2.8,27.7,0,25.7,0H2.3c-2,0-3.1,2.7-1.7,4.5l11.7,14.7
-			C13.2,20.3,14.8,20.3,15.7,19.2z"/>
-	</g>
-</g>
-</svg>
--- a/frontend/src/assets/icons/upward.svg
+++ b/frontend/src/assets/icons/upward.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#949494;}
-</style>
-<title>upward</title>
-<g id="upward">
-	
-		<g id="下拉" transform="translate(16.000000, 16.000000) scale(1, -1) translate(-16.000000, -16.000000) translate(2.000000, 6.000000)">
-		<path id="路径" class="st0" d="M15.7,19.2L27.4,4.5C28.8,2.8,27.7,0,25.7,0H2.3c-2,0-3.1,2.7-1.7,4.5l11.7,14.7
-			C13.2,20.3,14.8,20.3,15.7,19.2z"/>
-	</g>
-</g>
-</svg>
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.css
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.css
@ -22,11 +22,6 @@
  cursor: pointer;
 }

-.extra-attributes-dialog .selected-single-select-container .fa-caret-down {
-  font-size: 16px;
-  color: #949494;
-}
-
 .extra-attributes-dialog .selected-single-select-container .single-select-option {
  text-align: center;
  width: min-content;
--- a/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.js
+++ b/frontend/src/components/dialog/extra-attributes-dialog/editor/single-select/index.js
@ -55,7 +55,7 @@ class SingleSelect extends Component {
              )}
            </div>
            {column.editable && (
-              <i className="fas fa-caret-down"></i>
+              <i className="sf3-font sf3-font-down"></i>
            )}
          </div>
        </div>
--- a/frontend/src/components/dialog/tag-color.js
+++ b/frontend/src/components/dialog/tag-color.js
@ -71,7 +71,7 @@ class TagColor extends React.Component {
          style={{backgroundColor: tagColor}}
          onClick={this.togglePopover}
        >
-          <i className="fas fa-caret-down text-white"></i>
+          <i className="sf3-font sf3-font-down text-white"></i>
        </span>
        <Popover
          target={`tag-${id}-color`}
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@ -600,7 +600,7 @@ class DirentListView extends React.Component {
    const sortByName = sortBy == 'name';
    const sortByTime = sortBy == 'time';
    const sortBySize = sortBy == 'size';
-    const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+    const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

    const isDesktop = Utils.isDesktop();

--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@ -378,7 +378,7 @@ class FileChooser extends React.Component {
          <Fragment>
            <div className="list-view">
              <div className="list-view-header">
-                <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
+                <span className={`item-toggle sf3-font ${this.state.isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
                <span className="library">{gettext('Current Library')}</span>
              </div>
              {
@ -399,7 +399,7 @@ class FileChooser extends React.Component {
            </div>
            <div className="list-view">
              <div className="list-view-header">
-                <span className={`item-toggle fa ${this.state.isOtherRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onOtherRepoToggle}></span>
+                <span className={`item-toggle sf3-font ${this.state.isOtherRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onOtherRepoToggle}></span>
                <span className="library">{gettext('Other Libraries')}</span>
              </div>
              {
@ -423,7 +423,7 @@ class FileChooser extends React.Component {
          <div className="list-view">
            {!this.props.hideLibraryName &&
            <div className="list-view-header">
-              <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
+              <span className={`item-toggle sf3-font ${this.state.isCurrentRepoShow ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onCurrentRepoToggle}></span>
              <span className="library">{gettext('Current Library')}</span>
            </div>
            }
@ -449,7 +449,7 @@ class FileChooser extends React.Component {
          <div className="file-chooser-container">
            <div className="list-view">
              <div className="list-view-header">
-                <span className="item-toggle fa fa-caret-down"></span>
+                <span className="item-toggle sf3-font sf3-font-down"></span>
                <span className="library">{gettext('Libraries')}</span>
              </div>
              <RepoListView
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TreeListView from './tree-list-view';
-
 import TreeNode from '../../components/tree-view/tree-node';
 import Dirent from '../../models/dirent';
 import { seafileAPI } from '../../utils/seafile-api';
@ -206,7 +205,7 @@ class RepoListItem extends React.Component {
              <span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
            </div>
            <div className="item-left-icon">
-              <span className={`item-toggle icon fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
+              <span className={`item-toggle icon sf3-font ${this.state.isShowChildren ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onToggleClick}></span>
              <i className="tree-node-icon">
                <span className="icon far fa-folder tree-node-icon"></span>
              </i>
--- a/frontend/src/components/file-chooser/tree-list-item.js
+++ b/frontend/src/components/file-chooser/tree-list-item.js
@ -107,7 +107,7 @@ class TreeViewItem extends React.Component {
            <div className="item-left-icon">
              {
                node.object.type !== 'file' &&
-                <span className={`icon item-toggle fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
+                <span className={`icon item-toggle sf3-font ${node.isExpanded ? 'sf3-font-down' : 'sf3-font-down rotate-270 d-inline-block'}`} onClick={this.onToggleClick}></span>
              }
              <i className="tree-node-icon">
                <span className={`icon far ${node.object.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span>
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@ -224,7 +224,7 @@ class MainSideNav extends React.Component {
              <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="nav-text">{gettext('Files')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
+                <span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
              </Link>
              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0}}>
                {canAddRepo && (
@ -285,7 +285,7 @@ class MainSideNav extends React.Component {
              <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
                <span className="nav-text">{gettext('Share Admin')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-drop-down ${this.state.sharedExtended ? '' : 'icon-rotate-90'}`} aria-hidden="true"></span>
+                <span className={`toggle-icon sf3-font sf3-font-down ${this.state.sharedExtended ? '' : 'rotate-90'}`} aria-hidden="true"></span>
              </a>
              {this.renderSharedAdmin()}
            </li>
--- a/frontend/src/components/popover/virtual-tag-color.js
+++ b/frontend/src/components/popover/virtual-tag-color.js
@ -63,7 +63,7 @@ export default class VirtualTagColor extends React.Component {
          style={{backgroundColor: tagColor}}
          onClick={this.togglePopover}
        >
-          <i className="fas fa-caret-down text-white"></i>
+          <i className="sf3-font sf3-font-down text-white"></i>
        </span>
        <Popover
          target={`tag-${id}-color`}
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@ -539,11 +539,11 @@ class SharedRepoListItem extends React.Component {
                      onMouseMove={(e) => {e.stopPropagation();}}
                    >
                      <DropdownToggle
-                        caret
                        className="dropdown-item font-weight-normal rounded-0 d-flex justify-content-between align-items-center pr-2"
                        onMouseEnter={this.toggleAdvancedMenuShown}
                      >
                        {this.translateMenuItem(item)}
+                        <i className="sf3-font-down sf3-font rotate-270"></i>
                      </DropdownToggle>
                      <DropdownMenu>
                        {advancedOperations.map((item, index)=> {
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
@ -59,7 +59,7 @@ class SharedRepoListView extends React.Component {
      sortByName: this.props.sortBy == 'name',
      sortByTime: this.props.sortBy == 'time',
      sortBySize: this.props.sortBy == 'size',
-      sortIcon: this.props.sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>
+      sortIcon: this.props.sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>
    };
  };

--- a/frontend/src/components/single-selector.js
+++ b/frontend/src/components/single-selector.js
@ -74,7 +74,7 @@ class Selector extends Component {
          {customSelectorToggle ? customSelectorToggle : (
            <span className="cur-option">
              {currentSelectedOption.text}
-              {isDropdownToggleShown && <i className="fas fa-caret-down ml-2 toggle-icon"></i>}
+              {isDropdownToggleShown && <i className="sf3-font sf3-font-down ml-2 toggle-icon"></i>}
            </span>
          )}
        </div>
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@ -234,7 +234,7 @@ class DirOperationToolbar extends React.Component {
              data-toggle="dropdown"
            >
              {this.props.children}
-              <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
+              <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
            </DropdownToggle>
            <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
              {opList.map((item, index)=> {
@ -251,13 +251,13 @@ class DirOperationToolbar extends React.Component {
                      onMouseMove={(e) => {e.stopPropagation();}}
                    >
                      <DropdownToggle
-                        caret
                        tag='div'
                        className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
                        onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
                      >
                        <i className={`sf3-font-${item.icon} sf3-font mr-2 dropdown-item-icon`}></i>
                        <span className="mr-auto">{item.text}</span>
+                        <i className="sf3-font-down sf3-font rotate-270"></i>
                      </DropdownToggle>
                      <DropdownMenu>
                        {item.subOpList.map((item, index)=> {
--- a/frontend/src/components/toolbar/single-dropdown-toolbar.js
+++ b/frontend/src/components/toolbar/single-dropdown-toolbar.js
@ -40,7 +40,7 @@ class SingleDropdownToolbar extends React.Component {
          <DropdownToggle
            tag="i"
            role="button"
-            className="sf3-font-drop-down sf3-font ml-1 sf-dropdown-toggle"
+            className="sf3-font-down sf3-font ml-1 sf-dropdown-toggle"
            onClick={this.toggleDropdownMenu}
            onKeyDown={this.onDropdownToggleKeyDown}
            data-toggle="dropdown"
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@ -156,7 +156,7 @@ class ViewFileToolbar extends React.Component {
            data-toggle="dropdown"
          >
            {this.props.children}
-            <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
+            <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
          </DropdownToggle>
          <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
            {opList.map((item, index)=> {
@ -173,12 +173,12 @@ class ViewFileToolbar extends React.Component {
                    onMouseMove={(e) => {e.stopPropagation();}}
                  >
                    <DropdownToggle
-                      caret
                      className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
                      onMouseEnter={this.toggleSubMenuShown.bind(this, item)}
                    >
                      <i className={`sf3-font-${item.icon} sf3-font mr-2 dropdown-item-icon`}></i>
                      <span className="mr-auto">{item.text}</span>
+                      <i className="sf3-font-down sf3-font rotate-270"></i>
                    </DropdownToggle>
                    <DropdownMenu>
                      {item.subOpList.map((item, index)=> {
--- a/frontend/src/components/tree-section/index.css
+++ b/frontend/src/components/tree-section/index.css
@ -56,14 +56,9 @@
  border-radius: 3px;
 }

-.tree-section .tree-section-header .sf3-font-drop-down {
+.tree-section .tree-section-header .sf3-font-down {
  font-size: 12px;
-  color: #999;
-  transform: scale(.8);
-}
-
-.tree-section .tree-section-header .sf3-font-drop-down.icon-rotate-90 {
-  transform: rotate(90deg) scale(.8);
+  color: #666666;
 }

 .tree-section .tree-section-header-operation .dropdown {
--- a/frontend/src/components/tree-section/index.js
+++ b/frontend/src/components/tree-section/index.js
@ -62,7 +62,7 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl
            </>
          )}
          <div className="tree-section-header-operation" onClick={toggleShowChildren}>
-            <i className={`sf3-font sf3-font-drop-down${showChildren ? '' : ' icon-rotate-90'}`}></i>
+            <i className={`sf3-font sf3-font-down ${showChildren ? '' : 'rotate-90'}`}></i>
          </div>
        </div>
      </div>
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@ -304,9 +304,9 @@ class TreeNodeView extends React.Component {
            style={{paddingLeft: leftIndent}}
          >{node.object.name}</div>
          <div className="left-icon" style={{left: leftIndent - 45}}>
-            {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
+            {type === 'dir' && (!node.isLoaded || (node.isLoaded && node.hasChildren())) && (
              <i
-                className={`folder-toggle-icon fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`}
+                className={`folder-toggle-icon sf3-font sf3-font-down ${node.isExpanded ? '' : 'rotate-270'}`}
                onMouseDown={e => e.stopPropagation()}
                onClick={this.onLoadToggle}
              ></i>
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@ -348,9 +348,8 @@ img[src=""],img:not([src]) { /* for first loading img*/
  color: #444;
 }

-.path-container .add-wiki-dropdown .sf3-font-drop-down {
+.path-container .add-wiki-dropdown .sf3-font-down {
  color: #999;
  cursor: pointer;
  font-size: 12px;
-  transform: scale(.8);
 }
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@ -104,23 +104,24 @@
 .folder-toggle-icon {
  position: absolute;
  left: 0;
-  color: #c0c0c0;
+  color: #666666;
  line-height: 1.625;
  width: 1.5rem;
  display: flex;
  align-content: center;
  justify-content: center;
+  font-size: 13px;
 }

 .tree-node-drop {
-  background-color:rgb(255,239,178);
+  background-color: rgb(255, 239, 178);
 }

 .tree-node-icon {
  display: inline-block;
  width: 1rem;
  text-align: center;
-  color: #b0b0b0;
+  color: #666666;
 }

 .tree-node-inner .right-icon {
@ -129,7 +130,7 @@
  right: 0.5rem;
  bottom: 0;
  width: 1rem;
-  color: #888;
+  color: #666666;
  z-index: 2;
  font-size: 0.8125rem;
  text-align: center;
@ -141,6 +142,7 @@
  vertical-align: middle;
  font-size: 0.8125rem;
  line-height: 1.625rem !important;
+  color: #666666;
 }

 .tree-node-hight-light {
--- a/frontend/src/css/side-panel.css
+++ b/frontend/src/css/side-panel.css
@ -105,7 +105,7 @@
 }

 .tree-node-inner-hover {
-  background-color: rgb(255,239,178);
+  background-color: rgb(255, 239, 178);
  border-radius: 0.25rem;
 }

@ -132,19 +132,20 @@
 .folder-toggle-icon {
  position: absolute;
  left: 0;
-  color: #c0c0c0;
+  color: #666666;
  line-height: 1.625;
  width: 1.5rem;
  display: flex;
  align-content: center;
  justify-content: center;
+  font-size: 13px;
 }

 .tree-node-icon {
  display: inline-block;
  width: 1rem;
  text-align: center;
-  color: #b0b0b0;
+  color: #666666;
 }

 .tree-node-inner .right-icon {
@ -165,6 +166,7 @@
  vertical-align: middle;
  font-size: 0.8125rem;
  line-height: 1.625rem !important;
+  color: #666666;
 }

 .tree-node-hight-light {
--- a/frontend/src/pages/dashboard/user-selector.js
+++ b/frontend/src/pages/dashboard/user-selector.js
@ -79,7 +79,7 @@ class UserSelector extends Component {
              <span className="d-inline-block ml-1">{currentSelectedUsers.map(item => item.name).join(', ')}</span>
            </>
          ) : gettext('Modified by')}
-          <i className="fas fa-caret-down ml-2 toggle-icon"></i>
+          <i className="sf3-font sf3-font-down ml-2 toggle-icon"></i>
        </span>
        {isPopoverOpen && (
          <div className="position-absolute activity-modifier-selector-container rounded shadow" ref={ref => this.userSelector = ref}>
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@ -82,7 +82,7 @@ class MylibRepoListView extends React.Component {
  renderPCUI = () => {
    const { inAllLibs, currentViewMode = 'list' } = this.props;
    const showStorageBackend = !inAllLibs && storages.length > 0;
-    const sortIcon = this.props.sortOrder === 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+    const sortIcon = this.props.sortOrder === 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

    return currentViewMode == 'list' ? (
      <table className={inAllLibs ? 'table-thead-hidden' : ''}>
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@ -227,11 +227,11 @@ class MylibRepoMenu extends React.Component {
                    onMouseMove={(e) => {e.stopPropagation();}}
                  >
                    <DropdownToggle
-                      caret
                      className="dropdown-item font-weight-normal rounded-0 d-flex justify-content-between align-items-center pr-2"
                      onMouseEnter={this.toggleAdvancedMenuShown}
                    >
                      {this.translateOperations(item)}
+                      <i className="sf3-font-down sf3-font rotate-270"></i>
                    </DropdownToggle>
                    <DropdownMenu>
                      {advancedOperations.map((item, index)=> {
--- a/frontend/src/pages/org-admin/libraries/org-all-repos.js
+++ b/frontend/src/pages/org-admin/libraries/org-all-repos.js
@ -65,7 +65,7 @@ class Content extends Component {
        </EmptyTip>
      );
      const initialSortIcon = <span className="fas fa-sort"></span>;
-      const sortIcon = <span className="fas fa-caret-down"></span>;
+      const sortIcon = <span className="sf3-font sf3-font-down"></span>;
      const table = (
        <Fragment>
          <table>
--- a/frontend/src/pages/org-admin/org-users-list.js
+++ b/frontend/src/pages/org-admin/org-users-list.js
@ -61,7 +61,7 @@ class OrgUsersList extends React.Component {
      // initial sort icon
      sortIcon = <span className="fas fa-sort"></span>;
    } else {
-      sortIcon = <span className={`fas ${sortOrder == 'asc' ? 'fa-caret-up' : 'fa-caret-down'}`}></span>;
+      sortIcon = <span className={`sf3-font ${sortOrder == 'asc' ? 'sf3-font-down rotate-180 d-inline-block' : 'sf3-font-down'}`}></span>;
    }
    let { orgUsers, page, pageNext } = this.props;
    return (
--- a/frontend/src/pages/org-admin/statistic/traffic-table.js
+++ b/frontend/src/pages/org-admin/statistic/traffic-table.js
@ -18,7 +18,7 @@ class TrafficTable extends React.Component {

  render() {
    const { type, sortBy, sortOrder } = this.props;
-    const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+    const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

    return (
      <table className="table-hover">
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@ -38,7 +38,7 @@ class Content extends Component {

      // sort
      const sortByName = sortBy == 'name';
-      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+      const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

      const isDesktop = Utils.isDesktop();
      const table = (
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@ -37,7 +37,7 @@ class Content extends Component {

      // sort
      const sortByName = sortBy == 'name';
-      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+      const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

      const isDesktop = Utils.isDesktop();
      const table = (
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@ -73,7 +73,7 @@ class Content extends Component {
      // sort
      const sortByName = sortBy == 'name';
      const sortByTime = sortBy == 'time';
-      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+      const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

      const isDesktop = Utils.isDesktop();
      // only for some columns
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@ -72,7 +72,7 @@ class Content extends Component {
      const sortByName = sortBy == 'name';
      const sortByTime = sortBy == 'time';
      const sortBySize = sortBy == 'size';
-      const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+      const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

      const desktopThead = (
        <thead>
--- a/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
+++ b/frontend/src/pages/sys-admin/dingtalk/dingtalk-departments-tree-node.js
@ -86,8 +86,8 @@ class DingtalkDepartmentsTreeNode extends Component {
  render() {
    const { isChildrenShow, department, checkedDepartmentId } = this.props;
    let toggleClass = classNames({
-      'folder-toggle-icon fa fa-caret-down': department.children && this.state.isChildrenShow,
-      'folder-toggle-icon fa fa-caret-right': department.children && !this.state.isChildrenShow,
+      'folder-toggle-icon sf3-font sf3-font-down rotate-270': department.children && this.state.isChildrenShow,
+      'folder-toggle-icon sf3-font sf3-font-down': department.children && !this.state.isChildrenShow,
    });
    let nodeInnerClass = classNames({
      'tree-node-inner': true,
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@ -55,7 +55,7 @@ class Content extends Component {
      );

      const initialSortIcon = <span className="fas fa-sort"></span>;
-      const sortIcon = <span className={`fas ${sortOrder == 'asc' ? 'fa-caret-up' : 'fa-caret-down'}`}></span>;
+      const sortIcon = <span className={`sf3-font ${sortOrder == 'asc' ? 'sf3-font-down rotate-180 d-inline-block' : 'sf3-font-down'}`}></span>;
      const table = (
        <Fragment>
          <table className="table-hover">
--- a/frontend/src/pages/sys-admin/repos/repos.js
+++ b/frontend/src/pages/sys-admin/repos/repos.js
@ -67,7 +67,7 @@ class Content extends Component {
        </EmptyTip>
      );
      const initialSortIcon = <span className="fas fa-sort"></span>;
-      const sortIcon = <span className="fas fa-caret-down"></span>;
+      const sortIcon = <span className="sf3-font sf3-font-down"></span>;
      const table = (
        <Fragment>
          <table>
--- a/frontend/src/pages/sys-admin/statistic/traffic-table.js
+++ b/frontend/src/pages/sys-admin/statistic/traffic-table.js
@ -18,7 +18,7 @@ class TrafficTable extends React.Component {

  render() {
    const { type, sortBy, sortOrder } = this.props;
-    const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
+    const sortIcon = sortOrder == 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;

    return (
      <table className="table-hover">
--- a/frontend/src/pages/sys-admin/users/users-content.js
+++ b/frontend/src/pages/sys-admin/users/users-content.js
@ -78,7 +78,7 @@ class Content extends Component {
        // initial sort icon
        sortIcon = <span className="fas fa-sort"></span>;
      } else {
-        sortIcon = <span className={`fas ${sortOrder == 'asc' ? 'fa-caret-up' : 'fa-caret-down'}`}></span>;
+        sortIcon = <span className={`sf3-font ${sortOrder == 'asc' ? 'sf3-font-down rotate-180 d-inline-block' : 'sf3-font-down'}`}></span>;
      }
      const spaceText = gettext('Space Used');
      const spaceEl =
--- a/frontend/src/pages/sys-admin/users/users-filter-bar.css
+++ b/frontend/src/pages/sys-admin/users/users-filter-bar.css
@ -6,7 +6,7 @@
  border-radius: 5px;
 }

-.users-filter-bar .users-filter-bar-dropdown-toggle .sf3-font-drop-down {
+.users-filter-bar .users-filter-bar-dropdown-toggle .sf3-font-down {
  color: #999;
  margin-left: auto;
  display: inline-flex;
@ -15,7 +15,6 @@
  font-size: 12px;
  width: 24px;
  height: 24px;
-  transform: scale(.8);
 }

 .users-filter-bar .users-filter-bar-dropdown-toggle:hover {
--- a/frontend/src/pages/sys-admin/users/users-filter-bar.js
+++ b/frontend/src/pages/sys-admin/users/users-filter-bar.js
@ -62,7 +62,7 @@ class UsersFilterBar extends Component {
            className="users-filter-bar-dropdown-toggle"
          >
            <span>{gettext('Status')}{': '}{this.translateStatus(this.props.isActive)}</span>
-            <span className='sf3-font-drop-down sf3-font'></span>
+            <span className='sf3-font-down sf3-font'></span>
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem key={0} onClick={() => { onStatusChange(''); }}>
@ -84,7 +84,7 @@ class UsersFilterBar extends Component {
            className="users-filter-bar-dropdown-toggle"
          >
            <span>{gettext('Role')}{': '}{this.translateRole(this.props.role)}</span>
-            <span className='sf3-font-drop-down sf3-font'></span>
+            <span className='sf3-font-down sf3-font'></span>
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem key={0} onClick={() => { onRoleChange(''); }}>
--- a/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
+++ b/frontend/src/pages/sys-admin/work-weixin/work-weixin-departments-tree-node.js
@ -86,8 +86,8 @@ class WorkWeixinDepartmentsTreeNode extends Component {
  render() {
    const { isChildrenShow, department, checkedDepartmentId } = this.props;
    let toggleClass = classNames({
-      'folder-toggle-icon fa fa-caret-down': department.children && this.state.isChildrenShow,
-      'folder-toggle-icon fa fa-caret-right': department.children && !this.state.isChildrenShow,
+      'folder-toggle-icon sf3-font sf3-font-down rotate-270': department.children && this.state.isChildrenShow,
+      'folder-toggle-icon sf3-font sf3-font-down': department.children && !this.state.isChildrenShow,
    });
    let nodeInnerClass = classNames({
      'tree-node-inner': true,
--- a/frontend/src/pages/wiki/index-md-viewer/nav-item.js
+++ b/frontend/src/pages/wiki/index-md-viewer/nav-item.js
@ -70,7 +70,7 @@ class NavItem extends React.Component {
      return (
        <div className="pl-4 position-relative">
          <span className="switch-btn" onClick={this.toggleExpanded}>
-            {<i className={`fa fa-caret-${expanded ? 'down': 'right'}`}></i>}
+            <i className={`sf3-font sf3-font-down ${expanded ? '': 'rotate-270 d-inline-block'}`}></i>
          </span>
          {this.renderLink(node)}
          {expanded && node.children.map((child, index) => {
--- a/frontend/src/pages/wiki/wiki.css
+++ b/frontend/src/pages/wiki/wiki.css
@ -41,9 +41,9 @@
 }

 .wiki-pages-container .tree-view {
-  margin-left: -10px;
+  margin-left: 10px;
  margin-top: 14px;
-  padding-left:0;
+  padding-left: 0px;
 }

 img[src=""] {
--- a/frontend/src/pages/wiki2/css/view-structure.css
+++ b/frontend/src/pages/wiki2/css/view-structure.css
@ -281,14 +281,7 @@
  align-items: center;
 }

-.view-structure .more-view-operation .folders-dropdown .dtable-icon-right-slide {
-  display: inline-flex;
-  font-size: 12px;
-  transform: scale(0.8);
-}
-
-.view-structure .more-view-operation .btn-move-to-folder:focus .dtable-icon-insert-right,
-.view-structure .more-view-operation .btn-move-to-folder:focus .dtable-icon-right-slide {
+.view-structure .more-view-operation .btn-move-to-folder:focus .dtable-icon-insert-right {
  color: #fff;
 }

@ -350,12 +343,6 @@
  color: #8c8c8c;
 }

-.dtable-dropdown-menu .dropdown-item .seafile-multicolor-icon.seafile-multicolor-icon-right-slide {
-  font-size: 12px;
-  transform: scale(0.8);
-  color: #666;
-}
-
 .dtable-dropdown-menu .dropdown-item:hover .item-icon,
 .dtable-dropdown-menu .dropdown-item:hover .seafile-multicolor-icon {
  color: #fff;
--- a/frontend/src/pages/wiki2/view-structure/folders/folder-item.js
+++ b/frontend/src/pages/wiki2/view-structure/folders/folder-item.js
@ -202,7 +202,9 @@ class FolderItem extends Component {
                  id={viewEditorId}
                >
                  {this.state.isMouseEnter ?
-                    <NavItemIcon className="icon-expand-folder" symbol={folded ? 'right-slide' : 'drop-down'}/>
+                    <div className='nav-item-icon'>
+                      <i className={`sf3-font-down sf3-font ${folded ? 'rotate-270' : ''}`}></i>
+                    </div>
                    :
                    <NavItemIcon symbol={'wiki-folder'} disable={true} />
                  }
--- a/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
+++ b/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
@ -190,7 +190,7 @@ export default class PageDropdownMenu extends Component {
                  <Icon symbol={'move-to'}/>
                  <span className="item-text">{gettext('Move to')}</span>
                  <span className="icon-dropdown-toggle">
-                    <Icon className="mr-0" symbol={'right-slide'}/>
+                    <i className="sf3-font-down sf3-font rotate-270"></i>
                  </span>
                  <DropdownToggle className="move-to-folders-toggle"></DropdownToggle>
                </div>
--- a/frontend/src/pages/wiki2/view-structure/views/view-item.js
+++ b/frontend/src/pages/wiki2/view-structure/views/view-item.js
@ -231,11 +231,9 @@ class ViewItem extends Component {
                      <NavItemIcon symbol={'files'} disable={true} />
                    }
                    {(this.state.isMouseEnter && childNumber > 0) &&
-                      <NavItemIcon
-                        className="icon-expand-folder"
-                        symbol={folded ? 'right-slide' : 'drop-down'}
-                        onClick={this.toggleExpand}
-                      />
+                      <div className='nav-item-icon' onClick={this.toggleExpand}>
+                        <i className={`sf3-font-down sf3-font ${folded ? 'rotate-270' : ''}`}></i>
+                      </div>
                    }
                    {/* {this.renderIcon(view.icon)} */}
                    <span className="view-title text-truncate" title={view.name}>{view.name}</span>
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@ -206,7 +206,7 @@ class Wikis extends Component {
                    onMouseMove={(e) => {e.stopPropagation();}}
                  >
                    <DropdownToggle tag="i" className="px-1">
-                      <span className="sf3-font sf3-font-drop-down" aria-hidden="true"></span>
+                      <span className="sf3-font sf3-font-down" aria-hidden="true"></span>
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem onClick={() => {this.toggelAddWikiDialog();}}>{gettext('Add Wiki')}</DropdownItem>
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@ -648,7 +648,7 @@ class Content extends React.Component {
      );
    }

-    const sortIcon = <span className={`fas ${sortOrder == 'asc' ? 'fa-caret-up' : 'fa-caret-down'}`}></span>;
+    const sortIcon = <span className={`sf3-font ${sortOrder == 'asc' ? 'sf3-font-down rotate-180 d-inline-block' : 'sf3-font-down'}`}></span>;
    return mode == 'list' ? (
      <table className="table-hover">
        <thead>
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@ -266,10 +266,10 @@ a, a:hover { color: #ec8000; }
 /* for 'extra small' */
@media (max-width: 575px) {
  .w-xs-200 {
-  width: 200%;
+    width: 200%;
  }
  .w-xs-250 {
-  width: 250%;
+    width: 250%;
  }
 }

@ -738,23 +738,17 @@ a, a:hover { color: #ec8000; }
 }

 .side-nav-con .toggle-icon {
-  color: #999;
+  color: #666666;
  margin-left: auto;
 }

-.side-nav-con .toggle-icon.sf3-font-drop-down {
+.side-nav-con .toggle-icon.sf3-font-down {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
-  font-size: 12px;
  width: 24px;
  height: 24px;
-  transform: scale(.8);
-}
-
-.side-nav-con .toggle-icon.sf3-font-drop-down.icon-rotate-90 {
-  transform: rotate(90deg) scale(.8);
 }

 #draft-num {
@ -956,6 +950,10 @@ table th {
  color: #9c9c9c;
 }

+table th .sf3-font {
+  font-size: 0.8125rem;
+}
+
 table td {
  padding: 0.5rem 0.1875rem;
  border-bottom: 1px solid #e8e8e8;
@ -975,6 +973,10 @@ table td {
  font-size: 0;
 }

+.table-thead-hidden thead .sf3-font {
+  display: none !important;
+}
+
 .tr-highlight {
  background-color: #f8f8f8;
 }
@ -1036,11 +1038,15 @@ a.table-sort-op {

@media (max-width:767px) {
  a.table-sort-op {
-  display: inline-block;
-  margin-left: 15px;
+    display: inline-block;
+    margin-left: 15px;
  }
 }

+a.table-sort-op.sf3-font {
+  font-size: 13px;
+}
+
 a.table-sort-op:hover {
  outline: none;
  text-decoration: none;
@ -1097,7 +1103,7 @@ a.table-sort-op:hover {

@media (min-width: 768px) {
  .empty-tip {
-  padding: 30px 80px;
+    padding: 30px 80px;
  }
 }

@ -1482,3 +1488,15 @@ a.table-sort-op:hover {
    background-color: #f8f8f8;
  }
 }
+
+.rotate-90 {
+  transform: rotate(90deg);
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
+.rotate-270 {
+  transform: rotate(270deg);
+}