haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-10-22 03:16:34 +00:00
Code Issues Releases Wiki Activity

[file view] current/history/shared file view: bugfix & improvement

Browse Source
This commit is contained in:
llj
2018-01-08 16:07:24 +08:00
parent d37144ef75
commit d8a5e73390
10 changed files with 34 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
media/css/file_view_extra.css
View File

@@ -1,5 +1,4 @@
#main {
min-height:0;
padding:0;
}
#view-hd,
@@ -12,6 +11,7 @@
#view-hd,
#shared-file-view-hd {
margin-top:4px;
flex-shrink:0;
}
#file-op .avatar {
vertical-align:middle;
@@ -29,10 +29,6 @@
background:#f4f4f4;
border:1px solid #ededed;
margin-top:12px;
height:10000px;
}
body {
overflow:hidden;
}
@media (max-width:950px) {
#file-view {

38
media/css/seahub.css
View File

@@ -1064,44 +1064,6 @@ textarea:-moz-placeholder {/* for FF */
.checkbox-label {
display:block;
}
/**** right side panel ****/
.right-side-panel {
background: #fff;
width:400px;
position:fixed;
right:-400px;
top:0;
bottom:0;
z-index:21;
overflow:hidden;
border-left:1px solid #c9c9c9;
box-shadow:0 0 4px #ccc;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (max-width:400px) {
.right-side-panel {
width:100%;
}
}
.right-side-panel-hd {
background:#f8f8f8;
padding:10px;
border-bottom:1px solid #c9c9c9;
}
.right-side-panel-title {
text-align:center;
margin:0;
}
.right-side-panel-con {
overflow-y:auto;
}
.right-side-panel-footer {
position:absolute;
bottom:0;
width:100%;
}
/**** details-side-panel ****/
.details-panel {

14
seahub/templates/shared_file_view.html
View File

@@ -19,6 +19,7 @@ body {
</style>
{% endblock %}
{% block main_class %}ovhd d-flex fd-col{% endblock %}
{% block main_content %}
{% if traffic_over_limit %}
<p class="strip-tip">{% trans "File download is disabled: the share link traffic of owner is used up." %}</p>
@@ -90,19 +91,6 @@ $(function () {
$('.js-file-info', $hd).css({'max-width': $hd.width() - $('.js-file-op', $hd).outerWidth(true) - 10});
});
{% if filetype == 'PDF' and use_pdfjs and not err %}
{% elif filetype == 'Image' and not err %}
{% else %}
function setFileViewAreaHeight() {
$('body').css({'overflow':'auto'});
var file_view = $('#file-view').css({'height': 'auto'});
if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
file_view.outerHeight($(window).height() - file_view.offset().top);
}
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
{% endif %}
{% if request.user.is_authenticated and request.user.username != shared_by and permissions.can_download %}
$('#save').click(function() {
var $form = $('#file-save-form');

4
seahub/templates/snippets/file_content_html.html
View File

@@ -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" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
<div id="file-view" class="flex-auto ov-auto {% if filetype == 'Image' and not err %}d-flex{% endif %}">
{% include 'snippets/file_encoding.html' %}
{% if not err %}
{% if filetype == 'Text' or filetype == 'Markdown' %}
@@ -20,6 +20,7 @@ For details please refer to 'snippets/file_content_js.html'.
{% endif %}
{% if filetype == 'Image' %}
<div class="image-file-view flex-1">
{% if from_shared_dir %}
{% if img_prev %}
<a href="?p={{img_prev|urlencode}}" id="img-prev" title="{% trans 'you can also press ← ' %}"><span class="icon-chevron-left"></span></a>
@@ -30,6 +31,7 @@ For details please refer to 'snippets/file_content_js.html'.
{% endif %}
<span class="loading-icon"></span>
<img src="" alt="{{ file_name }}" id="image-view" class="hide" />
</div>
{% endif %}
{% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %}

2
seahub/templates/snippets/file_view_style.html
View File

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

1
seahub/templates/snippets/image_file_view_js.html
View File

@@ -1,6 +1,5 @@
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$fileView.outerHeight($(window).height() - $fileView.offset().top);
var $arrow = $('#img-prev, #img-next');
$arrow.css({'top': ($fileView.outerHeight() - $arrow.height())/2});

16
seahub/templates/snippets/pdfjs_file_viewer.html
View File

@@ -15,14 +15,6 @@ function getOutputScale(ctx) {
};
}
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$fileView.css({
'max-height': $(window).height() - $fileView.offset().top,
'overflow': 'auto'
});
}
try {
PDFJS.workerSrc = '{{MEDIA_URL}}js/pdf.worker.js';
$('#file-view').html('<div id="pdf"><span class="loading-icon loading-tip"></span></div>');
@@ -64,11 +56,6 @@ try {
viewport: viewport
});
// after rendering the first page
if (pageNumber == 1) {
setFileViewAreaHeight();
}
if (pageNumber < shownPageCount) {
pageNumber++;
getPageAndRender(pageNumber);
@@ -86,7 +73,4 @@ try {
} catch(e) {
var tip = "{% trans "You can use IE 10 or other browsers, for example, Firefox, to view it online." %}";
$('#file-view').html('<div id="file-view-tip"><p>' + tip + '</p></div>');
setFileViewAreaHeight();
}
$(window).resize(setFileViewAreaHeight);

83
seahub/templates/view_file_base.html
View File

@@ -8,31 +8,27 @@
{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
<style type="text/css">
#main {
overflow:visible;
}
#view-hd {
width:100%;
padding:0 15px 12px;
border-bottom:1px solid #c9c9c9;
display:flex;
justify-content:space-between;
flex-shrink:0;
}
#file-view {
border:none;
border-right:4px solid transparent;
margin-top:0;
-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;
width:400px;
}
</style>
{% endblock %}
{% block header_css_class %}hide{% endblock %}
{% block main_class %}ovhd d-flex fd-col{% endblock %}
{% block main_content %}
<div id="view-hd">
@@ -93,19 +89,21 @@
<button id="discuss" class="sf-btn-group-btn sf-btn-group-btn-last op-icon sf2-icon-msgs" title="{% trans "Comment" %}"></button>
</div>
<div id="file-discussions" class="right-side-panel"></div>
</div>
<div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
{% if err %}
<div id="file-view-tip">
{% if err != 'invalid extension' %}
<p class="error">{{ err }}</p>
{% endif %}
<div class="d-flex flex-auto ovhd"> {# 'ovhd' is for Firefox #}
<div id="file-view" class="flex-1 ov-auto {% block file_view_extra_class %}{% endblock %}">
{% if err %}
<div id="file-view-tip">
{% if err != 'invalid extension' %}
<p class="error">{{ err }}</p>
{% endif %}
</div>
{% else %}
{% block file_view %}{% endblock %}
{% endif %}
</div>
{% else %}
{% block file_view %}{% endblock %}
{% endif %}
<div id="file-discussions" class="comments-panel" style="display:none;"></div>
</div>
{% include "snippets/file_share_popup.html" %}
@@ -117,17 +115,17 @@
</div>
<script type="text/template" id="discussion-panel-tmpl">
<div class="right-side-panel-hd file-discussions-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fleft"></a>
<h3 class="right-side-panel-title">{% trans "Comments" %}</h3>
<div class="comments-panel-hd file-discussions-hd ovhd">
<a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
<h3 class="comments-panel-title">{% trans "Comments" %}</h3>
</div>
<div class="right-side-panel-con file-discussions-con">
<div class="comments-panel-con file-discussions-con">
<div class="loading-icon loading-tip"></div>
<ul class="file-discussion-list hide"></ul>
<p class="no-discussion-tip hide">{% trans "No comment yet." %}</p>
<p class="error hide"></p>
</div>
<div class="right-side-panel-footer file-discussions-footer">
<div class="comments-panel-footer file-discussions-footer">
<form action="" method="post" class="msg-form">
<img src="{% avatar_url request.user 64 %}" alt="" width="32" class="avatar-circle fleft" />
<div class="msg-body">
@@ -274,20 +272,6 @@ function setToolbarPos() {
})();
$(window).load(setToolbarPos).resize(setToolbarPos);
{% if filetype == 'PDF' and use_pdfjs and not err %}
{% elif filetype == 'Image' and not err %}
{% else %}
function setFileViewAreaHeight() {
var $fileView = $('#file-view');
$('#file-view').css({
'max-height': $(window).height() - $fileView.offset().top,
'overflow': 'auto'
});
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
{% endif %}
{% if highlight_keyword %}
var ref_list = document.referrer.split('?');
// referrer is 'search result' page, i.e, '{{SITE_ROOT}}search/?q=xx..'
@@ -334,7 +318,6 @@ var fileDiscussions = {
init: function() {
var _this = this;
this.setPosition();
this.setLocale();
// events
@@ -366,10 +349,6 @@ var fileDiscussions = {
},
setPosition: function() {
this.$el.css({'top': $('#file-view').offset().top});
},
setLocale: function() {
var lang_code = '{{LANGUAGE_CODE}}';
var m_lang_code;
@@ -398,27 +377,23 @@ var fileDiscussions = {
show: function() {
this.render();
this.$el.css({'right': 0});
$('#file-view').css({'margin-right': 400});
this.$el.show();
// 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();
this.$el.empty().hide();
},
getContent: function() {
@@ -526,15 +501,6 @@ var fileDiscussions = {
this.$listContainer.append($item);
},
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)
});
},
scrollConToBottom: function() {
var $el = $('.file-discussions-con', this.$el);
$el.scrollTop($el[0].scrollHeight - $el[0].clientHeight);
@@ -587,7 +553,7 @@ var fileDiscussions = {
fileDiscussions.init();
$('#discuss').click(function() {
if (parseInt(fileDiscussions.$el.css('right')) == 0) {
if (fileDiscussions.$el.is(':visible')) {
fileDiscussions.hide();
} else {
fileDiscussions.show();
@@ -599,9 +565,6 @@ $(document).keydown(function(e) {
fileDiscussions.hide();
}
});
$(window).resize(function() {
fileDiscussions.setConHeight();
});
// for 'go back'
var $history = $('#history');

5
seahub/templates/view_file_image.html
View File

@@ -4,10 +4,12 @@
{% block extra_style %}{{block.super}}
<style type="text/css">
#file-view { text-align:center; padding:30px 0; height:10000px; position:relative; }
#file-view { text-align:center; padding:30px 0; position:relative; }
</style>
{% endblock %}
{% block file_view_extra_class %}image-file-view{% endblock %}
{% block file_view %}
{% if img_prev %}
<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>
@@ -21,7 +23,6 @@
{% endblock %}
{% block extra_script %}{{ block.super }}
<script type="text/javascript">
{% if enable_thumbnail and not repo.encrypted and fileext != 'gif' %}
var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'

13
seahub/templates/view_history_file.html
View File

@@ -9,6 +9,7 @@
{% endblock %}
{% block header_css_class %}hide{% endblock %}
{% block main_class %}ovhd d-flex fd-col{% endblock %}
{% block main_content %}
<div id="view-hd" class="ovhd">
@@ -33,18 +34,8 @@ $(function() {
$('#file-view-tip').append('<a href="' + dld_url + '" class="sf-btn-link big-btn-link">' + "{% trans "Download" %}" + '</a>');
});
{% if filetype == 'PDF' and use_pdfjs and not err %}
{% elif filetype == 'Image' and not err %}
{% if filetype == 'Image' and not err %}
$('#image-view').attr('src', '{{ raw_path|escapejs }}');
{% else %}
function setFileViewAreaHeight() {
$('body').css({'overflow':'auto'});
var file_view = $('#file-view').css({'height': 'auto'});
if ($(window).height() > file_view.outerHeight(true) + file_view.offset().top) {
file_view.outerHeight($(window).height() - file_view.offset().top);
}
}
$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
{% endif %}
{% include "snippets/file_content_js.html" %}