12.0 change dropdown menu style (#6227)

* 01 remove 200px dropdown menu

* 02 change check mark icon className

* 03 change dropdown padding

* 04 change menu min width 200px

* 05 change sort repos dropdown

frontend/src/components/dialog/create-tag-dialog.js

@@ -91,7 +91,7 @@ class CreateTagDialog extends React.Component {
                           <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked onClick={this.selectTagcolor}></input> :
                           <input name="color" type="radio" value={item} className="colorinput-input" onClick={this.selectTagcolor}></input>}
                         <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor:item}}>
-                          <i className="fas fa-check color-selected"></i>
+                          <i className="sf2-icon-tick color-selected"></i>
                         </span>
                       </label>
                     </div>

frontend/src/components/dialog/edit-filetag-dialog.js

@@ -91,7 +91,7 @@ class TagItem extends React.Component {
           <span className="tag-color w-4 h-4 rounded-circle" style={{backgroundColor: repoTag.color}}></span>
           <span className="tag-name mx-2">{repoTag.name}</span>
         </div>
-        {isTagSelected && <i className="fas fa-check tag-selected-icon"></i>}
+        {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
       </li>
     );
   }

frontend/src/components/dialog/tag-color.js

@@ -88,7 +88,7 @@ class TagColor extends React.Component {
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
                       <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
-                        <i className="fas fa-check color-selected"></i>
+                        <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
                   </div>

frontend/src/components/popover/tag-item.js

@@ -66,7 +66,7 @@ class TagItem extends React.Component {
         <div className="tag-item d-flex align-items-center" style={{backgroundColor: repoTag.color}}>
           <span className="tag-name">{repoTag.name}</span>
         </div>
-        {isTagSelected && <i className="fas fa-check tag-selected-icon"></i>}
+        {isTagSelected && <i className="sf2-icon-tick tag-selected-icon"></i>}
       </li>
     );
   }

frontend/src/components/popover/virtual-tag-color.js

