Merge pull request #1487 from haiwen/img-view

[file view] Image: redesigned it

media/css/seahub.css

@@ -108,7 +108,8 @@
 .icon-copy:before                 { content: "\f0c5"; }
 .icon-lightbulb:before            { content: "\f0eb"; }
 .icon-chevron-left:before         { content: "\f053"; }
-.icon-question-sign:before         { content: "\f059"; }
+.icon-chevron-right:before        { content: "\f054"; }
+.icon-question-sign:before        { content: "\f059"; }
 .icon-building:before             { content: "\f0f7"; }
 .icon-phone:before                { content: "\f095"; }
 .icon-magic:before                { content: "\f0d0"; }
@@ -2670,14 +2671,43 @@ button.sf-dropdown-toggle:focus {
     font-family: Consolas,"Liberation Mono",Courier,monospace;/*override .ace_editor*/
     min-height: 200px;
 }
-#img-prev-next {
+#img-prev {
-    font-size:1.1em;
+    position:absolute;
-    margin-bottom:5px;
+    left:15px;
+}
+#img-next {
+    position:absolute;
+    right:15px;
+}
+#img-prev,
+#img-next {
+    top:48%;
+    text-decoration:none;
+    color: #333;
+    width: 50px;
+    height: 50px;
+    background: #fff;
+    border-radius: 100%;
+    line-height: 50px;
 }
 #image-view {
     padding:1px;
     background:#fff;
     border:1px solid #eee;
+    width:auto;
+    height:auto;
+    max-width:100%;
+    max-height:calc(100% - 4px);
+    font-size:0;
+    line-height:0;
+}
+.image-file-view:before {
+    content:' ';
+    display:inline-block;
+    vertical-align:middle;
+    height:100%;
+    font-size:0;
+    line-height:0;
 }
 #docu-view,
 #svg-view,

seahub/templates/snippets/file_content_html.html

@@ -4,7 +4,7 @@
 content of files that can be viewed online shows here.
 For details please refer to 'snippets/file_content_js.html'.
 {% endcomment %}
-<div id="file-view">
+<div id="file-view" {% if filetype == 'Image' %}class="image-file-view"{% endif %}>
     {% include 'snippets/file_encoding.html' %}
     {% if not err %}
         {% if filetype == 'Text' or filetype == 'Markdown' %}
@@ -20,20 +20,7 @@ For details please refer to 'snippets/file_content_js.html'.
         {% endif %}
 
         {% if filetype == 'Image' %}
-            {% if img_prev or img_next %}
+            <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
-            <div id="img-prev-next">
-                {% if img_prev %}
-                <a href="?p={{img_prev|urlencode}}" id="img-prev" title="{% trans 'you can also press ← ' %}">{% trans "prev" %}</a>
-                {% endif %}
-                {% if img_prev and img_next %}
-                <span>/</span>
-                {% endif %}
-                {% if img_next %}
-                <a href="?p={{img_next|urlencode}}" id="img-next" title="{% trans 'you can also press → ' %}">{% trans "next" %}</a>
-                {% endif %}
-            </div>
-            {% endif %}
-            <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" class="vh" />
         {% endif %}
         
         {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} 

seahub/templates/snippets/file_content_js.html

@@ -17,45 +17,11 @@
 {% endif %}
 
 {% if filetype == 'Image' %}
