haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-17 07:41:26 +00:00
Code Issues Releases Wiki Activity

[mobile] dir view: redesigned it

Browse Source
This commit is contained in:
llj
2016-12-07 17:11:06 +08:00
parent 943804c00e
commit 2d7f5339c3
4 changed files with 179 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
media/css/seahub.css
View File

@@ -468,6 +468,13 @@ table img { vertical-align:middle; }
margin-bottom:5px;
}
.textarea { height:70px; }
.repo-meta-info,
.dirent-meta-info {
display:inline-block;
margin-right:8px;
color:#666;
font-size:12px;
}
/* loading implemented with css */
@-moz-keyframes loading {
0% {
@@ -1997,12 +2004,6 @@ button.sf-dropdown-toggle:focus {
#repo-create-form .checkbox-label { /* for "Encrypt" */
margin:10px 0 0;
}
.repo-meta-info {
display:inline-block;
margin-right:8px;
color:#666;
font-size:12px;
}
.activity-group-hd {
padding: 8px;
color: #444;
@@ -2236,6 +2237,12 @@ button.sf-dropdown-toggle:focus {
width:500px;
padding:10px 20px;
}
@media (max-width:579px) {
.file-choose-form {
padding:0;
width:280px;
}
}
.file-tree-cont, .dir-tree-cont {
padding:5px;
height:280px;
@@ -2254,6 +2261,9 @@ button.sf-dropdown-toggle:focus {
.inline-rename-form .input {
width:225px;
}
#dir-view .inline-rename-form .input {
width:212px;
}
}
@media (min-width:375px) and (max-width:400px) {
.inline-rename-form {
@@ -2499,6 +2509,11 @@ button.sf-dropdown-toggle:focus {
#mv-form .op-target {
max-width:410px;
}
@media (max-width:579px) {
#mv-form .op-target {
max-width:280px;
}
}
#folder-perm-popup .op-target {
max-width:540px;
}

149
seahub/templates/js/templates.html
View File

@@ -298,6 +298,22 @@
<th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
</tr>
</script>
<script type="text/template" id="dirents-hd-mobile-tmpl">
<tr>
<th width="3%" class="select">
<input type="checkbox" class="vam" />
</th>
<th width="3%" class="star"></th>
<th width="5%" class="dirent-icon"></th>
<th width="84%">
{% trans "Sort:"%}
<a class="table-sort-op mobile-table-sort-op by-name" href="#"><span class="dirent-name">{% trans "name"%} <span class="sort-icon icon-caret-up"></span></span></a>
<a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a>
</th>
<th width="5%" class="dirent-op"><span class="sr-only">{% trans "Actions" %}</span></th>
</tr>
</script>
<script type="text/template" id="dirent-dir-tmpl">
<td class="select">
@@ -355,6 +371,51 @@
<% } %>
</td>
</script>
<script type="text/template" id="dirent-dir-mobile-tmpl">
<td class="select">
<% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" />
<% } else { %>
<input type="checkbox" class="vam" />
<% } %>
</td>
<td class="star"></td>
<td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
<td>
<span class="dirent-name">
<a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a>
<br />
<% if (dirent.last_modified) { %>
<span class="dirent-meta-info"><%= dirent.last_update %></span>
<% } %>
</span>
</td>
<td class="dirent-op">
<div class="op-container">
<div class="sf-dropdown sf-dropdown-inline">
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
<ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
<li><a class="op download download-dir" href="#">{% trans "Download" %}</a></li>
<% if (!repo_encrypted && (can_generate_share_link || can_generate_upload_link || is_repo_owner)) { %>
<li><a href="#" class="op share">{% trans "Share" %}</a></li>
<% } %>
<% if (dirent.perm == 'rw') { %>
<li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op mv" href="#">{% trans "Move" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% if (app.pageOptions.folder_perm_enabled && is_repo_owner && !is_virtual && has_been_shared_out) { %>
<li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
<% } %>
<li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% } %>
</ul>
</div>
</div>
</td>
</script>
<script type="text/template" id="dirent-file-tmpl">
<td class="select">
@@ -451,6 +512,94 @@
</td>
</script>
<script type="text/template" id="dirent-file-mobile-tmpl">
<td class="select">
<% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" />
<% } else { %>
<input type="checkbox" class="vam" />
<% } %>
</td>
<td class="star alc">
<% if (dirent.starred) { %>
<a href="#" title="{% trans "starred" %}" class="icon-star file-star" aria-label="{% trans "starred" %}"></a>
<% } else { %>
<a href="#" title="{% trans "unstarred" %}" class="icon-star-empty file-star" aria-label="{% trans "unstarred" %}"></a>
<% } %>
</td>
<td class="dirent-icon">
<div class="pos-rel">
<% if (dirent.is_img) { %>
<% if (dirent.encoded_thumbnail_src) { %>
<img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
<% } else { %>
<img src="<%= icon_url %>" width="24" alt="" />
<% } %>
<% } else { %>
<img src="<%= icon_url %>" width="24" alt="" />
<% } %>
<% if (is_pro && dirent.is_locked) { %>
<img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
<% } %>
</div>
</td>
<td>
<span class="dirent-name">
<% if (dirent.is_img) { %>
<a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
<% } else { %>
<a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
<% } %>
<br />
<span class="dirent-meta-info"><%= dirent.file_size %></span>
<span class="dirent-meta-info">
<% if (dirent.last_modified) { %>
<%= dirent.last_update %>
<% } else { %>
<% print("{% trans "Fetch failed" %}"); %>
<% } %>
</span>
</span>
</td>
<td class="dirent-op">
<div class="op-container">
<div class="sf-dropdown sf-dropdown-inline">
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
<ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
<li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
<% if (!repo_encrypted && can_generate_share_link) { %>
<li><a class="op share" href="#">{% trans "Share" %}</a></li>
<% } %>
<% if (dirent.perm == 'rw') { %>
<li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op mv" href="#">{% trans "Move" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
<% if (is_pro) { %>
<% if (file_audit_enabled) { %>
<li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
<% } %>
<% if (dirent.is_locked) { %>
<% if (dirent.locked_by_me) { %>
<li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
<% } %>
<% } else { %>
<li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
<% } %>
<% } %>
<li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% } %>
</ul>
</div>
</div>
</td>
</script>
<script type="text/template" id="grid-view-file-item-tmpl">
<a href="<%= url %>" class="img-link" target="_blank">
<% if (dirent.is_img && dirent.encoded_thumbnail_src) { %>

4
static/scripts/app/views/dir.js
View File

@@ -27,6 +27,7 @@ define([
path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
dirents_hd_template: _.template($('#dirents-hd-tmpl').html()),
dirents_hd_mobile_template: _.template($('#dirents-hd-mobile-tmpl').html()),
top_search_form_template: _.template($('#top-search-form-tmpl').html()),
newDirTemplate: _.template($("#add-new-dir-form-template").html()),
@@ -451,7 +452,8 @@ define([
},
renderDirentsHd: function() {
this.$('thead').html(this.dirents_hd_template());
var tmpl = $(window).width() < 768 ? this.dirents_hd_mobile_template : this.dirents_hd_template;
this.$('thead').html(tmpl());
},
render_dirents_slice: function(start, limit) {

9
static/scripts/app/views/dirent.js
View File

@@ -20,7 +20,9 @@ define([
},
fileTemplate: _.template($('#dirent-file-tmpl').html()),
fileMobileTemplate: _.template($('#dirent-file-mobile-tmpl').html()),
dirTemplate: _.template($('#dirent-dir-tmpl').html()),
dirMobileTemplate: _.template($('#dirent-dir-mobile-tmpl').html()),
renameTemplate: _.template($("#rename-form-template").html()),
initialize: function(options) {
@@ -41,9 +43,9 @@ define([
var file_icon_size = Common.isHiDPI() ? 48 : 24;
var template;
if (this.model.get('is_dir')) {
template = this.dirTemplate;
template = $(window).width() < 768 ? this.dirMobileTemplate : this.dirTemplate;
} else {
template = this.fileTemplate;
template = $(window).width() < 768 ? this.fileMobileTemplate : this.fileTemplate;
}
this.$el.html(template({
@@ -66,7 +68,8 @@ define([
}));
this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
this.dropdown = new DropdownView({
el: this.$('.sf-dropdown')
el: this.$('.sf-dropdown'),
right: '0'
});
// for image files