Merge pull request #3324 from haiwen/file-view-mobile

[file view] modification for mobile

frontend/src/components/file-view/file-toolbar.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup } from 'reactstrap';
+import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -28,6 +28,7 @@ class FileToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      dropdownOpen: false,
       isShareDialogOpen: false
     };
   }
@@ -36,6 +37,12 @@ class FileToolbar extends React.Component {
     this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
   }
 
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
   render() {
     const { isLocked, lockedByMe } = this.props; 
 
@@ -61,7 +68,7 @@ class FileToolbar extends React.Component {
 
     return (
       <Fragment>
-        <ButtonGroup className="align-self-center">
+        <ButtonGroup className="d-none d-md-block">
           <IconButton
             id="open-parent-folder"
             icon="fa fa-folder-open"
@@ -122,6 +129,54 @@ class FileToolbar extends React.Component {
           )}
         </ButtonGroup>
 
+        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none">
+          <DropdownToggle className="sf2-icon-more">
+          </DropdownToggle>
+          <DropdownMenu right={true}>
+            <DropdownItem>
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
+                {gettext('Open parent folder')}
+              </a>
+            </DropdownItem>
+            {showLockUnlockBtn && (
+              <DropdownItem onClick={this.props.toggleLockFile}>
+                {lockUnlockText}
+              </DropdownItem>
+            )}
+            {showShareBtn && (
+              <DropdownItem onClick={this.toggleShareDialog}>
+                {gettext('Share')}
+              </DropdownItem>
+            )}
+            {filePerm == 'rw' && (
+              <DropdownItem>
+                <a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="text-inherit">
+                  {gettext('History')}
+                </a>
+              </DropdownItem>
+            )}
+            {(canEditFile && !err) && (
+              <DropdownItem>
+                <a href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`} className="text-inherit">
+                  {gettext('Edit')}
+                </a>
+              </DropdownItem>
+            )}
+            {canDownloadFile && (
+              <DropdownItem>
+                <a href="?dl=1" className="text-inherit">
+                  {gettext('Download')}
+                </a>
+              </DropdownItem>
+            )}
+            {enableComment && (
+              <DropdownItem onClick={this.props.toggleCommentPanel}>
+                {gettext('Comment')}
+              </DropdownItem>
+            )}
+          </DropdownMenu>
+        </Dropdown>
+
         {this.state.isShareDialogOpen &&
         <ModalPortal>
           <ShareDialog

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

@@ -72,7 +72,7 @@ class FileView extends React.Component {
   render() {
     return (
       <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between">
+        <div className="file-view-header d-flex justify-content-between align-items-center">
           <FileInfo
             isStarred={this.state.isStarred}
             isLocked={this.state.isLocked}

frontend/src/css/file-view.css

@@ -49,3 +49,12 @@ body {
 .tip {
   color: #808080;
 }
+/* for mobile */
+.seafile-comment {
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .seafile-comment {
+    width: 29%;
+  }
+}