Merge pull request #709 from haiwen/file_view

[file view] modified shared/history file view ui, cleaned up CSS

media/css/file_view_extra.css

@@ -1,14 +1,22 @@
+#header,
+#footer {
+    display:none;
+}
 #main {
     width:100%;
     min-height:0;
 }
 #view-hd,
+#shared-file-view-hd,
 #view-path-op,
 #file-op,
 #sf-commit-op {
     width:950px;
     margin:0 auto;
 }
+#view-hd {
+    margin-top:4px;
+}
 #file-op {
     padding:0;
     border:0;
@@ -29,21 +37,12 @@
 #file-op .contributors {
     margin-left:8px;
 }
-#file {
-    padding:0;
-    background:#fff;
-}
 #file-view {
     padding:30px 0 15px;
     background:#f4f4f4;
     border:1px solid #ededed;
     margin-top:12px;
 }
-.CodeMirror {
-    color:#000;
-    width:950px;
-    background:#fff;
-}
 #sf,
 #md-view,
 .CodeMirror,
@@ -59,3 +58,26 @@
 #md-view img {
     max-width: 100%;
 }
+.CodeMirror {
+    color:#000;
+    width:950px;
+    background:#fff;
+    margin-bottom:40px;
+}
+#file-view .CodeMirror-scroll {
+    min-height:400px;
+}
+#file-star {
+    vertical-align:middle;
+    margin-left:3px;
+    color:#a4a4a4;
+}
+.file-path {
+    margin: 0 0 9px;
+}
+#file-op .avatar {
+    border-radius:1000px;
+}
+.history-file-path {
+    margin:.5em 0 0;
+}

media/css/seahub.css

@@ -2666,7 +2666,6 @@ textarea:-moz-placeholder {/* for FF */
     margin-right:3px;
     color:#666;
 }
-#file,
 #text-diff-output {
     padding:3px;
     background:#dedede;
@@ -3653,3 +3652,17 @@ textarea:-moz-placeholder {/* for FF */
 #user-profile .info-detail {
     padding-left: 6px;
 }
+/* shared file view */
+#shared-file-view-logo {
+    display:block;
+    margin:2em auto 0;
+}
+#shared-file-view-hd .cur-path,
+#shared-file-view-hd .share-by {
+    margin:0;
+}
+#shared-file-view-hd .btn,
+#shared-file-view-hd .obv-btn {
+    padding:7px;
+    margin-top:11px;
+}

seahub/templates/file_revisions.html

@@ -55,7 +55,7 @@
                     <a href="{{ SITE_ROOT }}repo/revert_file/{{ repo.id }}/?commit={{ commit.id }}&p={{commit.path|urlencode}}&from=file_revisions" class="op vh">{% trans 'Restore' %}</a>
                     {% endif %}
                     <a href="{{ SITE_ROOT }}repo/file_revisions/{{ repo.id }}/?commit={{ commit.id }}&p={{commit.path|urlencode}}&op=download" class="op vh">{% trans 'Download' %}</a>
-                    <a href="{% url 'view_history_file' repo.id %}?obj_id={{ commit.rev_file_id }}&commit_id={{ commit.id }}&p={{commit.path|urlencode}}" class="op vh">{% trans 'View' %}</a>
+                    <a href="{% url 'view_history_file' repo.id %}?obj_id={{ commit.rev_file_id }}&commit_id={{ commit.id }}&p={{commit.path|urlencode}}" class="op vh" target="_blank">{% trans 'View' %}</a>
                     {% if can_compare and not forloop.last %}
                     <a href="{% url 'text_diff' repo.id %}?p={{commit.path|urlencode}}&commit={{commit.id}}" class="op vh">{% trans 'Diff' %}</a>
                     {% endif %}

seahub/templates/repo_history_view.html

@@ -66,7 +66,7 @@
                 {% for dirent in file_list %}
                 <tr>
                     <td class="alc"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
-                    <td><a class="normal" href="{% url 'view_snapshot_file' repo.props.id %}?obj_id={{ dirent.props.obj_id }}&commit_id={{ current_commit.id }}&p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.props.obj_name }}</a></td>              
+                    <td><a class="normal" href="{% url 'view_snapshot_file' repo.props.id %}?obj_id={{ dirent.props.obj_id }}&commit_id={{ current_commit.id }}&p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" target="_blank">{{ dirent.props.obj_name }}</a></td>              
                     <td>{{ dirent.file_size|filesizeformat }}</td>
                     <td>
                         <a class="op vh" href="{% url 'repo_revert_file' repo.id %}?commit={{ current_commit.id }}&p={{ path|urlencode }}{{dirent.obj_name|urlencode}}&from=repo_history">{% trans "Restore" %}</a>

seahub/templates/repo_recycle_view.html

