mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-02 07:27:04 +00:00
Use dropdown and HLItemView for dirent (#1120)
* 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
@@ -181,9 +181,8 @@
|
||||
<th class="dirent-update by-time cspt">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide"></span></th>
|
||||
</tr>
|
||||
</script>
|
||||
<script type="text/template" id="dirent-tmpl">
|
||||
|
||||
<% if (dirent.is_dir) { %>
|
||||
<script type="text/template" id="dirent-dir-tmpl">
|
||||
<td class="select">
|
||||
<% if (dirent.selected) { %>
|
||||
<input type="checkbox" class="vam" checked="checked" />
|
||||
@@ -192,49 +191,53 @@
|
||||
<% } %>
|
||||
</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>
|
||||
<span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
|
||||
</td>
|
||||
<td class="dirent-op">
|
||||
<div class="repo-file-op vh">
|
||||
<div class="op-container">
|
||||
<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) { %>
|
||||
<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') { %>
|
||||
<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>
|
||||
<% if (dirent.perm == 'rw') { %>
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<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) { %>
|
||||
<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>
|
||||
<div class="dropdown dropdown-inline">
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<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) { %>
|
||||
<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>
|
||||
</div>
|
||||
<% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
|
||||
</ul>
|
||||
<div class="dropdown dropdown-inline">
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="dirent-size"></td>
|
||||
<td class="dirent-update">
|
||||
<% if (dirent.last_modified) { %>
|
||||
<% print(dirent.last_update); %>
|
||||
<% } else { %>
|
||||
<% print(""); %>
|
||||
<%= dirent.last_update %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% } else { %>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="dirent-file-tmpl">
|
||||
<td class="select">
|
||||
<% if (dirent.selected) { %>
|
||||
<input type="checkbox" class="vam" checked="checked" />
|
||||
@@ -276,55 +279,57 @@
|
||||
</span>
|
||||
</td>
|
||||
<td class="dirent-op">
|
||||
<div class="repo-file-op vh">
|
||||
<div class="op-container">
|
||||
<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) { %>
|
||||
<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') { %>
|
||||
<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>
|
||||
<% if (dirent.perm == 'rw') { %>
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More Operations"%}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<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) { %>
|
||||
<div class="dropdown dropdown-inline">
|
||||
<a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More Operations"%}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<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>
|
||||
<% 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>
|
||||
</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) { %>
|
||||
<a class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
|
||||
</ul>
|
||||
<div class="dropdown dropdown-inline">
|
||||
<a class="more-op-icon sf2-icon-caret-down op-icon vh dropdown-toggle" title="{% trans "More operations" %}"></a>
|
||||
<ul class="hidden-op dirent-hidden-op hide dropdown-menu">
|
||||
<li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="dirent-size"><%= dirent.file_size %></td>
|
||||
<td class="dirent-update">
|
||||
<% if (dirent.last_modified) { %>
|
||||
<% print(dirent.last_update); %>
|
||||
<%= dirent.last_update %>
|
||||
<% } else { %>
|
||||
<% print("{% trans "Fetch failed" %}"); %>
|
||||
<% } %>
|
||||
</td>
|
||||
<% } %>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="grid-view-file-item-tmpl">
|
||||
|
||||
@@ -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'
|
||||
$(document).click(function(e) {
|
||||
var target = e.target || event.srcElement;
|
||||
@@ -99,14 +78,6 @@ define([
|
||||
if ($form.length && !$form.find('*').is(target)) {
|
||||
var $tr = $form.closest('tr'); // get $tr before $form removed in `.cancel 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -6,21 +6,23 @@ define([
|
||||
'file-tree',
|
||||
'app/views/share',
|
||||
'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,
|
||||
FolderPermView) {
|
||||
FolderPermView, HLItemView, DropdownView) {
|
||||
'use strict';
|
||||
|
||||
app = app || {};
|
||||
app.globalState = app.globalState || {};
|
||||
|
||||
var DirentView = Backbone.View.extend({
|
||||
var DirentView = HLItemView.extend({
|
||||
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()),
|
||||
|
||||
initialize: function(options) {
|
||||
HLItemView.prototype.initialize.call(this);
|
||||
|
||||
this.dirView = options.dirView;
|
||||
this.dir = this.dirView.dir;
|
||||
|
||||
@@ -34,8 +36,14 @@ define([
|
||||
var is_pro = app.pageOptions.is_pro;
|
||||
var file_audit_enabled = app.pageOptions.file_audit_enabled;
|
||||
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_path: dirent_path,
|
||||
encoded_path: Common.encodePath(dirent_path),
|
||||
@@ -51,17 +59,17 @@ define([
|
||||
repo_encrypted: dir.encrypted
|
||||
}));
|
||||
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;
|
||||
},
|
||||
|
||||
events: {
|
||||
'mouseenter': 'highlight',
|
||||
'mouseleave': 'rmHighlight',
|
||||
'click .select': 'select',
|
||||
'click .file-star': 'starFile',
|
||||
'click .dir-link': 'visitDir',
|
||||
'click .more-op-icon': 'togglePopup',
|
||||
'click .share': 'share',
|
||||
'click .delete': 'del', // 'delete' is a preserve word
|
||||
'click .rename': 'rename',
|
||||
@@ -74,20 +82,7 @@ define([
|
||||
},
|
||||
|
||||
_hideMenu: function() {
|
||||
this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
|
||||
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');
|
||||
}
|
||||
this.dropdown.hide();
|
||||
},
|
||||
|
||||
select: function () {
|
||||
@@ -165,26 +160,6 @@ define([
|
||||
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() {
|
||||
var dir = this.dir,
|
||||
obj_name = this.model.get('obj_name'),
|
||||
@@ -237,9 +212,20 @@ define([
|
||||
$op.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() {
|
||||
app.ui.freezeItemHightlight = false;
|
||||
if (app.ui.currentHighlightedItem) {
|
||||
app.ui.currentHighlightedItem.rmHighlight();
|
||||
}
|
||||
form.remove();
|
||||
$op.show();
|
||||
$name.show();
|
||||
@@ -276,6 +262,7 @@ define([
|
||||
};
|
||||
_this.model.rename({
|
||||
newname: new_name,
|
||||
success: after_op_success,
|
||||
error: after_op_error
|
||||
});
|
||||
return false;
|
||||
@@ -291,6 +278,7 @@ define([
|
||||
'op_type': op_type
|
||||
};
|
||||
|
||||
this._hideMenu();
|
||||
new DirentMvcpDialog(options);
|
||||
return false;
|
||||
},
|
||||
@@ -301,12 +289,14 @@ define([
|
||||
'dir_path': this.dir.path,
|
||||
'repo_id': this.dir.repo_id
|
||||
};
|
||||
this._hideMenu();
|
||||
new FolderPermView(options);
|
||||
return false;
|
||||
},
|
||||
|
||||
lockFile: function() {
|
||||
var _this = this;
|
||||
this._hideMenu();
|
||||
this.model.lockFile({
|
||||
success: function() {
|
||||
_this.$el.removeClass('hl');
|
||||
@@ -320,6 +310,7 @@ define([
|
||||
|
||||
unlockFile: function() {
|
||||
var _this = this;
|
||||
this._hideMenu();
|
||||
this.model.unlockFile({
|
||||
success: function() {
|
||||
_this.$el.removeClass('hl');
|
||||
|
||||
Reference in New Issue
Block a user