change more-level icons (#7945)

frontend/src/components/file-view/onlyoffice-file-toolbar.js

@@ -55,7 +55,7 @@ class OnlyofficeFileToolbar extends React.Component {
               aria-label={gettext('More operations')}
               title={gettext('More operations')}
             >
-              <Icon symbol="more-vertical" />
+              <Icon symbol="more-level" />
             </DropdownToggle>
             <DropdownMenu>
               <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
@@ -73,7 +73,7 @@ class OnlyofficeFileToolbar extends React.Component {
 
         <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
           <DropdownToggle tag="span" className="mx-1" aria-label={gettext('More operations')}>
-            <Icon symbol="more-vertical" />
+            <Icon symbol="more-level" />
           </DropdownToggle>
           <DropdownMenu>
             <DropdownItem onClick={this.props.toggleHeader}>{gettext('Fold')}</DropdownItem>

frontend/src/components/history-list-view/history-list-item.js

@@ -69,15 +69,15 @@ class HistoryListItem extends React.Component {
     }
     let item = this.props.item;
     let time = dayjs(item.ctime).format('YYYY-MM-DD HH:mm');
-    let isHigtlightItem = false;
+    let isHighlightItem = false;
     if (this.props.item && this.props.currentItem) {
-      isHigtlightItem = this.props.item.commit_id === this.props.currentItem.commit_id;
+      isHighlightItem = this.props.item.commit_id === this.props.currentItem.commit_id;
     }
     let objID = this.props.currentItem.rev_file_id;
     let url = URLDecorator.getUrl({ type: 'download_historic_file', filePath: filePath, objID: objID });
     return (
       <li
-        className={`history-list-item ${isHigtlightItem ? 'item-active' : ''}`}
+        className={`history-list-item ${isHighlightItem ? 'item-active' : ''}`}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onClick={this.onItemClick}
@@ -93,7 +93,7 @@ class HistoryListItem extends React.Component {
           <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
             <DropdownToggle
               tag='a'
-              className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHigtlightItem) ? '' : 'invisible'}`}
+              className={`sf3-font sf3-font-more ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
               data-toggle="dropdown"
               aria-expanded={this.state.isMenuShow}
               title={gettext('More operations')}

frontend/src/components/history-list-view/history-list-view.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import HisotyListItem from './history-list-item';
+import HistoryListItem from './history-list-item';
 import Loading from '../loading';
 
 const propTypes = {
@@ -64,7 +64,7 @@ class HistoryListView extends React.Component {
       <ul className="history-list-container" onScroll={this.onScrollHandler}>
         {this.props.historyList.map((item, index) => {
           return (
-            <HisotyListItem
+            <HistoryListItem
               key={index}
               item={item}
               index={index}

frontend/src/components/menu-control.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  isShow: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-class MenuControl extends React.Component {
-
-  render() {
-    return (
-      <i className={`sf3-font sf3-font-more-vertical ${this.props.isShow ? '' : 'invisible'}`} onClick={this.props.onClick}></i>
-    );
-  }
-}
-
-MenuControl.propTypes = propTypes;
-
-export default MenuControl;

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

@@ -32,7 +32,7 @@ class MobileItemMenu extends React.Component {
       <Dropdown isOpen={isMenuOpen} toggle={toggleMenu}>
         <DropdownToggle
           tag="i"
-          className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
+          className="sf-dropdown-toggle sf3-font sf3-font-more ml-0"
           title={gettext('More operations')}
           aria-label={gettext('More operations')}
           data-toggle="dropdown"

frontend/src/components/toolbar/all-tags-toolbar.js

@@ -71,7 +71,7 @@ const AllTagsToolbar = () => {
       {length > 0 && (
         <ItemDropdownMenu
           item={{}}
-          toggleClass={'cur-view-path-btn sf3-font-more-vertical sf3-font'}
+          toggleClass={'cur-view-path-btn sf3-font-more sf3-font'}
           onMenuItemClick={onMenuItemClick}
           getMenuList={getMenuList}
         />

frontend/src/components/toolbar/table-files-toolbar.js

@@ -181,7 +181,7 @@ const TableFilesToolbar = ({ repoID }) => {
       {length > 0 && (
         <ItemDropdownMenu
           item={{}}
-          toggleClass={'cur-view-path-btn sf3-font-more-vertical sf3-font'}
+          toggleClass={'cur-view-path-btn sf3-font-more sf3-font'}
           onMenuItemClick={onMenuItemClick}
           getMenuList={getMenuList}
         />

frontend/src/components/toolbar/tag-files-toolbar.js

@@ -131,7 +131,7 @@ const TagFilesToolbar = ({ currentRepoInfo }) => {
       {selectedFilesLen === 1 &&
         <ItemDropdownMenu
           item={{}}
-          toggleClass={'cur-view-path-btn sf3-font-more-vertical sf3-font'}
+          toggleClass={'cur-view-path-btn sf3-font-more sf3-font'}
           onMenuItemClick={onMenuItemClick}
           getMenuList={getMenuList}
         />

frontend/src/components/tree-view/tree-node-view.js

@@ -325,7 +325,7 @@ class TreeNodeView extends React.Component {
             <div className="right-icon">
               <ItemDropdownMenu
                 item={this.props.node}
-                toggleClass={'sf3-font sf3-font-more-vertical'}
+                toggleClass={'sf3-font sf3-font-more'}
                 getMenuList={this.calculateMenuList}
                 onMenuItemClick={this.onMenuItemClick}
                 freezeItem={this.props.freezeItem}

frontend/src/css/history-record-item.css

@@ -19,7 +19,7 @@
   justify-content: center;
 }
 
-.history-list-item .history-operation .sf3-font-more-vertical:hover {
+.history-list-item .history-operation .sf3-font-more:hover {
   text-decoration: none;
 }
 

frontend/src/metadata/metadata-tree-view/index.css

@@ -18,8 +18,3 @@
 .metadata-tree-view .metadata-views-icon {
   fill: #666;
 }
-
-.metadata-tree-view .sf-dropdown-toggle {
-  display: inline-block;
-  transform: rotate(90deg);
-}

frontend/src/pages/repo-wiki-mode/side-panel.js

@@ -164,7 +164,7 @@ class SidePanel extends Component {
                 <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
                   <DropdownToggle
                     tag="i"
-                    className="sf3-font sf3-font-more-vertical"
+                    className="sf3-font sf3-font-more"
                     title={gettext('More operations')}
                     aria-label={gettext('More operations')}
                     data-toggle="dropdown"

frontend/src/pages/sdoc/sdoc-file-history/history-version.js

@@ -125,7 +125,7 @@ class HistoryVersion extends React.Component {
             ? (
               <>
                 <a
-                  className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
+                  className={`sf3-font sf3-font-more ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
                   title={gettext('More operations')}
                   aria-label={gettext('More operations')}
                   aria-expanded={this.state.isMenuShow}
@@ -159,7 +159,7 @@ class HistoryVersion extends React.Component {
               <Dropdown isOpen={this.state.isMenuShow} toggle={this.onToggleClick}>
                 <DropdownToggle
                   tag='a'
-                  className={`sf3-font sf3-font-more-vertical ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
+                  className={`sf3-font sf3-font-more ${(this.state.isShowOperationIcon || isHighlightItem) ? '' : 'invisible'}`}
                   data-toggle="dropdown"
                   aria-expanded={this.state.isMenuShow}
                   title={gettext('More operations')}

frontend/src/pages/tldraw-editor/index.css

@@ -2,3 +2,8 @@
 kbd.tlui-kbd {
   background-color: transparent;
 }
+
+/* menu more icon use horizontal points */
+.tldraw-editor-container .tlui-menu-zone .tlui-buttons__horizontal .tlui-popover:last-child .tlui-icon {
+  transform: rotate(90deg);
+}