modified file-view ui

media/css/seahub.css

@@ -751,19 +751,36 @@ p {
     color:#444;
     margin-top:3px;
 }
-#file-view {
+#file {
     padding:3px;
     background:#dedede;
     border-radius:3px;
     -moz-border-radius:3px;
-    margin-top:13px;
+    margin-top:23px;
+}
+#file-op {
+    padding:8px 10px;
+    background:#fff;
+    text-align:right;
+    border:1px solid #ccc;
+}
+#file-op button {
+    padding:0 8px;
+}
+#file-view {
+    border: 1px solid #ccc;
+    border-top:none;
+}
+.file-view-tip {
+    height: 150px;
+    padding:10px;
+    background:#fff;
 }
 #docu-view {
     font-size:13px;/*override .ace_editor*/
     line-height:19px;/*using 'px' as unit, for ie8 to get the right line-height*/
     font-family: Consolas,"Liberation Mono",Courier,monospace;/*override .ace_editor*/
     min-height: 200px;
-    border: 1px solid #ccc;
 }
 #image-view {
     padding:1px;
@@ -783,9 +800,6 @@ p {
     min-height:700px;
     _height:700px;
 }
-#pdf {
-    border:1px solid #cbcbcb;
-}
 #pdf-op-bar {
     padding:10px 0 7px;
     margin-bottom:3px;
@@ -809,7 +823,6 @@ p {
 }
 #md-view {
     padding:40px;
-    border:1px solid #ccc;
     font-size:14px;
     line-height:1.6;
     color:#333;

templates/repo_view_file.html

@@ -35,15 +35,6 @@
     </p>
 
     <div class="file-op fright">
-        <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view" target="_blank">查看原始文件</a>
-        <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download" target="_blank">下载文件</a>
-        {% if not view_history and request.user.is_authenticated %}
-            {% if filetype == 'Text' or filetype == 'Markdown' %}
-        <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path }}">编辑文件</a>
-            {% endif %}
-        {% endif %}
-        <br />
-
         {% if not view_history %}
         <span id="shared-link" class="hide">{{ file_shared_link }}</span>
         <button data="{{ SITE_ROOT }}sharedlink/get/?repo_id={{ repo.id }}&p={{ path|urlencode }}&file_name={{ file_name }}" id="get-shared-link">获取分享地址</button>
@@ -53,8 +44,19 @@
     </div>
     </div>
     
-    <div id="file-view">
+    <div id="file">
-        <p>文件内容读取中...</p>
+        <div id="file-op">
+            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view" id="view-original">查看原始</button>
+            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download" id="download">下载</button>
+            {% if not view_history and request.user.is_authenticated %}
+            {% if filetype == 'Text' or filetype == 'Markdown' %}
+            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/file/edit/?p={{ path }}" id="edit">编辑</button>
+            {% endif %}
+            {% endif %}
+        </div>
+        <div id="file-view">
+            <p>文件内容读取中...</p>
+        </div>
     </div>
 
 {% if not view_history %}
@@ -90,7 +92,13 @@
 {% include "snippets/file_view_js.html" %}
 <script type="text/javascript">
 {% include "snippets/repo_file_get.html" %}
+$('#view-original, #download').click(function() {
+    window.open($(this).attr('data'));
+});
 {% if not view_history %}
+$('#edit').click(function() {
+    location.href = $(this).attr('data');
+});
 function showLink() {
     $('#get-shared-link').addClass('hide');
     $('#shared-link, #send-shared-link, #rm-shared-link').removeClass('hide');

templates/snippets/repo_file_get.html

@@ -18,8 +18,9 @@
     {% endif %}
 
     {% if err %}
-    $('#file-view').html('<p class="error">{{ err }}</p>');
+    $('#file-view').html('<p class="error">{{ err }}</p>').addClass('file-view-tip');
     {% endif %}
+
 {% endif %}
 
 {% if filetype == 'Image' %}
@@ -28,7 +29,7 @@
 
 {% if filetype == 'SVG' %}
     if (!$.browser.mozilla && !$.browser.safari && !($.browser.msie && parseInt($.browser.version) > 8)) {
-        $('#file-view').html('<p>在线查看：请使用firefox, chrome 或 IE 9。</p>');
+        $('#file-view').html('<p>在线查看：请使用firefox, chrome 或 IE 9。</p>').addClass('file-view-tip');
     } else {
         $('#file-view').html('<div><iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe></div>');
     }
@@ -49,7 +50,7 @@
             },
             error: function(xhr, ajaxOptions, thrownError) {
                 var jsonVal = jQuery.parseJSON(xhr.responseText);
-                $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>');
+                $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>').addClass('file-view-tip');
             }
         });            
     }