@@ -79,12 +79,12 @@
                 <tr>
                     <td class="alc"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File" %}" /></td>
                     {% if show_recycle_root %}
-                    <td><a class="normal" href="{% url 'view_trash_file' repo.id %}?obj_id={{ dirent.obj_id }}&commit_id={{ dirent.commit_id }}&base={{ dirent.basedir|urlencode }}&p=/{{ dirent.obj_name|urlencode }}&days={{days}}">{{ dirent.obj_name }}</a></td>
+                    <td><a class="normal" href="{% url 'view_trash_file' repo.id %}?obj_id={{ dirent.obj_id }}&commit_id={{ dirent.commit_id }}&base={{ dirent.basedir|urlencode }}&p=/{{ dirent.obj_name|urlencode }}&days={{days}}" target="_blank">{{ dirent.obj_name }}</a></td>
                     <td>{{ dirent.delete_time|translate_seahub_time }}</td>
                     <td>{{ dirent.file_size|filesizeformat }}</td>
                     <td><a class="op vh" href="{% url 'repo_revert_file' repo.id %}?commit={{ dirent.commit_id }}&p={{ dirent.basedir|urlencode }}{{dirent.obj_name|urlencode}}&from=recycle">{% trans "Restore" %}</a></td>
                     {% else %}
-                    <td><a class="normal" href="{% url 'view_trash_file' repo.id %}?obj_id={{ dirent.obj_id }}&commit_id={{ commit_id }}&base={{ basedir|urlencode }}&p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&days={{days}}">{{ dirent.props.obj_name }}</a></td>
+                    <td><a class="normal" href="{% url 'view_trash_file' repo.id %}?obj_id={{ dirent.obj_id }}&commit_id={{ commit_id }}&base={{ basedir|urlencode }}&p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&days={{days}}" target="_blank">{{ dirent.props.obj_name }}</a></td>
                     <td></td>
                     <td>{{ dirent.file_size|filesizeformat }}</td>
                     <td></td>

seahub/templates/shared_file_view.html

@@ -3,17 +3,15 @@
 
 {% block extra_style %}
 {% include 'snippets/file_view_style.html' %}
-<style type="text/css">
-.CodeMirror { margin-bottom:0; }
-</style>
 {% endblock %}
 
 {% block main_panel %}
-    <h2 id="view-hd">{{ file_name }}</h2>
-    <div id="file">
-        <div id="file-op">
+    <img src="{{ MEDIA_URL }}{{ logo_path }}" title="Seafile" alt="logo" width="{{logo_width}}" height="{{logo_height}}" id="shared-file-view-logo" />
+    <div id="shared-file-view-hd" class="ovhd">
+        <div class="fleft">
+            <h2 class="ellipsis no-bold" title="{{ file_name }}">{{ file_name }}</h2>
             {% if zipped %}
-            <p class="cur-path fleft ellipsis">
+            <p class="cur-path ellipsis">
               {% trans "Current path: "%} 
               {% for name, link in zipped %}
                 {% if not forloop.last %}
@@ -24,18 +22,23 @@
               {% endfor %}
               </p>
             {% else %}
-            <p class="fleft">{% trans "Shared by: " %}{{ shared_by|email2nickname }}</p>
+            <p class="share-by ellipsis">{% trans "Shared by: " %}{{ shared_by|email2nickname }}</p>
             {% endif %}
+        </div>
 
+        <div class="fright">
             {% if request.user.is_authenticated and request.user.username != shared_by %}
               {% if save_to_link %}
-              <button data="{{save_to_link}}" id="save">{% trans "Save to..."%}</button>
+              <button data="{{save_to_link}}" id="save" class="btn">{% trans "Save to..."%}</button>
               {% endif %}
             {% endif %}
             {% if not traffic_over_limit %}
               <a href="{% if from_shared_dir %}?p={{path}}&dl=1{% else %}?dl=1{% endif %}" class="obv-btn">{% trans "Download" %} ({{file_size|filesizeformat}})</a>
             {% endif %}
         </div>
+    </div>
+
+    <div id="file">
         {% include 'snippets/file_content_html.html' %}
     </div>
 
@@ -71,7 +74,7 @@ $(function() {
     {% endif %}
 });
 $(function () {
-    $('.cur-path').css({'max-width': $('#file-op').width() - $('#save').outerWidth(true) - $('.obv-btn').outerWidth(true) - 10});
+    $('#view-hd .ellipsis').css({'max-width': $('#view-hd').width() - $('#view-hd .fright').outerWidth(true) - 10});
 });
 
 {% if filetype == 'PDF' and use_pdfjs %}

seahub/templates/snippets/file_view_style.html

