open file (#3008)

frontend/src/components/dir-view-mode/dir-column-file.js

@@ -49,6 +49,13 @@ class DirColumnFile extends React.Component {
     });
   }
 
+  onOpenFile = (e) => {
+    e.preventDefault();
+    let { path, repoID } = this.props;
+    let newUrl = siteRoot + 'lib/' + repoID + '/file' + Utils.encodePath(path);
+    window.open(newUrl, '_blank');
+  }
+
   goDraftPage = (e) => {
     e.preventDefault();
     this.props.goDraftPage();
@@ -75,6 +82,9 @@ class DirColumnFile extends React.Component {
         onLinkClick={this.props.onLinkClick}
       >
         <Fragment>
+          <span className='wiki-open-file position-fixed' onClick={this.onOpenFile}>
+            <i className="fas fa-expand-arrows-alt"></i>
+          </span>
           {this.props.reviewStatus === 'open' &&
             <div className='seafile-btn-view-review text-center'>
               <div className='tag tag-green'> 

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -7,6 +7,8 @@ import Delete from '../../components/dialog/delete-dialog';
 import Rename from '../../components/dialog/rename-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
+import { siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
@@ -21,6 +23,7 @@ const propTypes = {
   onDeleteNode: PropTypes.func.isRequired,
   onAddFileNode: PropTypes.func.isRequired,
   onAddFolderNode: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
 };
 
 class DirColumnNav extends React.Component {
@@ -61,6 +64,9 @@ class DirColumnNav extends React.Component {
       case 'Delete':
         this.onDeleteToggle();
         break;
+      case 'Open in New Tab':
+        this.onOpenFile(node);
+        break;
     }
   }
 
@@ -118,6 +124,11 @@ class DirColumnNav extends React.Component {
     this.props.onDeleteNode(node);
   }
 
+  onOpenFile = (node) => {
+    let newUrl = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(node.path);
+    window.open(newUrl, '_blank');
+  }
+
   checkDuplicatedName = (newName) => {
     let node = this.state.opNode;
     // root node to new node conditions: parentNode is null, 

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -86,6 +86,7 @@ class DirColumnView extends React.Component {
           onAddFileNode={this.props.onAddFileNode}
           onRenameNode={this.props.onRenameNode}
           onDeleteNode={this.props.onDeleteNode}
+          repoID={this.props.repoID}
         />
         <div className="dir-content-main">
           {this.props.isViewFile ? (

frontend/src/components/tree-view/tree-node-menu.js

@@ -31,7 +31,7 @@ class TreeNodeMenu extends React.Component {
     if (node.object.type === 'dir') {
       menuList = ['New Folder', 'New File', 'Rename', 'Delete'];
     } else {
-      menuList = ['Rename', 'Delete'];
+      menuList = ['Rename', 'Delete', 'Open in New Tab'];
     }
     return menuList;
   }
@@ -51,6 +51,9 @@ class TreeNodeMenu extends React.Component {
       case 'Delete':
         translateResult = gettext('Delete');
         break;
+      case 'Open in New Tab':
+        translateResult = gettext('Open in New Tab');
+        break;
       default:
         break;
     }

frontend/src/css/lib-content-view.css

@@ -151,6 +151,32 @@
   color:#eb8205;
 }
 
+.wiki-page-content .wiki-open-file {
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  border-radius: 50%;
+  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+  user-select: none;
+  border: none;
+  right: 10px;
+  bottom: 10px;
+  color: #999;
+  z-index: 1050;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.wiki-page-content .wiki-open-file i {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.wiki-page-content .wiki-open-file:hover {
+  background-color: #f6f6f6;
+}
+
 .dir-content-main .wiki-page-content .article {
   padding: 0 10px;
 }