[view file via shared dir] rewrote it with react (#3235)

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

@@ -15,7 +15,7 @@ const propTypes = {
 };
 
 let loginUser = window.app.pageOptions.name;
-const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, download } = window.shared.pageOptions;
+const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, sharedBy, siteName, enableWatermark, download, zipped } = window.shared.pageOptions;
 
 class SharedFileView extends React.Component {
 
@@ -52,6 +52,25 @@ class SharedFileView extends React.Component {
     }
   }
 
+  renderPath = () => {
+    return (
+      <React.Fragment>
+        {zipped.map((item, index) => {
+          if (index != zipped.length - 1) {
+            return (
+              <React.Fragment key={index}>
+                <a href={`${siteRoot}d/${sharedToken}/?p=${encodeURIComponent(item.path)}`}>{item.name}</a>
+                <span> / </span>
+              </React.Fragment>
+            );
+          }
+        })
+        }
+        {zipped[zipped.length - 1].name}
+      </React.Fragment>
+    );
+  }
+
   render() {
     return (
       <div className="shared-file-view-md">
@@ -67,19 +86,20 @@ class SharedFileView extends React.Component {
           <div className="shared-file-view-head">
             <div className="float-left">
               <h2 className="ellipsis" title={fileName}>{fileName}</h2>
-              <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
+              {zipped ?
+                <p className="m-0">{gettext('Current path: ')}{this.renderPath()}</p> :
+                <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
+              }
             </div>
             {download &&
               <div className="float-right">
                 {(loginUser && loginUser !== sharedBy) &&
-                  <Button color="secondary" id="save" className="shared-file-op-btn"
+                  <Button color="secondary" id="save"
                     onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
                   </Button>
                 }{' '}
                 {!trafficOverLimit &&
-                  <Button color="success" className="shared-file-op-btn">
-                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
-                  </Button>
+                <a href="?dl=1" className="btn btn-success">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
                 }
               </div>
             }

frontend/src/css/shared-file-view.css

@@ -28,11 +28,6 @@
   justify-content: space-between;
 }
 
-.shared-file-view-head a {
-  color: #fff;
-  text-decoration: none;
-}
-
 .shared-file-view-head h2 {
   color: #222;
   font-size: 1.4em;
@@ -44,10 +39,6 @@
   margin: 0;
 }
 
-.shared-file-view-head .shared-file-op-btn {
-  padding: 7px;
-}
-
 .shared-file-view-body {
   height: calc(100% - 60px);
   padding: 30px 0 15px;

frontend/src/shared-file-view-image.js

@@ -2,10 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
+import { gettext } from './utils/constants';
 
 import './css/image-file-view.css';
 
-const { fileName, rawPath, err } = window.shared.pageOptions;
+const { fileName, rawPath, err, prevImgPath, nextImgPath } = window.shared.pageOptions;
+
+const prevImgURL = `?p=${encodeURIComponent(prevImgPath)}`;
+const nextImgURL = `?p=${encodeURIComponent(nextImgPath)}`;
 
 class SharedFileViewImage extends React.Component {
   render() {
@@ -14,6 +18,18 @@ class SharedFileViewImage extends React.Component {
 }
 
 class FileContent extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('keydown', (e) => {
+      if (prevImgPath && e.keyCode == 37) { // press '<-'
+        location.href = prevImgURL;
+      }
+      if (nextImgPath && e.keyCode == 39) { // press '->'
+        location.href = nextImgURL;
+      }
+    });
+  }
+
   render() {
     if (err) {
       return <SharedFileViewTip />;
@@ -22,6 +38,12 @@ class FileContent extends React.Component {
     return (
       <div className="shared-file-view-body d-flex text-center">
         <div className="image-file-view flex-1">
+          {prevImgPath && (
+            <a href={prevImgURL} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
+          )}
+          {nextImgPath && (
+            <a href={nextImgURL} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
+          )}
           <img src={rawPath} alt={fileName} id="image-view" />
         </div>
       </div>

seahub/templates/shared_file_view_react.html

@@ -30,26 +30,40 @@
 
 {% block extra_script %}
 <script type="text/javascript">
-    window.shared = {
-        pageOptions: {
-            repoID: '{{ repo.id }}',
-            filePath: '{{ path|escapejs }}',
-            sharedToken: '{{ shared_token }}',
-            trafficOverLimit: {% if traffic_over_limit %}true{% else %}false{% endif %},
-            fileName: '{{ file_name|escapejs }}',
-            fileSize: {{ file_size }},
-            rawPath: '{{ raw_path|escapejs }}',
-            sharedBy: '{{ shared_by|email2nickname }}',
-            siteName: '{{ site_name }}',
-            enableWatermark: {% if enable_watermark %}true{% else %}false{% endif %},
-            download: '{{ permissions.can_download }}' == 'True',
-            fileContent: '{{ file_content|escapejs }}',
-            err: {% if err %}'{{ err }}'{% else %}''{% endif %},
-            fileType: '{{ filetype }}',
-            fileExt: '{{ fileext }}',
-            commitID: '{{ current_commit.id }}' || '{{ repo.head_cmmt_id }}'
-        }
-    };
+  window.shared = {
+    pageOptions: {
+      repoID: '{{ repo.id }}',
+      filePath: '{{ path|escapejs }}',
+      sharedToken: '{{ shared_token }}',
+      trafficOverLimit: {% if traffic_over_limit %}true{% else %}false{% endif %},
+      fileName: '{{ file_name|escapejs }}',
+      fileSize: {{ file_size }},
+      rawPath: '{{ raw_path|escapejs }}',
+      sharedBy: '{{ shared_by|email2nickname }}',
+      siteName: '{{ site_name }}',
+      enableWatermark: {% if enable_watermark %}true{% else %}false{% endif %},
+      download: '{{ permissions.can_download }}' == 'True',
+      fileContent: '{{ file_content|escapejs }}',
+      err: {% if err %}'{{ err }}'{% else %}''{% endif %},
+      fileType: '{{ filetype }}',
+      fileExt: '{{ fileext }}',
+      commitID: '{{ current_commit.id }}' || '{{ repo.head_cmmt_id }}',
+
+      // for 'view file in shared dir'
+      zipped: (function() {
+        var list = [];
+        {% for name, path in zipped %}
+        list.push({
+          'name': '{{ name|escapejs }}',
+          'path': '{{ path|escapejs }}'
+        });
+        {% endfor %}
+        return list;
+      })(),
+      prevImgPath: {% if img_prev %}'{{ img_prev|escapejs }}'{% else %}''{% endif %},
+      nextImgPath: {% if img_next %}'{{ img_next|escapejs }}'{% else %}''{% endif %}
+    }
+  };
 </script>
 {% if filetype == 'Markdown' %}
     {% render_bundle 'sharedFileViewMarkdown' 'js' %}

seahub/views/file.py

@@ -1432,7 +1432,11 @@ def view_file_via_shared_dir(request, fileshare):
     else:
         zipped = gen_path_link(req_path, os.path.basename(fileshare.path[:-1]))
 
-    return render(request, 'shared_file_view.html', {
+    template = 'shared_file_view.html'
+    if filetype != XMIND:
+        template = 'shared_file_view_react.html'
+
+    return render(request, template, {
             'repo': repo,
             'obj_id': obj_id,
             'from_shared_dir': True,