Adds an action dropdown that is shown on file selection.
Signed-off-by: Abijeet <abijeetpatro@gmail.com>
This commit is contained in:
parent
c8e61cc252
commit
174ba1f012
|
@ -169,7 +169,7 @@ table.multiselect th a {
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
table th .columntitle {
|
table th .columntitle {
|
||||||
display: block;
|
display: inline-block;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -178,7 +178,6 @@ table th .columntitle {
|
||||||
}
|
}
|
||||||
table th .columntitle.name {
|
table th .columntitle.name {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 80px;
|
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -474,10 +473,9 @@ a.action > img {
|
||||||
|
|
||||||
/* Actions for selected files */
|
/* Actions for selected files */
|
||||||
.selectedActions {
|
.selectedActions {
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedActions a {
|
.selectedActions a {
|
||||||
display: inline;
|
display: inline;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
|
@ -126,7 +126,11 @@
|
||||||
* @type OCA.Files.FileActions
|
* @type OCA.Files.FileActions
|
||||||
*/
|
*/
|
||||||
fileActions: null,
|
fileActions: null,
|
||||||
|
/**
|
||||||
|
* File selection menu, defaults to OCA.Files.FileSelectionMenu
|
||||||
|
* @type OCA.Files.FileSelectionMenu
|
||||||
|
*/
|
||||||
|
fileSelectionMenu: null,
|
||||||
/**
|
/**
|
||||||
* Whether selection is allowed, checkboxes and selection overlay will
|
* Whether selection is allowed, checkboxes and selection overlay will
|
||||||
* be rendered
|
* be rendered
|
||||||
|
@ -271,7 +275,8 @@
|
||||||
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
|
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
|
||||||
this._detailsView = new OCA.Files.DetailsView();
|
this._detailsView = new OCA.Files.DetailsView();
|
||||||
this._detailsView.$el.insertBefore(this.$el);
|
this._detailsView.$el.insertBefore(this.$el);
|
||||||
this._detailsView.$el.addClass('disappear');
|
// this._detailsView.$el.addClass('disappear');
|
||||||
|
this.showDetailsView('/');
|
||||||
}
|
}
|
||||||
|
|
||||||
this._initFileActions(options.fileActions);
|
this._initFileActions(options.fileActions);
|
||||||
|
@ -288,6 +293,28 @@
|
||||||
|
|
||||||
this.fileSummary = this._createSummary();
|
this.fileSummary = this._createSummary();
|
||||||
|
|
||||||
|
this.fileSelectionMenu = new OCA.Files.FileSelectionMenu([
|
||||||
|
{
|
||||||
|
name: 'moveCopy',
|
||||||
|
displayName: t('files', 'Move or copy'),
|
||||||
|
iconClass: 'icon-external',
|
||||||
|
method: _.bind(this._onClickCopyMoveSelected, this)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'download',
|
||||||
|
displayName: t('files', 'Download'),
|
||||||
|
iconClass: 'icon-download',
|
||||||
|
method: _.bind(this._onClickDownloadSelected, this)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'delete',
|
||||||
|
displayName: t('files', 'Delete'),
|
||||||
|
iconClass: 'icon-delete',
|
||||||
|
method: _.bind(this._onClickDeleteSelected, this)
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
this.$el.find('#selectedActionsList').append(this.fileSelectionMenu.$el);
|
||||||
|
|
||||||
if (options.sorting) {
|
if (options.sorting) {
|
||||||
this.setSort(options.sorting.mode, options.sorting.direction, false, false);
|
this.setSort(options.sorting.mode, options.sorting.direction, false, false);
|
||||||
} else {
|
} else {
|
||||||
|
@ -339,6 +366,10 @@
|
||||||
this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this));
|
this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this));
|
||||||
this.$el.find('.copy-move').click(_.bind(this._onClickCopyMoveSelected, this));
|
this.$el.find('.copy-move').click(_.bind(this._onClickCopyMoveSelected, this));
|
||||||
this.$el.find('.delete-selected').click(_.bind(this._onClickDeleteSelected, this));
|
this.$el.find('.delete-selected').click(_.bind(this._onClickDeleteSelected, this));
|
||||||
|
this.$el.find('.actions-selected').click(function () {
|
||||||
|
self.fileSelectionMenu.show(self);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
this.$el.find('.selectedActions a').tooltip({placement:'top'});
|
this.$el.find('.selectedActions a').tooltip({placement:'top'});
|
||||||
|
|
||||||
|
@ -365,6 +396,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
OC.Plugins.attach('OCA.Files.FileList', this);
|
OC.Plugins.attach('OCA.Files.FileList', this);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -754,6 +786,7 @@
|
||||||
files = _.pluck(this.getSelectedFiles(), 'name');
|
files = _.pluck(this.getSelectedFiles(), 'name');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: Update
|
||||||
var downloadFileaction = $('#selectedActionsList').find('.download');
|
var downloadFileaction = $('#selectedActionsList').find('.download');
|
||||||
|
|
||||||
// don't allow a second click on the download action
|
// don't allow a second click on the download action
|
||||||
|
@ -786,6 +819,7 @@
|
||||||
|
|
||||||
files = _.pluck(this.getSelectedFiles(), 'name');
|
files = _.pluck(this.getSelectedFiles(), 'name');
|
||||||
|
|
||||||
|
// TODO: Update
|
||||||
var moveFileAction = $('#selectedActionsList').find('.move');
|
var moveFileAction = $('#selectedActionsList').find('.move');
|
||||||
|
|
||||||
// don't allow a second click on the download action
|
// don't allow a second click on the download action
|
||||||
|
@ -2882,22 +2916,21 @@
|
||||||
selection += ' (' + hiddenInfo + ')';
|
selection += ' (' + hiddenInfo + ')';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO : Change here!!
|
||||||
this.$el.find('#headerName a.name>span:first').text(selection);
|
this.$el.find('#headerName a.name>span:first').text(selection);
|
||||||
this.$el.find('#modified a>span:first').text('');
|
this.$el.find('#modified a>span:first').text('');
|
||||||
this.$el.find('table').addClass('multiselect');
|
this.$el.find('table').addClass('multiselect');
|
||||||
this.$el.find('.selectedActions .download').toggleClass('hidden', !this.isSelectedDownloadable());
|
|
||||||
this.$el.find('.delete-selected').toggleClass('hidden', !this.isSelectedDeletable());
|
|
||||||
|
|
||||||
var $copyMove = this.$el.find('.selectedActions .copy-move');
|
|
||||||
|
this.fileSelectionMenu.toggleItemVisibility('download', !this.isSelectedDownloadable());
|
||||||
|
this.fileSelectionMenu.toggleItemVisibility('delete', !this.isSelectedDeletable());
|
||||||
|
this.fileSelectionMenu.toggleItemVisibility('moveCopy', !this.isSelectedCopiable());
|
||||||
if (this.isSelectedCopiable()) {
|
if (this.isSelectedCopiable()) {
|
||||||
$copyMove.toggleClass('hidden', false);
|
|
||||||
if (this.isSelectedMovable()) {
|
if (this.isSelectedMovable()) {
|
||||||
$copyMove.find('.label').text(t('files', 'Move or copy'));
|
this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Move or copy'));
|
||||||
} else {
|
} else {
|
||||||
$copyMove.find('.label').text(t('files', 'Copy'));
|
this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Copy'));
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
$copyMove.toggleClass('hidden', true);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -0,0 +1,100 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2018
|
||||||
|
*
|
||||||
|
* This file is licensed under the Affero General Public License version 3
|
||||||
|
* or later.
|
||||||
|
*
|
||||||
|
* See the COPYING-README file.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var TEMPLATE_MENU =
|
||||||
|
'<ul>' +
|
||||||
|
'{{#each items}}' +
|
||||||
|
'<li class="item-{{name}}">' +
|
||||||
|
'<a href="#" class="menuitem action {{name}} permanent" data-action="{{name}}">' +
|
||||||
|
'{{#if iconClass}}' +
|
||||||
|
'<span class="icon {{iconClass}}"></span>' +
|
||||||
|
'{{else}}' +
|
||||||
|
'<span class="no-icon"></span>' +
|
||||||
|
'{{/if}}' +
|
||||||
|
'<span class="label">{{displayName}}</span>' +
|
||||||
|
'</li>' +
|
||||||
|
'{{/each}}' +
|
||||||
|
'</ul>';
|
||||||
|
|
||||||
|
var FileSelectionMenu = OC.Backbone.View.extend({
|
||||||
|
tagName: 'div',
|
||||||
|
className: 'filesSelectMenu popovermenu bubble menu-center',
|
||||||
|
_scopes: null,
|
||||||
|
/**
|
||||||
|
* Event handler whenever an action has been clicked within the menu
|
||||||
|
*
|
||||||
|
* @param {Object} event event object
|
||||||
|
*/
|
||||||
|
_onClickAction: function(event) {
|
||||||
|
var $target = $(event.currentTarget);
|
||||||
|
if (!$target.hasClass('menuitem')) {
|
||||||
|
$target = $target.closest('.menuitem');
|
||||||
|
}
|
||||||
|
|
||||||
|
OC.hideMenus();
|
||||||
|
|
||||||
|
var action = $target.data('action');
|
||||||
|
if (!action) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i !== this._scopes.length; ++i) {
|
||||||
|
var name = this._scopes[i].name;
|
||||||
|
var method = this._scopes[i].method;
|
||||||
|
if (name === action) {
|
||||||
|
method(event);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
initialize: function(menuItems) {
|
||||||
|
console.log('init-fileseleectionmenu');
|
||||||
|
console.log(menuItems);
|
||||||
|
this._scopes = menuItems;
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
'click a.action': '_onClickAction'
|
||||||
|
},
|
||||||
|
template: Handlebars.compile(TEMPLATE_MENU),
|
||||||
|
/**
|
||||||
|
* Renders the menu with the currently set items
|
||||||
|
*/
|
||||||
|
render: function() {
|
||||||
|
this.$el.html(this.template({
|
||||||
|
items: this._scopes
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Displays the menu under the given element
|
||||||
|
*
|
||||||
|
* @param {OCA.Files.FileActionContext} context context
|
||||||
|
* @param {Object} $trigger trigger element
|
||||||
|
*/
|
||||||
|
show: function(context) {
|
||||||
|
this._context = context;
|
||||||
|
|
||||||
|
this.render();
|
||||||
|
this.$el.removeClass('hidden');
|
||||||
|
|
||||||
|
OC.showMenu(null, this.$el);
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
toggleItemVisibility: function (itemName, hide) {
|
||||||
|
this.$el.find('.item-' + itemName).toggleClass('hidden', hide);
|
||||||
|
},
|
||||||
|
updateItemText: function (itemName, translation) {
|
||||||
|
this.$el.find('.item-' + itemName).find('label').text(translation);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
OCA.Files.FileSelectionMenu = FileSelectionMenu;
|
||||||
|
})(OC, OCA);
|
|
@ -6,6 +6,7 @@
|
||||||
"jquery-visibility.js",
|
"jquery-visibility.js",
|
||||||
"fileinfomodel.js",
|
"fileinfomodel.js",
|
||||||
"filesummary.js",
|
"filesummary.js",
|
||||||
|
"fileselectionmenu.js",
|
||||||
"breadcrumb.js",
|
"breadcrumb.js",
|
||||||
"filelist.js",
|
"filelist.js",
|
||||||
"search.js",
|
"search.js",
|
||||||
|
|
|
@ -49,20 +49,16 @@
|
||||||
</th>
|
</th>
|
||||||
<th id='headerName' class="hidden column-name">
|
<th id='headerName' class="hidden column-name">
|
||||||
<div id="headerName-container">
|
<div id="headerName-container">
|
||||||
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
|
<a class="name sort columntitle" data-sort="name">
|
||||||
<span id="selectedActionsList" class="selectedActions">
|
<span><?php p($l->t( 'Name' )); ?></span>
|
||||||
<a href="" class="copy-move">
|
<span class="sort-indicator"></span>
|
||||||
<span class="icon icon-external"></span>
|
|
||||||
<span class="label"><?php p($l->t('Move or copy'))?></span>
|
</a>
|
||||||
</a>
|
<span id="selectedActionsList" class="selectedActions">
|
||||||
<a href="" class="download">
|
<a href="" class="actions-selected">
|
||||||
<span class="icon icon-download"></span>
|
<span class="icon icon-more"></span>
|
||||||
<span><?php p($l->t('Download'))?></span>
|
<span><?php p($l->t('Actions'))?></span>
|
||||||
</a>
|
</a>
|
||||||
<a href="" class="delete-selected">
|
|
||||||
<span class="icon icon-delete"></span>
|
|
||||||
<span><?php p($l->t('Delete'))?></span>
|
|
||||||
</a>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
|
@ -71,10 +67,6 @@
|
||||||
</th>
|
</th>
|
||||||
<th id="headerDate" class="hidden column-mtime">
|
<th id="headerDate" class="hidden column-mtime">
|
||||||
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Modified' )); ?></span><span class="sort-indicator"></span></a>
|
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Modified' )); ?></span><span class="sort-indicator"></span></a>
|
||||||
<span class="selectedActions"><a href="" class="delete-selected">
|
|
||||||
<span><?php p($l->t('Delete'))?></span>
|
|
||||||
<span class="icon icon-delete"></span>
|
|
||||||
</a></span>
|
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
Loading…
Reference in New Issue