[misc] modification for mobile (#4016)

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

@@ -15,12 +15,12 @@ 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')}
+      {value: 'name-asc', text: gettext('By name ascending')},
+      {value: 'name-desc', text: gettext('By name descending')},
+      {value: 'size-asc', text: gettext('By size ascending')},
+      {value: 'size-desc', text: gettext('By size descending')},
+      {value: 'time-asc', text: gettext('By time ascending')},
+      {value: 'time-desc', text: gettext('By time descending')}
     ];
     const { sortBy, sortOrder } = this.props;
     this.state = {
@@ -49,8 +49,8 @@ class SortOptions extends React.Component {
           {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 />
+                <input id={`option-${index}`} className="align-middle" type="radio" name="sort-option" value={item.value} checked={this.state.currentOption == item.value} onChange={this.switchOption} />
+                <label htmlFor={`option-${index}`} className="align-middle m-2">{item.text}</label><br />
               </Fragment>
             );
           })}

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

@@ -483,7 +483,7 @@ class SharedRepoListItem extends React.Component {
   }
 
   render() {
-    if (window.innerWidth >= 768) {
+    if (Utils.isDesktop()) {
       return this.renderPCUI();
     } else {
       return this.renderMobileUI();

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

@@ -141,7 +141,7 @@ class SharedRepoListView extends React.Component {
   }
 
   render() {
-    if (window.innerWidth >= 768) {
+    if (Utils.isDesktop()) {
       return this.renderPCUI();
     } else {
       return this.renderMobileUI();

frontend/src/components/toolbar/groups-toolbar.js

@@ -32,9 +32,7 @@ class GroupsToolbar extends React.Component {
                 </Button>
               </MediaQuery>
               <MediaQuery query="(max-width: 767.8px)">
-                <Button color="btn btn-secondary operation-item my-1" onClick={this.props.toggleAddGroupModal}>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
-                </Button>
+                <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Group')} onClick={this.props.toggleAddGroupModal}></span>
               </MediaQuery>
             </div>
           )}

frontend/src/components/toolbar/invitations-toolbar.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
 import CommonToolbar from './common-toolbar';
 import { Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   onShowSidePanel: PropTypes.func.isRequired,
@@ -24,7 +24,7 @@ class InvitationsToolbar extends React.Component {
         <div className="cur-view-toolbar">
           <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
           </span>
-          {window.innerWidth >= 768 ? (
+          {Utils.isDesktop() ? (
             <div className="operation">
               <Button color="btn btn-secondary operation-item" onClick={toggleInvitePeopleDialog}>
                 <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite People')}

frontend/src/components/toolbar/repo-view-toobar.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
+import { Utils } from '../../utils/utils';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
@@ -8,7 +8,6 @@ import CreateRepoDialog from '../dialog/create-repo-dialog';
 import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
 
 const propTypes = {
-  // isOwnLibrary: PropTypes.bool.isRequired,
   libraryType: PropTypes.string.isRequired,
   onCreateRepo: PropTypes.func.isRequired,
   onShowSidePanel: PropTypes.func.isRequired,
@@ -42,28 +41,25 @@ class RepoViewToolbar extends React.Component {
       <Fragment>
         <div className="cur-view-toolbar">
           <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          <MediaQuery query="(min-width: 768px)">
+          {Utils.isDesktop() ? (
             <div className="operation">
               <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
                 <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
               </button>
-              {this.props.libraryType !== 'group' && (
-                <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
-                  <DropdownToggle className='btn btn-secondary operation-item'>
-                    {gettext('More')}
-                  </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem className="link-dropdown-container">
-                      <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
-                    </DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              )}
+              <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
+                <DropdownToggle className='btn btn-secondary operation-item'>
+                  {gettext('More')}
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem className="link-dropdown-container">
+                    <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
             </div>
-          </MediaQuery>
-          <MediaQuery query="(max-width: 767.8px)">
+          ) : (
             <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
-          </MediaQuery>
+          )}
         </div>
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>

frontend/src/components/wiki-list-view/wiki-list-item.js

@@ -3,14 +3,13 @@ import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { siteRoot, gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 // import { seafileAPI } from '../../utils/seafile-api';
 // import Toast from '../toast';
 import ModalPortal from '../modal-portal';
 import WikiDeleteDialog from '../dialog/wiki-delete-dialog';
 // import Rename from '../rename';
 
-import { Utils } from '../../utils/utils';
-
 const propTypes = {
   wiki: PropTypes.object.isRequired,
   // renameWiki: PropTypes.func.isRequired,
@@ -186,7 +185,7 @@ class WikiListItem extends Component {
 
     return (
       <Fragment>
-        {window.innerWidth >= 768 ? desktopItem : mobileItem}
+        {Utils.isDesktop() ? desktopItem : mobileItem}
         {this.state.isShowDeleteDialog &&
           <ModalPortal>
             <WikiDeleteDialog

frontend/src/components/wiki-list-view/wiki-list-view.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import WikiListItem from './wiki-list-item';
 import LibsMobileThead from '../libs-mobile-thead';
 
@@ -35,6 +36,7 @@ class WikiListView extends Component {
     } else if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
+      const isDesktop = Utils.isDesktop();
       const desktopThead = (
         <thead>
           <tr>
@@ -47,8 +49,8 @@ class WikiListView extends Component {
         </thead>
       );
       return (
-        <table className={window.innerWidth >= 768 ? '' : 'table-thead-hidden'}>
-          {window.innerWidth >= 768 ? desktopThead : <LibsMobileThead />}
+        <table className={isDesktop ? '' : 'table-thead-hidden'}>
+          {isDesktop ? desktopThead : <LibsMobileThead />}
           <tbody>
             {wikis.map((wiki, index) => {
               return (