['view mode' selector] rewrote the 'view mode' selector(fixup & improvements) and used it in 'Files' & 'dir view' pages (#6215)

frontend/src/components/cur-dir-path/dir-tool.js

@@ -6,6 +6,7 @@ import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
 import SeahubPopover from '../common/seahub-popover';
 import ListTagPopover from '../popover/list-tag-popover';
+import ViewModes from '../../components/view-modes';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -24,7 +25,6 @@ class DirTool extends React.Component {
     super(props);
     this.state = {
       isRepoTagDialogOpen: false,
-      isSwitchModeDropdownMenuOpen: false,
       isDropdownMenuOpen: false
     };
   }
@@ -35,12 +35,6 @@ class DirTool extends React.Component {
     });
   };
 
-  toggleSwitchModeDropdownMenu = () => {
-    this.setState({
-      isSwitchModeDropdownMenuOpen: !this.state.isSwitchModeDropdownMenuOpen
-    });
-  };
-
   hidePopover = (e) => {
     if (e) {
       let dom = e.target;
@@ -123,55 +117,12 @@ class DirTool extends React.Component {
 
   render() {
     const menuItems = this.getMenuList();
-    const { isDropdownMenuOpen, isSwitchModeDropdownMenuOpen } = this.state;
+    const { isDropdownMenuOpen } = this.state;
-    const { repoID } = this.props;
+    const { repoID, currentMode } = this.props;
     return (
       <React.Fragment>
         <div className="d-flex">
-          <Dropdown
+          <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
-            isOpen={isSwitchModeDropdownMenuOpen}
-            toggle={this.toggleSwitchModeDropdownMenu}
-            id="cur-view-change-mode-dropdown"
-          >
-            <DropdownToggle
-              tag="i"
-              children={
-                <span className='cur-view-path-btn px-1'>
-                  <span className={`sf3-font sf3-font-${this.props.currentMode === 'list' ? 'list-view' : 'grid-view'}`}></span>
-                  <span className={'sf3-font sf3-font-down'}></span>
-                </span>
-              }
-              data-toggle="dropdown"
-              title={gettext('Change view mode')}
-              aria-label={gettext('Change view mode')}
-              aria-expanded={isSwitchModeDropdownMenuOpen}
-            >
-            </DropdownToggle>
-            <DropdownMenu right={true}>
-              <DropdownItem key={0} onClick={this.props.switchViewMode.bind(this, 'list')}>
-                <div className="d-flex justify-content-between align-items-center">
-                  <span className="mr-8 d-flex justify-content-between align-items-center">
-                    <span className={'sf3-font-list-view sf3-font mr-2'}></span>
-                    <span>{gettext('List view')}</span>
-                  </span>
-                  <span>
-                    {this.props.currentMode === 'list' && <i className="fas fa-check color-selected"></i>}
-                  </span>
-                </div>
-              </DropdownItem>
-              <DropdownItem key={1} onClick={this.props.switchViewMode.bind(this, 'grid')}>
-                <div className="d-flex justify-content-between align-items-center">
-                  <span className="mr-8 d-flex justify-content-between align-items-center">
-                    <span className={'sf3-font-grid-view sf3-font mr-2'}></span>
-                    <span>{gettext('Grid view')}</span>
-                  </span>
-                  <span>
-                    {this.props.currentMode === 'grid' && <i className="fas fa-check color-selected"></i>}
-                  </span>
-                </div>
-              </DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
           {menuItems.length > 0 &&
           <Dropdown isOpen={isDropdownMenuOpen} toggle={this.toggleDropdownMenu}>
             <DropdownToggle

frontend/src/components/view-modes.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  currentViewMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired
+};
+
+class ViewModes extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDropdownMenuOpen: false
+    };
+  }
+
+  toggleDropdownMenu = () => {
+    this.setState({
+      isDropdownMenuOpen: !this.state.isDropdownMenuOpen
+    });
+  };
+
+  render() {
+    const { isDropdownMenuOpen } = this.state;
+    const { currentViewMode } = this.props;
+    const options = [
+      {'icon': 'list-view', 'text': gettext('List view'), 'value': 'list'},
+      {'icon': 'grid-view', 'text': gettext('Grid view'), 'value': 'grid'}
+    ];
+    return (
+      <Dropdown
+        isOpen={isDropdownMenuOpen}
+        toggle={this.toggleDropdownMenu}
+        id="cur-view-change-mode-dropdown"
+      >
+        <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'>
+            <span className={`sf3-font sf3-font-${currentViewMode}-view`}></span>
+            <span className={'sf3-font sf3-font-down'}></span>
+          </span>
+        </DropdownToggle>
+        <DropdownMenu right={true} className="mt-1">
+          {options.map((item, index) => {
+            return (
+              <DropdownItem key={index} onClick={this.props.switchViewMode.bind(this, item.value)}>
+                <div className="d-flex justify-content-between align-items-center">
+                  <span className="mr-8 d-flex justify-content-between align-items-center">
+                    <span className={`sf3-font-${item.icon} sf3-font mr-2`}></span>
+                    <span>{item.text}</span>
+                  </span>
+                  <span>
+                    {currentViewMode === item.value && <i className="fas fa-check color-selected"></i>}
+                  </span>
+                </div>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+}
+
+ViewModes.propTypes = propTypes;
+
+export default ViewModes;

frontend/src/pages/libraries/index.js

@@ -9,6 +9,7 @@ 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 TopToolbar from '../../components/toolbar/top-toolbar';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -228,7 +229,6 @@ class Libraries extends Component {
 
   render() {
     const { isLoading, currentViewMode, sortBy, sortOrder } = this.state;
-    const baseClass = 'btn btn-secondary btn-icon sf-view-mode-btn ';
     const isDesktop = Utils.isDesktop();
 
     const sortOptions = this.sortOptions.map(item => {
@@ -239,10 +239,10 @@ class Libraries extends Component {
     });
 
     const customSelectorToggle = (
-      <button className="btn btn-secondary border-0 op-btn repos-sort-menu-toggle">
+      <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 ml-1"></i>
+        <i className="sf3-font-down sf3-font"></i>
-      </button>
+      </span>
     );
 
     return (
@@ -259,10 +259,8 @@ class Libraries extends Component {
               {isDesktop &&
               <div className="d-flex align-items-center">
                 <div className="view-modes mr-2">
-                  <button className={`${baseClass} sf3-font-list-view sf3-font ${currentViewMode === 'list' ? 'current-mode' : ''}`} id='list' title={gettext('List')} aria-label={gettext('List')} onClick={this.switchViewMode.bind(this, 'list')}></button>
+                  <ViewModes currentViewMode={currentViewMode} switchViewMode={this.switchViewMode} />
-                  <button className={`${baseClass} sf3-font-grid-view sf3-font ${currentViewMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} aria-label={gettext('Grid')} onClick={this.switchViewMode.bind(this, 'grid')}></button>
                 </div>
-
                 <Selector
                   customSelectorToggle={customSelectorToggle}
                   options={sortOptions}