[my libs] mobile: improvement (#3839)

* [my libs] mobile: improvement

* modified 'more' icon
* modified background layer of op menu
* added 'star/unstar' to the op menu

* [my libs] mobile: redesigned 'sort'

frontend/src/components/dialog/sort-options.js

@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortList: PropTypes.func.isRequired
+};
+
+class SortOptions extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.sortOptions = [
+      {id: 'sort-option-1', value: 'name-asc', text: gettext('By name ascending')},
+      {id: 'sort-option-2', value: 'name-desc', text: gettext('By name descending')},
+      {id: 'sort-option-3', value: 'size-asc', text: gettext('By size ascending')},
+      {id: 'sort-option-4', value: 'size-desc', text: gettext('By size descending')},
+      {id: 'sort-option-5', value: 'time-asc', text: gettext('By time ascending')},
+      {id: 'sort-option-6', value: 'time-desc', text: gettext('By time descending')}
+    ];
+    const { sortBy, sortOrder } = this.props;
+    this.state = {
+      currentOption: `${sortBy}-${sortOrder}`
+    };
+  }
+
+  switchOption = (e) => {
+    if (!e.target.checked) {
+      return;
+    }
+
+    this.setState({
+      currentOption: e.target.value
+    });
+
+    const [sortBy, sortOrder] = e.target.value.split('-');
+    this.props.sortList(sortBy, sortOrder);
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalBody>
+          {this.sortOptions.map((item, index) => {
+            return (
+              <Fragment key={index}>
+                <input id={item.id} className="align-middle" type="radio" name="sort-options" value={item.value} checked={this.state.currentOption == item.value} onChange={this.switchOption} />
+                <label htmlFor={item.id} className="align-middle m-2">{item.text}</label><br />
+              </Fragment>
+            );
+          })}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+SortOptions.propTypes = propTypes;
+
+export default SortOptions;

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

@@ -11,6 +11,7 @@ import CommonToolbar from '../../components/toolbar/common-toolbar';
 import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import LibDetail from '../../components/dirent-detail/lib-details';
 import MylibRepoListView from './mylib-repo-list-view';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -25,6 +26,7 @@ class MyLibraries extends Component {
       isLoading: true,
       repoList: [],
       isShowDetails: false,
+      isSortOptionsDialogOpen: 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'
     };
@@ -70,6 +72,12 @@ class MyLibraries extends Component {
     });
   }
 
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   onCreateRepo = (repo) => {
     let permission = repo.permission;
     seafileAPI.createMineRepo(repo).then((res) => {
@@ -147,8 +155,9 @@ class MyLibraries extends Component {
         </div>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <div className="cur-view-path">
-              <h3 className="sf-heading">{gettext('My Libraries')}</h3>
+            <div className="cur-view-path align-items-center">
+              <h3 className="sf-heading m-0">{gettext('My Libraries')}</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 />}
@@ -168,6 +177,14 @@ class MyLibraries extends Component {
               }
             </div>
           </div>
+          {this.state.isSortOptionsDialogOpen &&
+            <SortOptionsDialog
+              toggleDialog={this.toggleSortOptionsDialog}
+              sortBy={this.state.sortBy}
+              sortOrder={this.state.sortOrder}
+              sortList={this.sortRepoList}
+            />
+          }
           {this.state.isShowDetails && (
             <div className="cur-view-detail">
               <LibDetail 

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

@@ -69,6 +69,10 @@ class MylibRepoListItem extends React.Component {
 
   onMenuItemClick = (item) => {
     switch(item) {
+      case 'Star':
+      case 'Unstar':
+        this.onStarRepo();
+        break;
       case 'Share':
         this.onShareToggle();
         break;
@@ -109,10 +113,16 @@ class MylibRepoListItem extends React.Component {
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
+        if (window.innerWidth < 728) {
+          toaster.success(gettext('Successfully unstarred the library.'));
+        }
       });
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
+        if (window.innerWidth < 728) {
+          toaster.success(gettext('Successfully starred the library.'));
+        }
       });
     }
   }
@@ -284,6 +294,7 @@ class MylibRepoListItem extends React.Component {
           {repo.repo_name && (
             <MylibRepoMenu
               repo={this.props.repo}
+              isStarred={this.state.isStarred}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}

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

@@ -99,17 +99,12 @@ class MylibRepoListView extends React.Component {
   }
 
   renderMobileUI = () => {
-    const sortIcon = this.props.sortOrder === 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
     return (
-      <table>
+      <table className="table-thead-hidden">
         <thead>
           <tr>
             <th width="10%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="84%">
-              {gettext('Sort:')}
-              <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {this.props.sortBy === 'name' && sortIcon}</a>
-              <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {this.props.sortBy === 'time' && sortIcon}</a>
-            </th>
+            <th width="84%"></th>
             <th width="6%"><span className="sr-only">{gettext('Actions')}</span></th>
           </tr>
         </thead>

frontend/src/pages/my-libs/mylib-repo-menu.js

@@ -7,6 +7,7 @@ import { Utils } from '../../utils/utils';
 const propTypes = {
   isPC: PropTypes.bool,
   repo: PropTypes.object.isRequired,
+  isStarred: PropTypes.bool,
   onFreezedItem: PropTypes.func.isRequired,
   onUnfreezedItem: PropTypes.func.isRequired,
   onMenuItemClick: PropTypes.func.isRequired,
@@ -71,6 +72,12 @@ class MylibRepoMenu extends React.Component {
   translateOperations = (item) => {
     let translateResult = '';
     switch(item) {
+      case 'Star':
+        translateResult = gettext('Star');
+        break;
+      case 'Unstar':
+        translateResult = gettext('Unstar');
+        break;
       case 'Share':
         translateResult = gettext('Share');
         break;
@@ -130,14 +137,15 @@ class MylibRepoMenu extends React.Component {
     }
 
     // mobile menu
-    operations.unshift('Share');
     operations.unshift('Delete');
+    operations.unshift('Share');
+    this.props.isStarred ? operations.unshift('Unstar') : operations.unshift('Star');
 
     return (
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle 
           tag="i"
-          className="sf-dropdown-toggle sf2-icon-caret-down ml-0"
+          className="sf-dropdown-toggle fa fa-ellipsis-v ml-0"
           title={gettext('More Operations')}
           // onClick={this.clickOperationMenuToggle}
           data-toggle="dropdown"