Merge branch '7.0'

2025-08-31 22:54:11 +00:00 · 2019-08-25 13:25:37 +08:00
parent 33d0e5ade6 9996db6f5f
commit 47f52bcd90
21 changed files with 92 additions and 142 deletions
--- a/frontend/src/app.js
+++ b/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 });
    }
  } 
--- a/frontend/src/components/dialog/sort-options.js
+++ b/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>
            );
          })}
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/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;
--- a/frontend/src/components/file-uploader/upload-progress-dialog.js
+++ b/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,
--- 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
@@ -475,7 +475,7 @@ class SharedRepoListItem extends React.Component {
  }

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

  render() {
-    if (window.innerWidth >= 768) {
+    if (Utils.isDesktop()) {
      return this.renderPCUI();
    } else {
      return this.renderMobileUI();
--- a/frontend/src/components/toolbar/groups-toolbar.js
+++ b/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>
          )}
--- a/frontend/src/components/toolbar/invitations-toolbar.js
+++ b/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')}
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/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,12 +41,11 @@ 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')}
@@ -58,12 +56,10 @@ class RepoViewToolbar extends React.Component {
                  </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>
--- a/frontend/src/components/wiki-list-view/wiki-list-item.js
+++ b/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
--- a/frontend/src/components/wiki-list-view/wiki-list-view.js
+++ b/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 (
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/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)}/`;
--- a/frontend/src/pages/groups/group-view.js
+++ b/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}
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/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'}`}>
-          {window.innerWidth >= 768 ? desktopThead : mobileThead}
-          <TableBody items={items} />
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+          {isDesktop ? desktopThead : mobileThead}
+          <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 desktopItem;
-    } else {
-      return mobileItem;
-    }
+    return this.props.isDesktop ? desktopItem : mobileItem;
  }
 }

--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/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 />}
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/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);
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/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'}>
-          {window.innerWidth >= 768 ? desktopThead : <LibsMobileThead />}
-          <TableBody items={items} />
+        <table className={isDesktop ? '' : 'table-thead-hidden'}>
+          {isDesktop ? desktopThead : <LibsMobileThead />}
+          <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}.')
          .replace('{library_name_placeholder}', repoName);
        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}.')
          .replace('{library_name_placeholder}', repoName);
        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
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/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'>
-                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
-                    </DropdownToggle>
+                    <DropdownToggle 
+                      tag="span"
+                      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 />}
--- a/frontend/src/pages/starred/starred.js
+++ b/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'}`}>
-          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+        <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
+          {isDesktop ? desktopThead : mobileThead}
          <TableBody items={items} />
        </table>
      ) : emptyTip;
@@ -240,11 +241,7 @@ class Item extends Component {
      </tr>
    );

-    if (window.innerWidth >= 768) {
-      return desktopItem;
-    } else {
-      return mobileItem;
-    }
+    return Utils.isDesktop() ? desktopItem : 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
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/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' &&
-                    <button className="btn btn-secondary operation-item" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>}
-                </MediaQuery>
-                <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>
+                {this.props.permission == 'rw' && (
+                  Utils.isDesktop() ?
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
+                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{'font-size': '1.1rem'}}></span>
+                )}
              </div>
              <CommonToolbar 
                repoID={repoID}
--- a/frontend/src/wiki.js
+++ b/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 });
    }
  }