fix with confilt files

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,6 +40,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; 
     let showLockUnlockBtn = false;
@@ -63,7 +70,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"
@@ -134,6 +141,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

@@ -76,7 +76,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}