Merge branch '7.0'

frontend/src/app.js

@@ -69,7 +69,7 @@ class App extends Component {
   }
 
   componentWillMount() {
-    if (window.screen.width <= 768) {
+    if (!Utils.isDesktop()) {
       this.setState({
         isSidePanelClosed: true
       });
@@ -166,7 +166,7 @@ class App extends Component {
       let { currentTab, pathPrefix } = this.state;
       window.history.replaceState({currentTab: currentTab, pathPrefix: pathPrefix}, null);
     });
-    if (window.screen.width <= 768 && !this.state.isSidePanelClosed) {
+    if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
       this.setState({ isSidePanelClosed: true });
     }
   } 

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')},
+      {value: 'name-asc', text: gettext('By name ascending')},
-      {id: 'sort-option-2', value: 'name-desc', text: gettext('By name descending')},
+      {value: 'name-desc', text: gettext('By name descending')},
-      {id: 'sort-option-3', value: 'size-asc', text: gettext('By size ascending')},
+      {value: 'size-asc', text: gettext('By size ascending')},
-      {id: 'sort-option-4', value: 'size-desc', text: gettext('By size descending')},
+      {value: 'size-desc', text: gettext('By size descending')},
-      {id: 'sort-option-5', value: 'time-asc', text: gettext('By time ascending')},
+      {value: 'time-asc', text: gettext('By time ascending')},
-      {id: 'sort-option-6', value: 'time-desc', text: gettext('By time descending')}
+      {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} />
+                <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={item.id} className="align-middle m-2">{item.text}</label><br />
+                <label htmlFor={`option-${index}`} className="align-middle m-2">{item.text}</label><br />
               </Fragment>
             );
           })}

frontend/src/components/file-uploader/file-uploader.js

@@ -43,7 +43,7 @@ class FileUploader extends React.Component {
       isUploadProgressDialogShow: false,
       isUploadRemindDialogShow: false,
       currentResumableFile: null,
-      uploadBitrate: '0',
+      uploadBitrate: 0,
       allFilesUploaded: false,
     };
 
@@ -74,6 +74,7 @@ class FileUploader extends React.Component {
       generateUniqueIdentifier: this.generateUniqueIdentifier,
       forceChunkSize: true,
       maxChunkRetries: 3,
+      minFileSize: 0,
     });
 
     this.resumable.assignBrowse(this.uploadInput.current, true);
