1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 15:38:15 +00:00

modified file-view ui

This commit is contained in:
llj
2012-08-10 21:35:58 +08:00
parent 085a73a323
commit cd016ffdf6
4 changed files with 68 additions and 40 deletions

View File

@@ -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;

View File

@@ -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">
<p>文件内容读取中...</p>
<div id="file">
<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');

View File

@@ -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 %}

View File

@@ -3,15 +3,15 @@
{% block main_panel %}
<h2>{{ file_name }}</h2>
<div class="w100 ovhd">
<p class="file-share-from fleft">共享者:{{ username }}</p>
<div class="file-op fright">
<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view&t={{ shared_token }}" target="_blank">查看原始文件</a>
<a href="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download&t={{ shared_token }}" target="_blank">下载文件</a>
<p class="file-share-from">共享者:{{ username }}</p>
<div id="file">
<div id="file-op">
<button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view&t={{ shared_token }}" id="view-original">查看原始</button>
<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 %}