haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-02 15:38:15 +00:00
Code Issues Releases Wiki Activity

Use dropdown and HLItemView for dirent (#1120)

Browse Source 
* Use dropdown and HLItemView for dirent

* [dir view] add some function back for 'rename'

* Remove dirent highlight after close rename form
This commit is contained in:
Daniel Pan
2016-04-14 17:17:01 +08:00
parent fb802a54b0
commit bb8786c5da
3 changed files with 95 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -181,9 +181,8 @@
<th class="dirent-update by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide"></span></th> <th class="dirent-update by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide"></span></th>
</tr> </tr>
</script> </script>
<script type="text/template" id="dirent-tmpl">
<% if (dirent.is_dir) { %> <script type="text/template" id="dirent-dir-tmpl">
<td class="select"> <td class="select">
<% if (dirent.selected) { %> <% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" /> <input type="checkbox" class="vam" checked="checked" />
@@ -192,49 +191,53 @@
<% } %> <% } %>
</td> </td>
<td class="star"></td> <td class="star"></td>
<td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="{% trans "Directory icon" %}" /></td> <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
<td> <td>
<span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span> <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
</td> </td>
<td class="dirent-op"> <td class="dirent-op">
<div class="repo-file-op vh"> <div class="op-container">
<div class="displayed-op"> <div class="displayed-op">
<a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a> <a class="op-icon download sf2-icon-download sf2-x vh" href="<%= download_url %>" title="{% trans "Download" %}"></a>
<% if (!repo_encrypted && can_generate_shared_link) { %> <% if (!repo_encrypted && can_generate_shared_link) { %>
<a href="#" class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></a> <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}"></a>
<% } %> <% } %>
<% if (dirent.perm == 'rw') { %> <% if (dirent.perm == 'rw') { %>
<a href="#" class="op-icon delete sf2-icon-delete sf2-x" title="{% trans "Delete" %}"></a> <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}"></a>
<% } %> <% } %>
</div> </div>
<% if (dirent.perm == 'rw') { %> <% if (dirent.perm == 'rw') { %>
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a> <div class="dropdown dropdown-inline">
<ul class="hidden-op dirent-hidden-op hide dropdown-menu"> <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li> <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
<li><a class="op mv" href="#">{% trans "Move" %}</a></li> <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li> <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
<% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %> <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li> <% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %>
<% } %> <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> <% } %>
</ul> <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>
</ul>
</div>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %> <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a> <div class="dropdown dropdown-inline">
<ul class="hidden-op dirent-hidden-op hide dropdown-menu"> <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li> <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
</ul> <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
</ul>
</div>
<% } %> <% } %>
</div> </div>
</td> </td>
<td class="dirent-size"></td> <td class="dirent-size"></td>
<td class="dirent-update"> <td class="dirent-update">
<% if (dirent.last_modified) { %> <% if (dirent.last_modified) { %>
<% print(dirent.last_update); %> <%= dirent.last_update %>
<% } else { %>
<% print(""); %>
<% } %> <% } %>
</td> </td>
<% } else { %> </script>
<script type="text/template" id="dirent-file-tmpl">
<td class="select"> <td class="select">
<% if (dirent.selected) { %> <% if (dirent.selected) { %>
<input type="checkbox" class="vam" checked="checked" /> <input type="checkbox" class="vam" checked="checked" />
@@ -276,55 +279,57 @@
</span> </span>
</td> </td>
<td class="dirent-op"> <td class="dirent-op">
<div class="repo-file-op vh"> <div class="op-container">
<div class="displayed-op"> <div class="displayed-op">
<a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a> <a class="op-icon download sf2-icon-download sf2-x vh" href="<%= download_url %>" title="{% trans "Download" %}"></a>
<% if (!repo_encrypted && can_generate_shared_link) { %> <% if (!repo_encrypted && can_generate_shared_link) { %>
<a href="#" class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></a> <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}"></a>
<% } %> <% } %>
<% if (dirent.perm == 'rw') { %> <% if (dirent.perm == 'rw') { %>
<a href="#" class="op-icon delete sf2-icon-delete sf2-x" title="{% trans "Delete" %}"></a> <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}"></a>
<% } %> <% } %>
</div> </div>
<% if (dirent.perm == 'rw') { %> <% if (dirent.perm == 'rw') { %>
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More Operations"%}"></a> <div class="dropdown dropdown-inline">
<ul class="hidden-op dirent-hidden-op hide dropdown-menu"> <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More Operations"%}"></a>
<li><a class="op rename" href="#">{% trans "Rename" %}</a></li> <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
<li><a class="op mv" href="#">{% trans "Move" %}</a></li> <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li> <li><a class="op mv" href="#">{% trans "Move" %}</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> <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
<% if (is_pro) { %> <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
<% if (file_audit_enabled) { %> <% 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> <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 { %> <% if (dirent.is_locked) { %>
<li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li> <% 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>
<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> </ul>
</ul> </div>
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %> <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
<a class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a> <div class="dropdown dropdown-inline">
<ul class="hidden-op dirent-hidden-op hide dropdown-menu"> <a class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li> <ul class="hidden-op dirent-hidden-op hide dropdown-menu">
</ul> <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
</ul>
</div>
<% } %> <% } %>
</div> </div>
</td> </td>
<td class="dirent-size"><%= dirent.file_size %></td> <td class="dirent-size"><%= dirent.file_size %></td>
<td class="dirent-update"> <td class="dirent-update">
<% if (dirent.last_modified) { %> <% if (dirent.last_modified) { %>
<% print(dirent.last_update); %> <%= dirent.last_update %>
<% } else { %> <% } else { %>
<% print("{% trans "Fetch failed" %}"); %> <% print("{% trans "Fetch failed" %}"); %>
<% } %> <% } %>
</td> </td>
<% } %>
</script> </script>
<script type="text/template" id="grid-view-file-item-tmpl"> <script type="text/template" id="grid-view-file-item-tmpl">

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

@@ -71,27 +71,6 @@ define([
} }
}); });
// hide 'hidden-op' popup
$(document).click(function(e) {
var target = e.target || event.srcElement;
var $popup = $('.dirent-hidden-op:visible');
if ($popup.length > 0 && // There is a visible popup
!$('.more-op-icon', $popup.closest('tr')).is(target) &&
!$popup.is(target) &&
!$popup.find('*').is(target)) {
$popup.addClass('hide');
var $tr = $popup.closest('tr');
if (!$tr.find('*').is(target)) {
$tr.removeClass('hl').find('.repo-file-op').addClass('vh');
$('.repo-file-list tr:gt(0)').each(function() {
if ($(this).find('*').is(target)) {
$(this).addClass('hl').find('.repo-file-op').removeClass('vh');
}
});
}
}
});
// hide 'rename form' // hide 'rename form'
$(document).click(function(e) { $(document).click(function(e) {
var target = e.target || event.srcElement; var target = e.target || event.srcElement;
@@ -99,14 +78,6 @@ define([
if ($form.length && !$form.find('*').is(target)) { if ($form.length && !$form.find('*').is(target)) {
var $tr = $form.closest('tr'); // get $tr before $form removed in `.cancel click()` var $tr = $form.closest('tr'); // get $tr before $form removed in `.cancel click()`
$('.cancel', $form).click(); $('.cancel', $form).click();
if (!$tr.find('*').is(target)) {
$tr.removeClass('hl').find('.repo-file-op').addClass('vh');
$('.repo-file-list tr:gt(0)').each(function() {
if ($(this).find('*').is(target)) {
$(this).addClass('hl').find('.repo-file-op').removeClass('vh');
}
});
}
} }
}); });

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

@@ -6,21 +6,23 @@ define([
'file-tree', 'file-tree',
'app/views/share', 'app/views/share',
'app/views/dialogs/dirent-mvcp', 'app/views/dialogs/dirent-mvcp',
'app/views/folder-perm' 'app/views/folder-perm',
'app/views/widgets/hl-item-view',
'app/views/widgets/dropdown'
], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog, ], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog,
FolderPermView) { FolderPermView, HLItemView, DropdownView) {
'use strict'; 'use strict';
app = app || {}; var DirentView = HLItemView.extend({
app.globalState = app.globalState || {};
var DirentView = Backbone.View.extend({
tagName: 'tr', tagName: 'tr',
template: _.template($('#dirent-tmpl').html()), fileTemplate: _.template($('#dirent-file-tmpl').html()),
dirTemplate: _.template($('#dirent-dir-tmpl').html()),
renameTemplate: _.template($("#rename-form-template").html()), renameTemplate: _.template($("#rename-form-template").html()),
initialize: function(options) { initialize: function(options) {
HLItemView.prototype.initialize.call(this);
this.dirView = options.dirView; this.dirView = options.dirView;
this.dir = this.dirView.dir; this.dir = this.dirView.dir;
@@ -34,8 +36,14 @@ define([
var is_pro = app.pageOptions.is_pro; var is_pro = app.pageOptions.is_pro;
var file_audit_enabled = app.pageOptions.file_audit_enabled; var file_audit_enabled = app.pageOptions.file_audit_enabled;
var file_icon_size = Common.isHiDPI() ? 48 : 24; var file_icon_size = Common.isHiDPI() ? 48 : 24;
var template;
if (this.model.get('is_dir')) {
template = this.dirTemplate;
} else {
template = this.fileTemplate;
}
this.$el.html(this.template({ this.$el.html(template({
dirent: this.model.attributes, dirent: this.model.attributes,
dirent_path: dirent_path, dirent_path: dirent_path,
encoded_path: Common.encodePath(dirent_path), encoded_path: Common.encodePath(dirent_path),
@@ -51,17 +59,17 @@ define([
repo_encrypted: dir.encrypted repo_encrypted: dir.encrypted
})); }));
this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name'))); this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
this.dropdown = new DropdownView({
el: this.$('.dropdown')
});
return this; return this;
}, },
events: { events: {
'mouseenter': 'highlight',
'mouseleave': 'rmHighlight',
'click .select': 'select', 'click .select': 'select',
'click .file-star': 'starFile', 'click .file-star': 'starFile',
'click .dir-link': 'visitDir', 'click .dir-link': 'visitDir',
'click .more-op-icon': 'togglePopup',
'click .share': 'share', 'click .share': 'share',
'click .delete': 'del', // 'delete' is a preserve word 'click .delete': 'del', // 'delete' is a preserve word
'click .rename': 'rename', 'click .rename': 'rename',
@@ -74,20 +82,7 @@ define([
}, },
_hideMenu: function() { _hideMenu: function() {
this.$el.removeClass('hl').find('.repo-file-op').addClass('vh'); this.dropdown.hide();
this.$('.hidden-op').addClass('hide');
},
highlight: function() {
if (!$('.hidden-op:visible').length && !$('#rename-form').length) {
this.$el.addClass('hl').find('.repo-file-op').removeClass('vh');
}
},
rmHighlight: function() {
if (!$('.hidden-op:visible').length && !$('#rename-form').length) {
this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
}
}, },
select: function () { select: function () {
@@ -165,26 +160,6 @@ define([
return false; return false;
}, },
togglePopup: function() {
var icon = this.$('.more-op-icon'),
popup = this.$('.hidden-op');
if (popup.hasClass('hide')) { // the popup is not shown
popup.css({'left': icon.position().left});
if (icon.offset().top + popup.height() <= $('#main').offset().top + $('#main').height()) {
// below the icon
popup.css('top', icon.position().top + icon.outerHeight(true) + 3);
} else {
popup.css('bottom', icon.parent().outerHeight() - icon.position().top + 3);
}
popup.removeClass('hide');
} else {
popup.addClass('hide');
}
return false;
},
share: function() { share: function() {
var dir = this.dir, var dir = this.dir,
obj_name = this.model.get('obj_name'), obj_name = this.model.get('obj_name'),
@@ -237,9 +212,20 @@ define([
$op.hide(); $op.hide();
$name.hide(); $name.hide();
this.$('.hidden-op').addClass('hide'); this._hideMenu();
app.ui.freezeItemHightlight = true;
var after_op_success = function(data) {
app.ui.freezeItemHightlight = false;
if (app.ui.currentHighlightedItem) {
app.ui.currentHighlightedItem.rmHighlight();
}
};
var cancelRename = function() { var cancelRename = function() {
app.ui.freezeItemHightlight = false;
if (app.ui.currentHighlightedItem) {
app.ui.currentHighlightedItem.rmHighlight();
}
form.remove(); form.remove();
$op.show(); $op.show();
$name.show(); $name.show();
@@ -276,6 +262,7 @@ define([
}; };
_this.model.rename({ _this.model.rename({
newname: new_name, newname: new_name,
success: after_op_success,
error: after_op_error error: after_op_error
}); });
return false; return false;
@@ -291,6 +278,7 @@ define([
'op_type': op_type 'op_type': op_type
}; };
this._hideMenu();
new DirentMvcpDialog(options); new DirentMvcpDialog(options);
return false; return false;
}, },
@@ -301,12 +289,14 @@ define([
'dir_path': this.dir.path, 'dir_path': this.dir.path,
'repo_id': this.dir.repo_id 'repo_id': this.dir.repo_id
}; };
this._hideMenu();
new FolderPermView(options); new FolderPermView(options);
return false; return false;
}, },
lockFile: function() { lockFile: function() {
var _this = this; var _this = this;
this._hideMenu();
this.model.lockFile({ this.model.lockFile({
success: function() { success: function() {
_this.$el.removeClass('hl'); _this.$el.removeClass('hl');
@@ -320,6 +310,7 @@ define([
unlockFile: function() { unlockFile: function() {
var _this = this; var _this = this;
this._hideMenu();
this.model.unlockFile({ this.model.unlockFile({
success: function() { success: function() {
_this.$el.removeClass('hl'); _this.$el.removeClass('hl');