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>