@@ -410,7 +411,7 @@ class FileUploader extends React.Component {
   setHeaders = (resumableFile, resumable) => {
     let offset = resumable.offset;
     let chunkSize = resumable.getOpt('chunkSize');
-    let fileSize = resumableFile.size;
+    let fileSize = resumableFile.size === 0 ? 1 : resumableFile.size;
     let startByte = offset !== 0 ? offset * chunkSize : 0;
     let endByte = Math.min(fileSize, (offset + 1) * chunkSize) - 1;
 
@@ -594,7 +595,6 @@ class FileUploader extends React.Component {
     var firedRetry = false;
     resumableFile.resumableObj.on('chunkingComplete', () => {
       if(!firedRetry) {
-        console.log(path);
         seafileAPI.getFileUploadedBytes(repoID, path, fileName).then(res => {
           let uploadedBytes = res.data.uploadedBytes;
           let blockSize = parseInt(resumableUploadFileBlockSize) * 1024 * 1024 || 1024 * 1024;

frontend/src/components/file-uploader/upload-progress-dialog.js

@@ -5,7 +5,7 @@ import UploadListItem from './upload-list-item';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  uploadBitrate: PropTypes.string.isRequired,
+  uploadBitrate: PropTypes.number.isRequired,
   totalProgress: PropTypes.number.isRequired,
   retryFileList: PropTypes.array.isRequired,
   uploadFileList: PropTypes.array.isRequired,

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

@@ -475,7 +475,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}>
+                <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Group')} onClick={this.props.toggleAddGroupModal}></span>
-                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
-                </Button>
               </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}>
-                <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
+                <DropdownToggle className='btn btn-secondary operation-item'>
-                  <DropdownToggle className='btn btn-secondary operation-item'>
+                  {gettext('More')}
-                    {gettext('More')}
+                </DropdownToggle>
-                  </DropdownToggle>
+                <DropdownMenu>
-                  <DropdownMenu>
+                  <DropdownItem className="link-dropdown-container">
-                    <DropdownItem className="link-dropdown-container">
+                    <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
-                      <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                  </DropdownItem>
-                    </DropdownItem>
+                </DropdownMenu>
-                  </DropdownMenu>
+              </Dropdown>
-                </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'}>
+        <table className={isDesktop ? '' : 'table-thead-hidden'}>
-          {window.innerWidth >= 768 ? desktopThead : <LibsMobileThead />}
+          {isDesktop ? desktopThead : <LibsMobileThead />}
           <tbody>
             {wikis.map((wiki, index) => {
               return (

frontend/src/pages/dashboard/files-activities.js

@@ -18,11 +18,10 @@ const contentPropTypes = {
   items: PropTypes.array.isRequired,
 };
 
-const isDesktop = window.innerWidth >= 768;
-
 class FileActivitiesContent extends Component {
 
   render() {
+    const isDesktop = Utils.isDesktop();
     let { items, isLoadingMore } = this.props;
 
     const desktopThead = (
@@ -56,6 +55,7 @@ class FileActivitiesContent extends Component {
               return (
                 <ActivityItem 
                   key={index}
+                  isDesktop={isDesktop}
                   item={item}
                   index={index}
                   items={items}
@@ -94,6 +94,7 @@ class ActivityItem extends Component {
   }
 
   render() {
+    const isDesktop = this.props.isDesktop;
     let {item, index, items} = this.props;
     let op, details, moreDetails = false;
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;

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

@@ -404,9 +404,13 @@ class GroupView extends React.Component {
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
               {((!isDepartmentGroup && canAddRepo) || (isDepartmentGroup && isStaff)) && (
+                Utils.isDesktop() ? (
                 <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateRepoToggle}>
                   <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
                 </button>
+                ) : (
+                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateRepoToggle}></span>
+                )
               )}
             </div>
           </div>
@@ -509,7 +513,7 @@ class GroupView extends React.Component {
                         </ul>
                       </div>
                     </Popover>
-                    {(window.innerWidth < 768) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+                    {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
                     {this.state.isSortOptionsDialogOpen &&
                     <SortOptionsDialog
                       toggleDialog={this.toggleSortOptionsDialog}

frontend/src/pages/linked-devices/linked-devices.js

@@ -44,37 +44,21 @@ class Content extends Component {
         </thead>
       );
 
+      const isDesktop = Utils.isDesktop();
       return items.length ? (
-        <table className={`table-hover ${window.innerWidth >= 768 ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
-          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          {isDesktop ? desktopThead : mobileThead}
-          <TableBody items={items} />
+          <tbody>
+            {items.map((item, index) => {
+              return <Item key={index} data={item} isDesktop={isDesktop} />;
+            })}
+          </tbody>
         </table>
       ): emptyTip;
     }
   }
 }
 
-class TableBody extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      items: this.props.items
-    };
-  }
-
-  render() {
-
-    let listLinkedDevices = this.state.items.map(function(item, index) {
-      return <Item key={index} data={item} />;
-    }, this);
-
-    return (
-      <tbody>{listLinkedDevices}</tbody>
-    );
-  }
-}
-
 class Item extends Component {
 
   constructor(props) {
@@ -113,15 +97,11 @@ class Item extends Component {
       this.setState({
         unlinked: true
       });
-      let msg_s = gettext('Successfully unlink %(name)s.');
+      let msg_s = gettext('Successfully unlinked %(name)s.');
       msg_s = msg_s.replace('%(name)s', data.device_name);
       toaster.success(msg_s);
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
-      if (errMessage === gettext('Error')) {
-        errMessage = gettext('Failed to unlink %(name)s');
-        errMessage = errMessage.replace('%(name)s', data.device_name);
-      }
       toaster.danger(errMessage);
     });
   }
@@ -176,11 +156,7 @@ class Item extends Component {
       </tr>
     );
 
-    if (window.innerWidth >= 768) {
+    return this.props.isDesktop ? desktopItem : mobileItem;
-      return desktopItem;
-    } else {
-      return mobileItem;
-    }
   }
 }
 

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

@@ -161,7 +161,7 @@ class MyLibraries extends Component {
           <div className="cur-view-container">
             <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>}
+              {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}

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

@@ -114,11 +114,9 @@ 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 < 768) {
           const msg = gettext('Successfully unstarred {library_name_placeholder}.')
             .replace('{library_name_placeholder}', repoName);
           toaster.success(msg);
-        }
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -126,11 +124,9 @@ class MylibRepoListItem extends React.Component {
     } else {
       seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
-        if (window.innerWidth < 768) {
           const msg = gettext('Successfully starred {library_name_placeholder}.')
             .replace('{library_name_placeholder}', repoName);
           toaster.success(msg);
-        }
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);

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

@@ -74,10 +74,15 @@ class Content extends Component {
         </thead>
       );
 
+      const isDesktop = Utils.isDesktop();
       const table = (
-        <table className={window.innerWidth >= 768 ? '' : 'table-thead-hidden'}>
+        <table className={isDesktop ? '' : 'table-thead-hidden'}>
-          {window.innerWidth >= 768 ? desktopThead : <LibsMobileThead />}
+          {isDesktop ? desktopThead : <LibsMobileThead />}
-          <TableBody items={items} />
+          <tbody>
+            {items.map((item, index) => {
+              return <Item key={index} data={item} isDesktop={isDesktop} />;
+            })}
+          </tbody>
         </table>
       );
 
@@ -95,24 +100,6 @@ Content.propTypes = {
   sortItems: PropTypes.func.isRequired
 };
 
-class TableBody extends Component {
-
-  render() {
-
-    let listItems = this.props.items.map(function(item, index) {
-      return <Item key={index} data={item} />;
-    }, this);
-
-    return (
-      <tbody>{listItems}</tbody>
-    );
-  }
-}
-
-TableBody.propTypes = {
-  items: PropTypes.array.isRequired
-};
-
 class Item extends Component {
 
   constructor(props) {
@@ -187,11 +174,9 @@ class Item extends Component {
     if (this.state.isStarred) {
       seafileAPI.unstarItem(this.props.data.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
-        if (window.innerWidth < 768) {
+        const msg = gettext('Successfully unstarred {library_name_placeholder}.')
-          const msg = gettext('Successfully unstarred {library_name_placeholder}.')
+          .replace('{library_name_placeholder}', repoName);
-            .replace('{library_name_placeholder}', repoName);
+        toaster.success(msg);
-          toaster.success(msg);
-        }
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -199,11 +184,9 @@ class Item extends Component {
     } else {
       seafileAPI.starItem(this.props.data.repo_id, '/').then(() => {
         this.setState({isStarred: !this.state.isStarred});
-        if (window.innerWidth < 768) {
+        const msg = gettext('Successfully starred {library_name_placeholder}.')
-          const msg = gettext('Successfully starred {library_name_placeholder}.')
+          .replace('{library_name_placeholder}', repoName);
-            .replace('{library_name_placeholder}', repoName);
+        toaster.success(msg);
-          toaster.success(msg);
-        }
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -313,11 +296,12 @@ class Item extends Component {
       </Fragment>
     );
 
-    return window.innerWidth >= 768 ? desktopItem : mobileItem;
+    return this.props.isDesktop ? desktopItem : mobileItem;
   }
 }
 
 Item.propTypes = {
+  isDesktop: PropTypes.bool.isRequired,
   data: PropTypes.object.isRequired
 };
 
@@ -390,7 +374,7 @@ class SharedLibraries extends Component {
           <div className="cur-view-container">
             <div className="cur-view-path align-items-center">
               <h3 className="sf-heading m-0">{gettext('Shared with me')}</h3>
-              {(window.innerWidth < 768) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+              {(!Utils.isDesktop() && this.state.items.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
             <div className="cur-view-content">
               <Content

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

@@ -195,13 +195,15 @@ class PublicSharedView extends React.Component {
                 <Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
                   <MediaQuery query="(min-width: 768px)">
                     <DropdownToggle className='btn btn-secondary operation-item'>
-                      <i className="fas fa-plus-square text-secondary"></i>{gettext('Add Library')}
+                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
                     </DropdownToggle>
                   </MediaQuery>
                   <MediaQuery query="(max-width: 767.8px)">
-                    <DropdownToggle className='btn btn-secondary operation-item my-1'>
+                    <DropdownToggle 
-                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
+                      tag="span"
-                    </DropdownToggle>
+                      className="sf2-icon-plus mobile-toolbar-icon"
+                      title={gettext('Add Library')}
+                    />
                   </MediaQuery>
                   <DropdownMenu>
                     <DropdownItem onClick={this.onSelectRepoToggle}>{gettext('Share existing libraries')}</DropdownItem>
@@ -217,7 +219,7 @@ class PublicSharedView extends React.Component {
           <div className="cur-view-container">
             <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>}
+              {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}

frontend/src/pages/starred/starred.js

@@ -46,9 +46,10 @@ class Content extends Component {
         </thead>
       );
 
+      const isDesktop = Utils.isDesktop();
       return items.length ? (
-        <table className={`table-hover ${window.innerWidth >= 768 ? '': 'table-thead-hidden'}`}>
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
-          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          {isDesktop ? desktopThead : mobileThead}
           <TableBody items={items} />
         </table>
       ) : emptyTip;
@@ -240,11 +241,7 @@ class Item extends Component {
       </tr>
     );
 
-    if (window.innerWidth >= 768) {
+    return Utils.isDesktop() ? desktopItem : mobileItem;
-      return desktopItem;
-    } else {
-      return mobileItem;
-    }
   }
 }
 
@@ -260,7 +257,6 @@ class Starred extends Component {
 
   componentDidMount() {
     seafileAPI.listStarredItems().then((res) => {
-      //res: {data: Array(2), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       this.setState({
         loading: false,
         items: res.data.starred_item_list

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

@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
 import { gettext, repoID, slug, siteRoot, username } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
@@ -100,14 +99,11 @@ class MainPanel extends Component {
             <Fragment>
               <div className="cur-view-toolbar">
                 <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-                <MediaQuery query="(min-width: 768px)">
+                {this.props.permission == 'rw' && (
-                  {this.props.permission === 'rw' &&
+                  Utils.isDesktop() ?
-                    <button className="btn btn-secondary operation-item" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>}
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
-                </MediaQuery>
+                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{'font-size': '1.1rem'}}></span>
-                <MediaQuery query="(max-width: 767.8px)">
+                )}
-                  {this.props.permission === 'rw' &&
-                    <button className="btn btn-secondary operation-item my-1" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>}
-                </MediaQuery>
               </div>
               <CommonToolbar 
                 repoID={repoID}

frontend/src/wiki.js

@@ -49,7 +49,7 @@ class Wiki extends Component {
   }
 
   componentWillMount() {
-    if (window.screen.width <= 768) {
+    if (!Utils.isDesktop()) {
       this.setState({ closeSideBar: true });
     }
   }