Skip to content

Commit 1123390

Browse files
tsdicloudtsdicloud
committed
Merge #217 127-file multiselection action
2 parents 95becdd + 7b32738 commit 1123390

File tree

3 files changed

+168
-6
lines changed

3 files changed

+168
-6
lines changed

‎apps/files/js/filelist.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,9 @@
376376

377377
this.$el.on('show', this._onResize);
378378

379+
this.resizeFileActionMenu = _.debounce(_.bind(this.resizeFileActionMenu, this), 250);
380+
$(window).resize(this.resizeFileActionMenu);
381+
379382
// reload files list on share accept
380383
$('body').on('OCA.Notification.Action', function(eventObject) {
381384
if (eventObject.notification.app === 'files_sharing' && eventObject.action.type === 'POST') {
@@ -680,6 +683,7 @@
680683
* @param {boolean} [show=true] whether to open the sidebar if it was closed
681684
*/
682685
_updateDetailsView: function(fileName, show) {
686+
this.resizeFileActionMenu();
683687
if (!(OCA.Files && OCA.Files.Sidebar)) {
684688
console.error('No sidebar available');
685689
return;
@@ -1504,6 +1508,12 @@
15041508
this.fileMultiSelectMenu.render();
15051509
this.$el.find('.selectedActions .filesSelectMenu').remove();
15061510
this.$el.find('.selectedActions').append(this.fileMultiSelectMenu.$el);
1511+
this.fileMultipleSelectionMenu = new OCA.Files.FileMultipleSelectionMenu(this.multiSelectMenuItems.sort(function(a, b) {
1512+
return a.order - b.order
1513+
}));
1514+
this.fileMultipleSelectionMenu.render();
1515+
this.$el.find('.selectedActions .filesSelectionMenu').remove();
1516+
this.$el.find('.selectedActions').append(this.fileMultipleSelectionMenu.$el);
15071517
},
15081518

15091519
/**
@@ -3504,6 +3514,72 @@
35043514
}
35053515
},
35063516

3517+
/**
3518+
* Show or hide file action menu based on the current selection
3519+
*/
3520+
resizeFileActionMenu: function() {
3521+
const appList = this.$el.find('.filesSelectionMenu ul li:not(.hidden-action)');
3522+
const appListWidth = 179;
3523+
const checkWidth = Math.ceil(this.$el.find('.column-selection').outerWidth());
3524+
const headerNameWidth = Math.ceil(this.$el.find('.column-name').outerWidth());
3525+
const actionWidth = Math.ceil(this.$el.find('#selectedActionLabel').outerWidth());
3526+
const allLabelWidth = Math.ceil(this.$el.find('#allLabel').not('#allLabel:hidden').outerWidth());
3527+
let headerWidth = Math.ceil(this.$el.find('.files-filestable thead').outerWidth());
3528+
3529+
if($('#app-sidebar-vue').length>0){
3530+
headerWidth = headerWidth - Math.ceil($('#app-sidebar-vue').outerWidth());
3531+
}
3532+
3533+
var availableWidth;
3534+
if(!allLabelWidth){
3535+
availableWidth = headerWidth - (checkWidth + headerNameWidth);
3536+
}
3537+
else{
3538+
availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth);
3539+
}
3540+
3541+
let appCount = Math.floor((availableWidth / appListWidth));
3542+
3543+
if(appCount < appList.length) {
3544+
3545+
if(!allLabelWidth){
3546+
availableWidth = headerWidth - (checkWidth + headerNameWidth + actionWidth);
3547+
}
3548+
else{
3549+
availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth);
3550+
}
3551+
appCount = Math.floor((availableWidth / appListWidth));
3552+
}
3553+
3554+
var summary = this._selectionSummary.summary;
3555+
if (summary.totalFiles === 0 && summary.totalDirs === 0) {
3556+
this.$el.find('#selectedActionLabel').css('display','none');
3557+
}
3558+
else{
3559+
if(appCount < appList.length) {
3560+
this.$el.find('#selectedActionLabel').css('display','block');
3561+
}
3562+
else if(appCount == appList.length){
3563+
this.$el.find('#selectedActionLabel').css('display','none');
3564+
}
3565+
else if (!isFinite(appCount))
3566+
{
3567+
this.$el.find('#selectedActionLabel').css('display','block');
3568+
}
3569+
else if(appCount > appList.length){
3570+
this.$el.find('#selectedActionLabel').css('display','none');
3571+
}
3572+
}
3573+
3574+
for (let k = 0; k < appList.length; k++) {
3575+
if (k < appCount) {
3576+
$(appList[k]).removeClass('hidden');
3577+
} else {
3578+
$(appList[k]).addClass('hidden');
3579+
}
3580+
}
3581+
},
3582+
35073583
/**
35083584
* Check whether all selected files are copiable
35093585
*/

‎apps/files/js/filemultipleselectionmenu.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* Copyright (c) 2018
3+
*
4+
* This file is licensed under the Affero General Public License version 3
5+
* or later.
6+
*
7+
* See the COPYING-README file.
8+
*
9+
*/
10+
11+
(function() {
12+
var FileMultipleSelectionMenu = OC.Backbone.View.extend({
13+
tagName: 'div',
14+
className: 'filesSelectionMenu',
15+
_scopes: null,
16+
initialize: function(menuItems) {
17+
this._scopes = menuItems;
18+
},
19+
events: {
20+
'click a.action': '_onClickAction'
21+
},
22+
23+
/**
24+
* Renders the menu with the currently set items
25+
*/
26+
render: function() {
27+
this.$el.html(OCA.Files.Templates['filemultiselectmenu']({
28+
items: this._scopes
29+
}));
30+
},
31+
/**
32+
* Displays the menu under the given element
33+
*
34+
* @param {OCA.Files.FileActionContext} context context
35+
* @param {Object} $trigger trigger element
36+
*/
37+
show: function(context) {
38+
this._context = context;
39+
return false;
40+
},
41+
toggleItemVisibility: function (itemName, show) {
42+
var toggle= $('.filesSelectionMenu');
43+
if (show) {
44+
toggle.find('.item-' + itemName).removeClass('hidden-action');
45+
} else {
46+
toggle.find('.item-' + itemName).addClass('hidden-action');
47+
}
48+
},
49+
updateItemText: function (itemName, translation) {
50+
this.$el.find('.item-' + itemName).find('.label').text(translation);
51+
},
52+
toggleLoading: function (itemName, showLoading) {
53+
var $actionElement = this.$el.find('.item-' + itemName);
54+
if ($actionElement.length === 0) {
55+
return;
56+
}
57+
var $icon = $actionElement.find('.icon');
58+
if (showLoading) {
59+
var $loadingIcon = $('<span class="icon icon-loading-small"></span>');
60+
$icon.after($loadingIcon);
61+
$icon.addClass('hidden');
62+
$actionElement.addClass('disabled');
63+
} else {
64+
$actionElement.find('.icon-loading-small').remove();
65+
$actionElement.find('.icon').removeClass('hidden');
66+
$actionElement.removeClass('disabled');
67+
}
68+
},
69+
isDisabled: function (itemName) {
70+
var $actionElement = this.$el.find('.item-' + itemName);
71+
return $actionElement.hasClass('disabled');
72+
},
73+
/**
74+
* Event handler whenever an action has been clicked within the menu
75+
*
76+
* @param {Object} event event object
77+
*/
78+
_onClickAction: function (event) {
79+
var $target = $(event.currentTarget);
80+
if (!$target.hasClass('menuitem')) {
81+
$target = $target.closest('.menuitem');
82+
}
83+
84+
OC.hideMenus();
85+
this._context.multiSelectMenuClick(event, $target.data('action'));
86+
return false;
87+
}
88+
});
89+
90+
OCA.Files.FileMultipleSelectionMenu = FileMultipleSelectionMenu;
91+
})(OC, OCA);

‎apps/files/js/filemultiselectmenu.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
(function() {
1212
var FileMultiSelectMenu = OC.Backbone.View.extend({
1313
tagName: 'div',
14-
className: 'filesSelectMenu popovermenu bubble menu-center',
14+
className: 'filesSelectMenu popovermenu bubble menu-right',
1515
_scopes: null,
1616
initialize: function(menuItems) {
1717
this._scopes = menuItems;
@@ -37,11 +37,6 @@
3737
show: function(context) {
3838
this._context = context;
3939
this.$el.removeClass('hidden');
40-
if (window.innerWidth < 480) {
41-
this.$el.removeClass('menu-center').addClass('menu-right');
42-
} else {
43-
this.$el.removeClass('menu-right').addClass('menu-center');
44-
}
4540
OC.showMenu(null, this.$el);
4641
return false;
4742
},

0 commit comments

Comments
 (0)