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

* added component libs-mobile-thead.js
2025-09-08 18:30:53 +00:00 · 2019-07-18 20:21:50 +08:00
parent d5ad9ea67c
commit 168c0992a7
7 changed files with 60 additions and 37 deletions
--- a/frontend/src/components/libs-mobile-thead.js
+++ b/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;
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/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}
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-view.js
+++ b/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'}>
-        <thead>
-          <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>
+      <table className="table-thead-hidden">
+        <LibsMobileThead />
        <tbody>
          {this.renderRepoListView()}
        </tbody>
--- a/frontend/src/pages/groups/group-view.js
+++ b/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>
              )}
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/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>
-          <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>
+        <LibsMobileThead />
        <tbody>
          {this.renderRepoListView()}
        </tbody>
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/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>
      );
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/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">
-              <h3 className="sf-heading">{gettext('Shared with all')}</h3>
+            <div className="cur-view-path align-items-center">
+              <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