@@ -1,13 +1,7 @@
-{% comment %}used by repo_view_file.html, history_file_view.html, view_shared_file.html{% endcomment %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
-<style type="text/css">                                                
-#footer { display:none; }                                              
-</style>
 {% if filetype == 'Text' %}                                            
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
 <style type="text/css">
-.CodeMirror-scroll { min-height:400px; }                               
-.CodeMirror { margin-bottom:40px; }                                    
     {% if fileext == 'txt' or fileext == 'text' %}
 .CodeMirror { width:624px; padding:40px 96px; }
     {% endif %}

seahub/templates/view_file_base.html

@@ -6,30 +6,17 @@
 
 {% block extra_style %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
-<style type="text/css">                                                
-#header, #footer { display:none; }
-#view-hd { margin-top: 4px; }
-#star {
-    vertical-align:middle;
-    margin-left:3px;
-    color:#a4a4a4;
-}
-.path { margin: 0 0 -3px;}
-#file-op .avatar {
-    border-radius:1000px;
-}
-</style>
 {% endblock %}
 
 {% block main_panel %}
     <div id="view-hd">
         <h2>{{ filename }}
-            <span id="star" class="{% if is_starred %}icon-star{% else %}icon-star-empty{% endif %} cspt"></span>
+            <span id="file-star" class="{% if is_starred %}icon-star{% else %}icon-star-empty{% endif %} cspt"></span>
         </h2>
     </div>
 
     <div id="view-path-op">
-        <p class="path">
+        <p class="file-path">
         {% trans "Current Path: "%}
         {% for name, link in zipped %}
             {% if not forloop.last %}
@@ -130,7 +117,7 @@ $('#edit').click(function() {
 });
 
 // star file
-$('#star').click(function() {
+$('#file-star').click(function() {
     var op_icon = $(this), url_base;
 
     if (op_icon.hasClass('icon-star-empty')) {
@@ -140,7 +127,7 @@ $('#star').click(function() {
     }
     
     $.ajax({
-        url: url_base + '?file=' + e("{{path}}"),
+        url: url_base + '?file=' + e("{{path|escapejs}}"),
         cache: false,
         dataType: 'json',
         success:function(data) {

seahub/templates/view_file_text.html

@@ -5,8 +5,6 @@
 {% block extra_style %}{{block.super}}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
 <style type="text/css">
-.CodeMirror-scroll { min-height:400px; }                               
-.CodeMirror { margin-bottom:40px; }                                    
     {% if fileext == 'txt' or fileext == 'text' %}
 .CodeMirror { width:624px; padding:40px 96px; }
     {% endif %}

seahub/templates/view_history_file.html

@@ -4,29 +4,25 @@
 
 {% block extra_style %}
 {% include 'snippets/file_view_style.html' %}
-<style type="text/css">
-.path { margin-top:.5em; }
-</style>
 {% endblock %}
 
 {% block main_panel %}
-    <div id="view-hd" class="w100 ovhd">
+    <div id="view-hd">
       {% block view_hd %}
-        <h2 class="fleft">
-          {{repo.props.name}} {% trans "history"%}
+        <h2>
+          {{file_name}}
           <span class="commit-time">({{ current_commit.props.ctime|tsstr_sec }})</span>
         </h2>
-        <button class="fright" data="{% url 'file_revisions' repo.id %}?p={{ path|urlencode }}" id="back">{% trans "Back to file versions"%}</button>
       {% endblock %}
     </div>
 
     <div id="file">
         <div id="file-op">
-            <p class="path fleft">
+            <p class="history-file-path fleft">
               {% block file_path %}
                 {% trans "Current Path: "%}
                 {% for name, link in zipped %}
-                  {% if not forloop.last %} {{ name }} / {% else %} {{ name }} {% endif %}
+                    {% if not forloop.last %} {{ name }} / {% else %} {{ name }} {% endif %}
                 {% endfor %}
               {% endblock %}
             </p>
@@ -60,9 +56,5 @@ $(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
 {% endif %}
 
 {% include "snippets/file_content_js.html" %}
-
-$('#back').click(function() {
-        location.href = $(this).attr('data');
-});
 </script>
 {% endblock %}

seahub/templates/view_snapshot_file.html

@@ -3,10 +3,10 @@
 {% load url from future %}
 
 {% block view_hd %}
-  <h2>
-    {{repo.props.name}} {% trans "snapshots" %}
+<h2>
+    {{file_name}}
     <span class="commit-time">({{ current_commit.props.ctime|tsstr_sec }})</span>
-  </h2>
+</h2>
 {% endblock %}
 
 {% block file_path %}

seahub/templates/view_trash_file.html

@@ -3,8 +3,7 @@
 {% load url from future %}
 
 {% block view_hd %}
-  <h2 class="fleft">{{repo.props.name}} {% trans "'s trash" %}</h2>
-  <button class="fright" data="{% url 'repo' repo.id %}" id="back">{% trans "Back to Library"%}</button>
+    <h2>{{file_name}}</h2>
 {% endblock %}
 
 {% block file_path %}