-window.onload = function () {
+function setFileViewAreaHeight() {
-    var img = $('#image-view');
+    var $fileView = $('#file-view');
-    var img_h = img.outerHeight();
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
-    var file_view_h = parseInt($('#file-view').css('min-height'));
-    {% if img_prev or img_next %}
-    var prev_next_h = $('#img-prev-next').outerHeight(true);
-    {% else %}
-    var prev_next_h = 0;
-    {% endif %}
-    if (img_h < file_view_h - prev_next_h) {
-        img.css({'margin-top':(file_view_h - img_h - prev_next_h)/2});
-    }
-    if (img.width() > 946) {
-        img.width(946);
-    }
-    img.removeClass('vh');
 }
-    {% if img_prev or img_next %}
+$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
-    var input_focus = false;
-    $('input, textarea').focus(function() {
-        input_focus = true;
-    }).blur(function() {
-        input_focus = false;
-    });
-    $('body').bind('keydown', function(e) {
-        if (!input_focus) { // so cursor move in form input element can work normally
-            {% if img_prev %}
-            if (e.keyCode == 37) { // press '<-'
-                location.href = $('#img-prev').attr('href');
-            }
-            {% endif %}
-            {% if img_next %}
-            if (e.keyCode == 39) { // press '->'
-                location.href = $('#img-next').attr('href');
-            }
-            {% endif %}
-        }
-    })
-    {% endif %}
 {% endif %}
 
 {% if filetype == 'SVG' %}

seahub/templates/snippets/file_view_style.html

@@ -10,7 +10,8 @@
 
 {% if filetype == 'Image' %}                                            
 <style type="text/css">
-#file-view { text-align:center; padding:30px 0; }
+body { overflow:hidden; }
+#file-view { text-align:center; padding:30px 0; height:10000px; position:relative; }
 </style>
 {% endif %}
 

seahub/templates/view_file_base.html

@@ -87,7 +87,7 @@
             <div id="file-discussions" class="right-side-panel"></div>
         </div>
 
-        <div id="file-view">
+        <div id="file-view" {% if filetype == 'Image' %}class="image-file-view"{% endif %}>
           {% if err %}
             <div id="file-view-tip">
             {% if err != 'invalid extension' %}

seahub/templates/view_file_image.html

@@ -4,26 +4,20 @@
 
 {% block extra_style %}{{block.super}}
 <style type="text/css">
-#file-view { text-align:center; padding:30px 0; }
+body { overflow:hidden; }
+#file-view { text-align:center; padding:30px 0; height:10000px; position:relative; }
 </style>
 {% endblock %}
 
 {% block file_view %}
-{% if img_prev or img_next %}
-<div id="img-prev-next">
   {% if img_prev %}
-    <a href="{% url 'view_lib_file' repo.id img_prev %}" id="img-prev" title="{% trans 'you can also press ← ' %}">{% trans "prev" %}</a>
+  <a href="{% url 'view_lib_file' repo.id img_prev %}" id="img-prev" title="{% trans 'you can also press ← ' %}"><span class="icon-chevron-left"></span></a>
-  {% endif %}
-  {% if img_prev and img_next %}
-    <span>/</span>
   {% endif %}
   {% if img_next %}
-    <a href="{% url 'view_lib_file' repo.id img_next %}" id="img-next" title="{% trans 'you can also press → ' %}">{% trans "next" %}</a>
+    <a href="{% url 'view_lib_file' repo.id img_next %}" id="img-next" title="{% trans 'you can also press → ' %}"><span class="icon-chevron-right"></span></a>
   {% endif %}
-</div>
-{% endif %}
 
-<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" class="vh" />
+<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
 {% endblock %}
 
 {% block extra_script %}{{ block.super }}
@@ -52,22 +46,10 @@ $('body').bind('keydown', function(e) {
 })
 {% endif %}
 
-window.onload = function () {
+function setFileViewAreaHeight() {
-    var img = $('#image-view');
+    var $fileView = $('#file-view');
-    var img_h = img.outerHeight();
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
-    var file_view_h = parseInt($('#file-view').css('min-height'));
-    {% if img_prev or img_next %}
-    var prev_next_h = $('#img-prev-next').outerHeight(true);
-    {% else %}
-    var prev_next_h = 0;
-    {% endif %}
-    if (img_h < file_view_h - prev_next_h) {
-        img.css({'margin-top':(file_view_h - img_h - prev_next_h)/2});
-    }
-    if (img.width() > 946) {
-        img.width(946);
-    }
-    img.removeClass('vh');
 }
+$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
 </script>
 {% endblock %}