@@ -62,26 +63,26 @@
                 if (data.length > 0) {
                     var status = data[0]['status'];
                     if (status == 'QUEUED') {
-                        $('#file-view').html('<p class="msg">' + '文档转换任务正在排队，请稍后...' + '</p>');
+                        $('#file-view').html('<p class="msg">' + '文档转换任务正在排队，请稍后...' + '</p>').addClass('file-view-tip');
                         setTimeout(check_status, 1000);
                     } else if (status == 'PROCESSING') {
-                        $('#file-view').html('<p class="msg">' + '文档正在转换，请稍候...' + '</p>');
+                        $('#file-view').html('<p class="msg">' + '文档正在转换，请稍候...' + '</p>').addClass('file-view-tip');
                         setTimeout(check_status, 1000);
                     } else {
-                        $('#file-view').html('<p class="msg">' + '文档转换成功。正在打开...' + '</p>');
+                        $('#file-view').html('<p class="msg">' + '文档转换成功。正在打开...' + '</p>').addClass('file-view-tip');
                         create_session();
                     }
                 }
             },
             error: function(xhr, ajaxOptions, thrownError) {
                 var jsonVal = jQuery.parseJSON(xhr.responseText);
-                $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>');
+                $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>').addClass('file-view-tip');
             }
         });
     }
 
 if (!$.browser.mozilla && !$.browser.safari) {
-    $('#file-view').html('<p>在线查看：请使用firefox 或 chrome。</p>');
+    $('#file-view').html('<p>在线查看：请使用firefox 或 chrome。</p>').addClass('file-view-tip');
 } else {
     $.ajax({
         url: '{{ SITE_ROOT }}crocodoc/upload/?raw_path={{ raw_path|urlencode }}',
@@ -91,24 +92,27 @@ if (!$.browser.mozilla && !$.browser.safari) {
             if (data.length > 0) {
                 uuid = data[0]['uuid'];
                 obj_id = data[0]['obj_id'];
-                $('#file-view').html('<p class="msg">文档内容读取成功，开始转换...</p>');
+                $('#file-view').html('<p class="msg">文档内容读取成功，开始转换...</p>').addClass('file-view-tip');
                 check_status();
             }
         },
         error: function(xhr, ajaxOptions, thrownError) {
             var jsonVal = jQuery.parseJSON(xhr.responseText);
-            $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>');
+            $('#file-view').html('<p class="error">' + jsonVal[0]['error'] + '</p>').addClass('file-view-tip');
         }
     });
 }
 {% endif %}
 
 {% if filetype == 'PDF' %}
+$('#view-original').addClass('hide');
 if (!$.browser.mozilla && !$.browser.safari) {
-    $('#file-view').html('<p>在线查看：请使用firefox 或 chrome。</p>');
+    $('#file-view').html('<p>在线查看：请使用firefox 或 chrome。</p>').addClass('file-view-tip');
 } else {
     PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.js';
     $('#file-view').html('<div id="pdf"><img src="{{ MEDIA_URL }}pdf_full_view/images/loading-icon.gif" alt="加载中..." id="pdf-loading" style="margin-top:20px;" /><div id="pdf-op-bar" class="vh"><button id="prev">上一页</button><button id="next">下一页</button><span id="pdf-page"><label for="page-number">第</label> <input type="number" id="page-number" value="1" min="1"></input> / <span id="page-nums"></span> 页</span><button id="full-screen">全屏</button></div><canvas data="{{ raw_path }}" id="pdf-view" class="vh"></canvas></div>').css({'text-align':'center'});
+    $('#file-op').addClass('hide');
+    $('#pdf-op-bar').append($('#download'));
     var seahub_getPage = function (pdf, page_number) {
         pdf.getPage(page_number).then(function(page) {
             var scale = 1.5;
@@ -166,10 +170,10 @@ if (!$.browser.mozilla && !$.browser.safari) {
     {% endif %}
 
     {% if err %}
-    $('#file-view').html('<p class="error">{{ err }}</p>');
+    $('#file-view').html('<p class="error">{{ err }}</p>').addClass('file-view-tip');
     {% endif %}
 {% endif %}
 
 {% if filetype == 'Unknown' %}
-    $('#file-view').html('<p>该类型文件无法在线查看。<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download">下载</a></p>');
+$('#file-view').html('<p>该类型文件无法在线查看。</p>').addClass('file-view-tip');
 {% endif %}

templates/view_shared_file.html

@@ -3,15 +3,15 @@
 
 {% block main_panel %}
     <h2>{{ file_name }}</h2>
-    <div class="w100 ovhd">
+    <p class="file-share-from">共享者：{{ username }}</p>
-        <p class="file-share-from fleft">共享者：{{ username }}</p>
+    <div id="file">
-        <div class="file-op fright">
+        <div id="file-op">
-            <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view&t={{ shared_token }}" target="_blank">查看原始文件</a>
+            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view&t={{ shared_token }}" id="view-original">查看原始</button>
-            <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download&t={{ shared_token }}" target="_blank">下载文件</a>
+            <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download&t={{ shared_token }}" id="download">下载</button>
+        </div>
+        <div id="file-view">
+            <p>文件内容读取中...</p>
         </div>
-    </div>
-    <div id="file-view">
-      <p>文件内容读取中...</p>
     </div>
 {% endblock %}
 
@@ -19,5 +19,8 @@
 {% include "snippets/file_view_js.html" %}
 <script type="text/javascript">
     {% include "snippets/repo_file_get.html" %}
+$('#view-original, #download').click(function() {
+    window.open($(this).attr('data'));
+});
 </script>
 {% endblock %}