@@ -80,7 +80,7 @@ export default class VirtualTagColor extends React.Component {
                     <label className="colorinput">
                       <input name="color" type="radio" value={item} className="colorinput-input" defaultChecked={item == tagColor} onClick={this.selectTagColor} />
                       <span className="colorinput-color rounded-circle d-flex align-items-center justify-content-center" style={{backgroundColor: item}}>
-                        <i className="fas fa-check color-selected"></i>
+                        <i className="sf2-icon-tick color-selected"></i>
                       </span>
                     </label>
                   </div>

frontend/src/components/repos-sort-menu.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  sortOptions: PropTypes.array,
+  onSelectSortOption: PropTypes.func.isRequired
+};
+
+class ReposSortMenu extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDropdownMenuOpen: false
+    };
+  }
+
+  toggleDropdownMenu = () => {
+    this.setState({
+      isDropdownMenuOpen: !this.state.isDropdownMenuOpen
+    });
+  };
+
+  render() {
+    const { isDropdownMenuOpen } = this.state;
+    const { sortOptions } = this.props;
+    return (
+      <Dropdown
+        isOpen={isDropdownMenuOpen}
+        toggle={this.toggleDropdownMenu}
+      >
+        <DropdownToggle
+          tag="div"
+          data-toggle="dropdown"
+          title={gettext('Switch view mode')}
+          aria-label={gettext('Switch view mode')}
+          aria-expanded={isDropdownMenuOpen}
+        >
+          <span className="cur-view-path-btn px-1" role="button">
+            <i className="sf3-font-sort2 sf3-font"></i>
+            <i className="sf3-font-down sf3-font"></i>
+          </span>
+        </DropdownToggle>
+        <DropdownMenu right={true} className="mt-1">
+          {sortOptions.map((item, index) => {
+            return (
+              <DropdownItem key={index} onClick={this.props.onSelectSortOption.bind(this, item)}>
+                <div className="d-flex justify-content-between align-items-center">
+                  <span className="mr-8">{item.text}</span>
+                  <span>{item.isSelected && <i className="sf2-icon-tick"></i>}</span>
+                </div>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+}
+
+ReposSortMenu.propTypes = propTypes;
+
+export default ReposSortMenu;

frontend/src/components/single-selector.js

@@ -85,7 +85,7 @@ class Selector extends Component {
                 return (
                   <li key={index} className="option-item h-6 py-1 px-3 d-flex justify-content-between align-items-center" onClick={(e) => {this.selectItem(e, item);}}>
                     <span className="option-item-text flex-shrink-0 mr-3">{item.text}</span>
-                    <i className={`sf2-icon-tick text-gray font-weight-bold ${item.isSelected ? '' : 'invisible'}`}></i>
+                    <i className={`sf2-icon-tick ${item.isSelected ? '' : 'invisible'}`}></i>
                   </li>
                 );
               })}

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -236,7 +236,7 @@ class DirOperationToolbar extends React.Component {
               {this.props.children}
               <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
             </DropdownToggle>
-            <DropdownMenu onMouseMove={this.onDropDownMouseMove} style={{'width': '200px'}}>
+            <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
               {opList.map((item, index)=> {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
@@ -252,7 +252,7 @@ class DirOperationToolbar extends React.Component {
                     >
                       <DropdownToggle
                         caret
-                        className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+                        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>

frontend/src/components/toolbar/single-dropdown-toolbar.js

@@ -46,7 +46,7 @@ class SingleDropdownToolbar extends React.Component {
             data-toggle="dropdown"
           >
           </DropdownToggle>
-          <DropdownMenu style={{'width': '200px'}}>
+          <DropdownMenu>
             {opList.map((item, index)=> {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;

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

@@ -158,7 +158,7 @@ class ViewFileToolbar extends React.Component {
             {this.props.children}
             <i className="sf3-font-drop-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu onMouseMove={this.onDropDownMouseMove} style={{'width': '200px'}}>
+          <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
             {opList.map((item, index)=> {
               if (item == 'Divider') {
                 return <DropdownItem key={index} divider />;
@@ -174,7 +174,7 @@ class ViewFileToolbar extends React.Component {
                   >
                     <DropdownToggle
                       caret
-                      className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center pr-2"
+                      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>

frontend/src/components/view-modes.js

@@ -58,7 +58,7 @@ class ViewModes extends React.Component {
                     <span>{item.text}</span>
                   </span>
                   <span>
-                    {currentViewMode === item.value && <i className="fas fa-check color-selected"></i>}
+                    {currentViewMode === item.value && <i className="sf2-icon-tick"></i>}
                   </span>
                 </div>
               </DropdownItem>

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

@@ -37,10 +37,6 @@
   margin-right: 0.25rem;
 }
 
-.history-body .dropdown-menu {
-  min-width: 8rem;
-}
-
 .history-body .dropdown-menu a {
   text-decoration: none;
   color: #6e7687;

frontend/src/css/lib-content-view.css

@@ -153,10 +153,6 @@
   color:#fff;
 }
 
-.dropdown-menu {
-  min-width: 8rem;
-}
-
 .parent-path {
   position: relative;
 }

frontend/src/css/side-panel.css

@@ -177,10 +177,6 @@
   color:#fff;
 }
 
-.dropdown-menu {
-  min-width: 8rem;
-}
-
 .parent-path {
   position: relative;
 }

frontend/src/css/toolbar.css

@@ -39,20 +39,6 @@
   margin-right: -4px;
 }
 
-#cur-view-change-mode-dropdown .dropdown-item {
-  padding: 4px 16px;
-}
-
-#cur-view-change-mode-dropdown .dropdown-item .fas,
-#cur-view-change-mode-dropdown .dropdown-item .sf3-font {
-  color: #666;
-}
-
-#cur-view-change-mode-dropdown .dropdown-item:hover .fas,
-#cur-view-change-mode-dropdown .dropdown-item:hover .sf3-font {
-  color: #fff;
-}
-
 /* begin common-toolbar */
 .common-toolbar {
   display: flex;

frontend/src/css/user-notifications.css

@@ -46,7 +46,6 @@
 }
 
 .notification-header-close .dropdown-menu {
-  min-width: 8rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 

frontend/src/pages/libraries/index.js

@@ -8,8 +8,8 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Group from '../../models/group';
 import Loading from '../../components/loading';
-import Selector from '../../components/single-selector';
 import ViewModes from '../../components/view-modes';
+import ReposSortMenu from '../../components/repos-sort-menu';
 import TopToolbar from '../../components/toolbar/top-toolbar';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -237,14 +237,6 @@ class Libraries extends Component {
         isSelected: item.value == `${sortBy}-${sortOrder}`
       };
     });
-
-    const customSelectorToggle = (
-      <span className="cur-view-path-btn px-1" role="button">
-        <i className="sf3-font-sort2 sf3-font"></i>
-        <i className="sf3-font-down sf3-font"></i>
-      </span>
-    );
-
     return (
       <Fragment>
         <TopToolbar
@@ -258,15 +250,10 @@ class Libraries extends Component {
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
               {isDesktop &&
               <div className="d-flex align-items-center">
-                <div className="view-modes mr-2">
+                <div className="mr-2">
                   <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
                 </div>
-                <Selector
+                <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
-                  customSelectorToggle={customSelectorToggle}
-                  options={sortOptions}
-                  selectOption={this.onSelectSortOption}
-                  menuCustomClass='repos-sort-menu dropdown-menu-right'
-                />
               </div>
               }
             </div>

frontend/src/pages/sdoc/sdoc-file-history/index.css

@@ -269,10 +269,6 @@
   min-height: 22.5px;
 }
 
-.sdoc-file-history-versions .dropdown-menu {
-  min-width: 8rem;
-}
-
 .history-content .main-panel {
   flex: 1 1 auto;
 }

frontend/src/pages/wiki2/css/view-structure.css

@@ -249,7 +249,7 @@
 }
 
 .view-operation-dropdown-menu .sf3-font {
-  font-size: 10px;
+  font-size: 14px;
   margin-right: 10px;
 }
 
@@ -306,7 +306,6 @@
 }
 
 .view-structure .folders-dropdown .dropdown-menu {
-  max-width: 180px;
   max-height: 300px;
   overflow-y: auto;
 }