haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-19 01:44:13 +00:00
Code Issues Releases Wiki Activity

[view_shared_dir] added 'grid view'

Browse Source
This commit is contained in:
llj
2015-10-29 17:17:40 +08:00
parent 3fa2ab6a38
commit 40ddb4ea4b
6 changed files with 154 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
media/css/seahub.css
View File

@@ -3718,3 +3718,69 @@ img.thumbnail {
.web-setting-form .submit {
margin-right:5px;
}
/* view shared dir */
.mode-link {
display:inline-block;
padding:4px 6px;
background:#fff;
border:1px solid #ccc;
font-size:0;
line-height:0;
}
.list-mode-link {
border-right:0;
}
.cur-mode-link {
background:#eee;
}
.shared-dir-zip {
margin-left:5px;
}
.grid {
display:inline-block;
width:100px;
padding:10px 24px;
position:relative;
}
.grid .img-link,
.grid .text-link {
display:block;
text-align:center;
}
.grid .img-link {
height:100px;
font-size:0;
line-height:0;
border-radius:3px;
margin-bottom:6px;
}
.grid .img-link:before {
content:' ';
display:inline-block;
vertical-align:middle;
height:100%;
}
.grid .thumbnail {
max-width:96px;
max-height:96px;
padding:1px;
border:1px solid #ddd;
border-radius:3px;
}
.grid .text-link {
color:#333;
font-size:14px;
line-height:17px;
height:34px;
white-space:normal;
}
.grid .op-icon {
position:absolute;
top:10px;
right:24px;
padding:2px 6px;
background:#fff;
border:1px solid #eee;
border-radius:3px;
margin:0;
}

BIN
media/img/grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 B

BIN
media/img/list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 B

2
seahub/settings.py
View File

@@ -470,6 +470,8 @@ THUMBNAIL_EXTENSION = 'png'
# for thumbnail: height(px) and width(px)
THUMBNAIL_DEFAULT_SIZE = 48
THUMBNAIL_SIZE_FOR_GRID = 192
# size(MB) limit for generate thumbnail
THUMBNAIL_IMAGE_COMPRESSED_SIZE_LIMIT = 1

80
seahub/templates/view_shared_dir.html
View File

@@ -16,16 +16,25 @@
{% trans "Current path: "%}
{% for name, link in zipped %}
{% if not forloop.last %}
<a href="{% url "view_shared_dir" token %}?p={{ link|urlencode }}">{{ name }}</a> /
<a href="{% url "view_shared_dir" token %}?p={{ link|urlencode }}&mode={{mode}}">{{ name }}</a> /
{% else %}
{{ name }}
{% endif %}
{% endfor %}
</p>
{% if not traffic_over_limit %}
<a href="?p={{ path|urlencode }}&dl=1" class="obv-btn fright">{% trans "ZIP"%}</a>
{% endif %}
<div class="fright">
<a href="?p={{ path|urlencode }}&mode=list" title="{% trans "List" %}" class="mode-link vam{% if mode == 'list' %} cur-mode-link{% endif %} list-mode-link">
<img src="{{ MEDIA_URL }}img/list.png" alt="" width="20" />
</a><a href="?p={{ path|urlencode }}&mode=grid" title="{% trans "Grid" %}" class="mode-link vam{% if mode == 'grid' %} cur-mode-link{% endif %}">
<img src="{{ MEDIA_URL }}img/grid.png" alt="" width="20" />
</a>
{% if not traffic_over_limit %}
<a href="?p={{ path|urlencode }}&dl=1" class="obv-btn vam shared-dir-zip">{% trans "ZIP"%}</a>
{% endif %}
</div>
</div>
{% if mode == 'list' %}
<table class="repo-file-list" style="table-layout:fixed;">
<tr>
<th width="5%"></th>
@@ -38,9 +47,8 @@
<tr>
<td class="alc"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" /></td>
<td>
<a href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
<a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}">{{ dirent.obj_name }}</a>
</td>
<td></td>
<td>
{% if not traffic_over_limit %}
@@ -83,6 +91,51 @@
</tr>
{% endfor %}
</table>
{% else %}
<ul class="repo-file-list">
{% for dirent in dir_list %}
<li class="grid" title="{{ dirent.obj_name }}">
<a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="img-link">
<img src="{{ MEDIA_URL }}img/folder-beige-128.png" alt="" width="96" class="vam" />
</a>
<a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="text-link ellipsis">{{ dirent.obj_name }}</a>
{% if not traffic_over_limit %}
<a class="op-icon vh" href="{% url "view_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans 'Download' %}">
<img src="{{MEDIA_URL}}img/download.png" alt="" />
</a>
{% endif %}
</li>
{% endfor %}
{% for dirent in file_list %}
<li class="file-item grid" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}">
<a class="img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
{% if dirent.allow_generate_thumbnail %}
{% if dirent.encoded_thumbnail_src %}
<img class="thumbnail vam" src="{{ SITE_ROOT }}{{ dirent.encoded_thumbnail_src }}" alt="" />
{% else %}
<img class="not-thumbnail vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:128 }}" alt="" width="96" />
{% endif %}
{% else %}
<img class="vam" src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter:128 }}" alt="" width="96" />
{% endif %}
</a>
{% if dirent.is_img %}
<a class="normal img-name-link text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_raw_shared_file" token dirent.obj_id dirent.obj_name %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
{% else %}
<a class="normal text-link ellipsis" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">{{ dirent.obj_name }}</a>
{% endif %}
{% if not traffic_over_limit %}
<a class="op-icon vh" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&dl=1" title="{% trans "Download"%}">
<img src="{{MEDIA_URL}}img/download.png" alt="" />
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{% block extra_script %}
@@ -129,7 +182,7 @@ $(function() {
var img_icon = $(img_icons[i]),
file_name = img_icon.closest('.file-item').attr('data-name');
$.ajax({
url: '{% url "share_link_thumbnail_create" token %}?path=' + e(cur_path + file_name),
url: '{% url "share_link_thumbnail_create" token %}?path=' + e(cur_path + file_name) + '&size={{thumbnail_size}}',
cache: false,
dataType: 'json',
success: function(data) {
@@ -150,5 +203,18 @@ $(function() {
get_thumbnail(0);
});
{% endif %}
$('.grid').hover(
function () {
$('.img-link', $(this)).css({'background': '#f8f8f8'});
$('.text-link', $(this)).css({'color': '#f93'});
$('.op-icon', $(this)).removeClass('vh');
},
function () {
$('.img-link', $(this)).css({'background': '#fff'});
$('.text-link', $(this)).css({'color': '#333'});
$('.op-icon', $(this)).addClass('vh');
}
);
</script>
{% endblock %}

16
seahub/views/repo.py
View File

@@ -35,7 +35,8 @@ from seahub.utils import gen_file_upload_url, is_org_context, \
get_commit_before_new_merge, user_traffic_over_limit, render_error, \
get_file_type_and_ext
from seahub.settings import ENABLE_SUB_LIBRARY, FORCE_SERVER_CRYPTO, \
ENABLE_UPLOAD_FOLDER, ENABLE_RESUMABLE_FILEUPLOAD, ENABLE_THUMBNAIL, THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE
ENABLE_UPLOAD_FOLDER, ENABLE_RESUMABLE_FILEUPLOAD, ENABLE_THUMBNAIL, \
THUMBNAIL_ROOT, THUMBNAIL_DEFAULT_SIZE, THUMBNAIL_SIZE_FOR_GRID
from seahub.utils import gen_file_get_url
from seahub.utils.file_types import IMAGE
from seahub.thumbnail.utils import get_thumbnail_src, \
@@ -480,6 +481,13 @@ def view_shared_dir(request, token):
traffic_over_limit = user_traffic_over_limit(fileshare.username)
# mode to view dir/file items
mode = request.GET.get('mode', 'list')
if mode != 'list':
mode = 'grid'
thumbnail_size = THUMBNAIL_DEFAULT_SIZE if mode == 'list' else THUMBNAIL_SIZE_FOR_GRID
for f in file_list:
file_type, file_ext = get_file_type_and_ext(f.obj_name)
@@ -489,9 +497,9 @@ def view_shared_dir(request, token):
real_image_path = posixpath.join(real_path, f.obj_name)
if allow_generate_thumbnail(request, repo_id, real_image_path):
f.allow_generate_thumbnail = True
if os.path.exists(os.path.join(THUMBNAIL_ROOT, str(THUMBNAIL_DEFAULT_SIZE), f.obj_id)):
if os.path.exists(os.path.join(THUMBNAIL_ROOT, str(thumbnail_size), f.obj_id)):
req_image_path = posixpath.join(req_path, f.obj_name)
src = get_share_link_thumbnail_src(token, THUMBNAIL_DEFAULT_SIZE, req_image_path)
src = get_share_link_thumbnail_src(token, thumbnail_size, req_image_path)
f.encoded_thumbnail_src = urlquote(src)
return render_to_response('view_shared_dir.html', {
@@ -505,6 +513,8 @@ def view_shared_dir(request, token):
'zipped': zipped,
'traffic_over_limit': traffic_over_limit,
'ENABLE_THUMBNAIL': ENABLE_THUMBNAIL,
'mode': mode,
'thumbnail_size': thumbnail_size,
}, context_instance=RequestContext(request))
def view_shared_upload_link(request, token):