[file view] redesigned UI

media/css/seahub.css

@@ -2823,7 +2823,7 @@ button.sf-dropdown-toggle:focus {
     border:1px solid #eee;
     width:auto;
     height:auto;
-    max-width:100%;
+    max-width:calc(100% - 4px);
     max-height:calc(100% - 4px);
     font-size:0;
     line-height:0;
@@ -2888,7 +2888,7 @@ button.sf-dropdown-toggle:focus {
 }
 .pdf-page {
     display:block;
-    max-width:950px;
+    max-width:100%;
     margin:0 auto 20px;
 }
 #doc-view {

seahub/templates/snippets/pdfjs_file_viewer.html

@@ -16,11 +16,11 @@ function getOutputScale(ctx) {
 }
 
 function setFileViewAreaHeight() {
-    $('body').css({'overflow':'auto'});
+    var $fileView = $('#file-view');
-    var file_view = $('#file-view').css({'height': 'auto'});
+    $fileView.css({
-    if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
+        'max-height': $(window).height() - $fileView.offset().top,
-        file_view.outerHeight($(window).height() - file_view.offset().top);
+        'overflow': 'auto'
-    }
+    });
 }
 
 try {

seahub/templates/view_file_base.html

@@ -7,6 +7,22 @@
 
 {% block extra_style %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
+<style type="text/css">
+#view-hd {
+    width:100%;
+    padding:0 15px;
+}
+#file-view {
+    border-right:4px solid transparent;
+    -webkit-transition: margin-right 0.3s ease;
+    -moz-transition: margin-right 0.3s ease;
+    transition: margin-right 0.3s ease;
+}
+#file-discussions {
+    box-shadow:none;
+    border-top:1px solid #ededed;
+}
+</style>
 {% endblock %}
 
 {% block header_css_class %}hide{% endblock %}
@@ -256,11 +272,11 @@ $(window).load(setToolbarPos).resize(setToolbarPos);
 {% elif filetype == 'Image' and not err %}
 {% else %}
 function setFileViewAreaHeight() {
-    $('body').css({'overflow':'auto'});
+    var $fileView = $('#file-view');
-    var file_view = $('#file-view').css({'height': 'auto'});
+    $('#file-view').css({
-    if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
+        'max-height': $(window).height() - $fileView.offset().top,
-        file_view.outerHeight($(window).height() - file_view.offset().top);
+        'overflow': 'auto'
-    }
+    });
 }
 $(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
 {% endif %}
@@ -312,6 +328,7 @@ var fileDiscussions = {
     init: function() {
         var _this = this;
 
+        this.setPosition();
         this.setLocale();
 
         // events
@@ -343,6 +360,10 @@ var fileDiscussions = {
 
     },
 
+    setPosition: function() {
+        this.$el.css({'top': $('#file-view').offset().top});
+    },
+
     setLocale: function() {
         var lang_code = '{{LANGUAGE_CODE}}';
         var m_lang_code;
@@ -372,11 +393,24 @@ var fileDiscussions = {
     show: function() {
         this.render();
         this.$el.css({'right': 0});
+        $('#file-view').css({'margin-right': 400});
+
+        // pdf file view with pdf.js; text file view; #file-view-tip
+        $('#pdf, .CodeMirror, #file-view-tip').css({'width':'auto', 'margin':'0 10px'});
+        // encoding selector
+        $('#file-enc-cont').css({'width': 'auto', 'margin-right':'10px'});
+
         this.setConHeight();
         this.getContent();
     },
 
     hide: function() {
+        $('#file-view').css({'margin-right': 0});
+
+        // pdf file view with pdf.js; text file view; #file-view-tip
+        // encoding selector
+        $('#pdf, .CodeMirror, #file-enc-cont, #file-view-tip').removeAttr('style');
+
         this.$el.css({'right': '-400px'});
         this.$el.empty();
     },
@@ -489,6 +523,7 @@ var fileDiscussions = {
     setConHeight: function() {
         $('.file-discussions-con', this.$el).css({
             'max-height': $(window).height()
+                - this.$el.offset().top
                 - $('.file-discussions-hd', this.$el).outerHeight(true)
                 - $('.file-discussions-footer', this.$el).outerHeight(true)
         });