[dir view] added 'sort' for mobile (#4032)

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

@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 import DirPath from './dir-path';
 import DirTool from './dir-tool';
 
@@ -19,7 +21,21 @@ const propTypes = {
 
 class CurDirPath extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSortOptionsDialogOpen: false
+    };
+  }
+
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   render() {
+    const isDesktop = Utils.isDesktop();
     return (
       <Fragment>
         <DirPath 
@@ -32,6 +48,7 @@ class CurDirPath extends React.Component {
           isViewFile={this.props.isViewFile}
           fileTags={this.props.fileTags}
         />
+        {isDesktop &&
         <DirTool 
           repoID={this.props.repoID}
           repoName={this.props.repoName} 
@@ -39,7 +56,17 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath} 
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
+        />}
+        {!isDesktop && this.props.direntList.length > 0 &&
+        <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+        {this.state.isSortOptionsDialogOpen &&
+        <SortOptionsDialog
+          toggleDialog={this.toggleSortOptionsDialog}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
         />
+        }
       </Fragment>
     );
   }

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

@@ -35,7 +35,7 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
 };
 
-class MutipleDirOperationToolbar extends React.Component {
+class MultipleDirOperationToolbar extends React.Component {
 
   constructor(props) {
     super(props);
@@ -409,6 +409,6 @@ class MutipleDirOperationToolbar extends React.Component {
   }
 }
 
-MutipleDirOperationToolbar.propTypes = propTypes;
+MultipleDirOperationToolbar.propTypes = propTypes;
 
-export default MutipleDirOperationToolbar;
+export default MultipleDirOperationToolbar;

frontend/src/css/layout.css

@@ -95,6 +95,7 @@
   max-height: 40px;
   background:#f9f9f9;
   display: flex;
+  align-items: center;
   flex-shrink: 0;
   justify-content: space-between;
 }

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -191,6 +191,10 @@ class LibContentContainer extends React.Component {
               updateUsedRepoTags={this.props.updateUsedRepoTags}
               fileTags={this.props.fileTags}
               onDeleteRepoTag={this.props.onDeleteRepoTag}
+              direntList={this.props.direntList}
+              sortBy={this.props.sortBy}
+              sortOrder={this.props.sortOrder}
+              sortItems={this.props.sortItems}
             />
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -5,7 +5,7 @@ import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
-import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import ViewFileToolbar from '../../components/toolbar/view-file-toolbar';
 
 const propTypes = {
@@ -89,7 +89,7 @@ class LibContentToolbar extends React.Component {
           <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
           <div className="dir-operation">
             {this.props.isDirentSelected ?
-              <MutipleDirOperationToolbar
+              <MultipleDirOperationToolbar
                 repoID={this.props.repoID} 
                 path={this.props.path}
                 userPerm={this.props.userPerm}

frontend/src/pages/my-libs/my-libs.js

@@ -159,7 +159,7 @@ class MyLibraries extends Component {
         </div>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('My Libraries')}</h3>
               {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>

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

@@ -8,7 +8,7 @@ import RepoInfo from '../../models/repo-info';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
-import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import CurDirPath from '../../components/cur-dir-path';
 import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
@@ -170,7 +170,7 @@ class MainPanel extends Component {
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
             <div className="dir-operation">
               {this.props.isDirentSelected ?
-                <MutipleDirOperationToolbar
+                <MultipleDirOperationToolbar
                   repoID={repoID} 
                   path={this.props.path}
                   selectedDirentList={this.props.selectedDirentList}

frontend/src/pages/shared-libs/shared-libs.js

@@ -372,7 +372,7 @@ class SharedLibraries extends Component {
       <Fragment>
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Shared with me')}</h3>
               {(!Utils.isDesktop() && this.state.items.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -217,7 +217,7 @@ class PublicSharedView extends React.Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Shared with all')}</h3>
               {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>