[shared with all, group, groups] mobile: improvement (#3874)

* added component libs-mobile-thead.js

frontend/src/components/libs-mobile-thead.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { gettext } from '../utils/constants';
+
+function LibsMobileThead() {
+  return (
+    <thead>
+      <tr>
+        <th width="12%"><span className="sr-only">{gettext('Library Type')}</span></th>
+        <th width="80%"></th>
+        <th width="8%"><span className="sr-only">{gettext('Actions')}</span></th>
+      </tr>
+    </thead>
+  );
+}
+
+export default LibsMobileThead;

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -273,7 +273,7 @@ class SharedRepoListItem extends React.Component {
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle 
           tag="i" 
-          className="sf-dropdown-toggle sf2-icon-caret-down" 
+          className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
           title={gettext('More Operations')} 
           data-toggle="dropdown" 
           aria-expanded={this.state.isItemMenuShow}

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -4,6 +4,7 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import SharedRepoListItem from './shared-repo-list-item';
 import toaster from '../toast';
+import LibsMobileThead from '../libs-mobile-thead';
 
 const propTypes = {
   libraryType: PropTypes.string,
@@ -129,23 +130,9 @@ class SharedRepoListView extends React.Component {
   }
 
   renderMobileUI = () => {
-    let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
-
-    const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
-
     return (
-      <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
+      <table className="table-thead-hidden">
-        <thead>
+        <LibsMobileThead />
-          <tr>
-            <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="68%">
-              {gettext('Sort:')}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {sortByName && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {sortByTime && sortIcon}</a>
-            </th>
-            <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
-          </tr>
-        </thead>
         <tbody>
           {this.renderRepoListView()}
         </tbody>

frontend/src/pages/groups/group-view.js

@@ -23,6 +23,7 @@ import ManageMembersDialog from '../../components/dialog/manage-members-dialog';
 import LeaveGroupDialog from '../../components/dialog/leave-group-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import LibDetail from '../../components/dirent-detail/lib-details';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 
 import '../../css/group-view.css';
 
@@ -48,6 +49,7 @@ class GroupView extends React.Component {
       isOwner: false,
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      isSortOptionsDialogOpen: false,
       repoList: [],
       libraryType: 'group',
       isCreateRepoDialogShow: false,
@@ -382,6 +384,12 @@ class GroupView extends React.Component {
     }
   }
 
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   render() {
     let { errMessage, emptyTip, currentGroup, isDepartmentGroup, isStaff } = this.state;
     let isShowSettingIcon = !(currentGroup && currentGroup.parent_group_id !== 0 && currentGroup.admins.indexOf(username) === -1);
@@ -501,6 +509,15 @@ class GroupView extends React.Component {
                         </ul>
                       </div>
                     </Popover>
+                    {(window.innerWidth < 768) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+                    {this.state.isSortOptionsDialogOpen &&
+                    <SortOptionsDialog
+                      toggleDialog={this.toggleSortOptionsDialog}
+                      sortBy={this.state.sortBy}
+                      sortOrder={this.state.sortOrder}
+                      sortItems={this.sortItems}
+                    />
+                    }
                   </div>
                 </Fragment>
               )}

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 import { gettext, storages } from '../../utils/constants';
 import MylibRepoListItem from './mylib-repo-list-item';
+import LibsMobileThead from '../../components/libs-mobile-thead';
 
 const propTypes = {
   sortBy: PropTypes.string.isRequired,
@@ -101,13 +102,7 @@ class MylibRepoListView extends React.Component {
   renderMobileUI = () => {
     return (
       <table className="table-thead-hidden">
-        <thead>
+        <LibsMobileThead />
-          <tr>
-            <th width="12%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="80%"></th>
-            <th width="8%"><span className="sr-only">{gettext('Actions')}</span></th>
-          </tr>
-        </thead>
         <tbody>
           {this.renderRepoListView()}
         </tbody>

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

@@ -11,6 +11,7 @@ import toaster from '../../components/toast';
 import Repo from '../../models/repo';
 import Loading from '../../components/loading';
 import EmptyTip from '../../components/empty-tip';
+import LibsMobileThead from '../../components/libs-mobile-thead';
 import ModalPotal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -73,19 +74,9 @@ class Content extends Component {
         </thead>
       );
 
-      const mobileThead = (
-        <thead>
-          <tr>
-            <th width="12%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="80%"></th>
-            <th width="8%"><span className="sr-only">{gettext('Actions')}</span></th>
-          </tr>
-        </thead>
-      );
-
       const table = (
         <table className={window.innerWidth >= 768 ? '' : 'table-thead-hidden'}>
-          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          {window.innerWidth >= 768 ? desktopThead : <LibsMobileThead />}
           <TableBody items={items} />
         </table>
       );

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

@@ -15,6 +15,7 @@ import CommonToolbar from '../../components/toolbar/common-toolbar';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
 import ShareRepoDialog from '../../components/dialog/share-repo-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -32,6 +33,7 @@ class PublicSharedView extends React.Component {
       repoList: [],
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
+      isSortOptionsDialogOpen: false,
       libraryType: 'public',
       isCreateMenuShow: false,
       isCreateRepoDialogShow: false,
@@ -169,6 +171,12 @@ class PublicSharedView extends React.Component {
     });
   }
 
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   render() {
     let errMessage = this.state.errMessage;
     let emptyTip = (
@@ -207,8 +215,9 @@ class PublicSharedView extends React.Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <div className="cur-view-path">
+            <div className="cur-view-path align-items-center">
-              <h3 className="sf-heading">{gettext('Shared with all')}</h3>
+              <h3 className="sf-heading m-0">{gettext('Shared with all')}</h3>
+              {(window.innerWidth < 768) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
@@ -228,6 +237,14 @@ class PublicSharedView extends React.Component {
             </div>
           </div>
         </div>
+        {this.state.isSortOptionsDialogOpen &&
+        <SortOptionsDialog
+          toggleDialog={this.toggleSortOptionsDialog}
+          sortBy={this.state.sortBy}
+          sortOrder={this.state.sortOrder}
+          sortItems={this.sortItems}
+        />
+        }
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>
             <CreateRepoDialog