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

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;

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>

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`}

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();
 

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

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>

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>

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>

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`}

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)=> {

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>
     };
   };
 

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>

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)=> {

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"

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)=> {

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 {

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>

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>