Merge branch 'master' into update_txt_file_save_mechanism

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';
@@ -31,6 +31,7 @@ class FileToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      dropdownOpen: false,
       isShareDialogOpen: false
     };
   }
@@ -39,8 +40,15 @@ class FileToolbar extends React.Component {
     this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
   }
 
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
   render() {
     const { isLocked, lockedByMe } = this.props; 
+
     let showLockUnlockBtn = false;
     let lockUnlockText, lockUnlockIcon;
     if (canLockUnlockFile) {
@@ -63,7 +71,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"
@@ -96,25 +104,15 @@ class FileToolbar extends React.Component {
               href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`}
             />
           )}
-          {(canEditFile && !err) && 
-            ( this.props.isSaving ? 
-              <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
-                <i className={'fa fa-spin fa-spinner'}/></button> :
-              (
-                this.props.isContentChangedButNotSaved ?
-                  <IconButton
-                    text={gettext('Save')}
-                    id={'saveButton'}
-                    icon={'fa fa-save'}
-                    // button imported in this file does not have functionalities of
-                    // isActive as button imported in markdowneditor has
-                    //isActive={!isContentChanged}
-                    onClick={this.props.onSaveChangedContent}
-                  /> :
-                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
-                    <i className={'fa fa-save'}/></button>
-              )
-            )}
+          {(canEditFile && !err) && (
+            <IconButton
+              id="edit"
+              icon="fa fa-edit"
+              text={gettext('Edit')}
+              tag="a"
+              href={`${siteRoot}repo/${repoID}/file/edit/?p=${encodeURIComponent(filePath)}&file_enc=${encodeURIComponent(fileEnc)}`}
+            />
+          )}
           {canDownloadFile && (
             <IconButton
               id="download-file"
@@ -134,6 +132,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

@@ -20,7 +20,6 @@ const { isStarred, isLocked, lockedByMe,
   repoID, filePath, enableWatermark, userNickName
 } = window.app.pageOptions;
 
-
 class FileView extends React.Component {
 
   constructor(props) {
@@ -29,7 +28,7 @@ class FileView extends React.Component {
       isStarred: isStarred,
       isLocked: isLocked,
       lockedByMe: lockedByMe,
-      isCommentPanelOpen: false,
+      isCommentPanelOpen: false
     };
   }
 
@@ -76,7 +75,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}
@@ -85,9 +84,6 @@ class FileView extends React.Component {
           <FileToolbar 
             isLocked={this.state.isLocked}
             lockedByMe={this.state.lockedByMe}
-            onSaveChangedContent={this.props.onSaveChangedContent}
-            isSaving={this.props.isSaving}
-            isContentChangedButNotSaved={this.props.isContentChangedButNotSaved}
             toggleLockFile={this.toggleLockFile}
             toggleCommentPanel={this.toggleCommentPanel}
           />