Skip to content

Commit caaf75d

Browse files
TSI-kavitasonawaneTSI-kavitasonawane
committed
File action button behaviour
1 parent 74f31ba commit caaf75d

6 files changed

Lines changed: 218 additions & 7 deletions

File tree

‎apps/files/js/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@
108108
iconClass: 'icon-delete',
109109
order: 99,
110110
},
111+
{
112+
name: 'cancel',
113+
displayName: t('files', 'Cancel'),
114+
iconClass: 'icon-close',
115+
order: 101,
116+
},
111117
...(
112118
OCA?.SystemTags === undefined ? [] : ([{
113119
name: 'tags',

‎apps/files/js/filelist.js‎

Lines changed: 118 additions & 1 deletion
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') {
@@ -561,6 +564,9 @@
561564
case 'tags':
562565
this._onClickTagSelected(ev);
563566
break;
567+
case 'cancel':
568+
this._onClickCancelSelected(ev);
569+
break;
564570
}
565571
},
566572
/**
@@ -677,6 +683,7 @@
677683
* @param {boolean} [show=true] whether to open the sidebar if it was closed
678684
*/
679685
_updateDetailsView: function(fileName, show) {
686+
this.resizeFileActionMenu();
680687
if (!(OCA.Files && OCA.Files.Sidebar)) {
681688
console.error('No sidebar available');
682689
return;
@@ -1177,6 +1184,17 @@
11771184
});
11781185
},
11791186

1187+
/**
1188+
* Event handler for when deselecting all selected files
1189+
*/
1190+
_onClickCancelSelected: function(ev) {
1191+
this._selectedFiles = {};
1192+
this._selectionSummary.clear();
1193+
$('.files-filestable input').prop('checked', false);
1194+
this.$fileList.find('td.selection > .selectCheckBox:visible').closest('tr').toggleClass('selected', false);
1195+
this.updateSelectionSummary();
1196+
},
1197+
11801198
_onClickDocument: function(ev) {
11811199
if(!$(ev.target).closest('#editor_container').length) {
11821200
this._inputView.setValues([]);
@@ -1501,6 +1519,12 @@
15011519
this.fileMultiSelectMenu.render();
15021520
this.$el.find('.selectedActions .filesSelectMenu').remove();
15031521
this.$el.find('.selectedActions').append(this.fileMultiSelectMenu.$el);
1522+
this.fileMultipleSelectionMenu = new OCA.Files.FileMultipleSelectionMenu(this.multiSelectMenuItems.sort(function(a, b) {
1523+
return a.order - b.order
1524+
}));
1525+
this.fileMultipleSelectionMenu.render();
1526+
this.$el.find('.selectedActions .filesSelectionMenu').remove();
1527+
this.$el.find('.selectedActions').append(this.fileMultipleSelectionMenu.$el);
15041528
},
15051529

15061530
/**
@@ -3455,10 +3479,22 @@
34553479
this.$el.find('.column-mtime a>span:first').text(t('files','Modified'));
34563480
this.$el.find('table').removeClass('multiselect');
34573481
this.$el.find('.selectedActions').addClass('hidden');
3482+
this.$el.find('.column-size').removeClass('hidden');
3483+
this.$el.find('.column-mtime').removeClass('hidden');
3484+
this.$el.find('.column-size-count').addClass('hidden');
3485+
this.$el.find('.column-size-open').addClass('hidden');
3486+
this.$el.find('#selectedActionLabel').css('display','none');
34583487
}
34593488
else {
34603489
this.$el.find('.selectedActions').removeClass('hidden');
3461-
this.$el.find('.column-size a>span:first').text(OC.Util.humanFileSize(summary.totalSize));
3490+
this.$el.find('.column-size').addClass('hidden');
3491+
this.$el.find('.column-mtime').addClass('hidden');
3492+
this.$el.find('.column-size-count').removeClass('hidden');
3493+
this.$el.find('.column-size-open').removeClass('hidden');
3494+
this.$el.find('#selectedActionsList').removeClass('menu-center');
3495+
this.$el.find('.column-size-count').text(OC.Util.humanFileSize(summary.totalSize));
3496+
this.fileMultipleSelectionMenu.show(this);
3497+
this.resizeFileActionMenu();
34623498

34633499
var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs);
34643500
var fileInfo = n('files', '%n file', '%n files', summary.totalFiles);
@@ -3498,6 +3534,87 @@
34983534
this.fileMultiSelectMenu.toggleItemVisibility('copyMove', false);
34993535
}
35003536
}
3537+
3538+
if (this.fileMultipleSelectionMenu) {
3539+
this.fileMultipleSelectionMenu.toggleItemVisibility('download', this.isSelectedDownloadable());
3540+
this.fileMultipleSelectionMenu.toggleItemVisibility('delete', this.isSelectedDeletable());
3541+
this.fileMultipleSelectionMenu.toggleItemVisibility('copyMove', this.isSelectedCopiable());
3542+
if (this.isSelectedCopiable()) {
3543+
if (this.isSelectedMovable()) {
3544+
this.fileMultipleSelectionMenu.updateItemText('copyMove', t('files', 'Move or copy'));
3545+
} else {
3546+
this.fileMultipleSelectionMenu.updateItemText('copyMove', t('files', 'Copy'));
3547+
}
3548+
} else {
3549+
this.fileMultipleSelectionMenu.toggleItemVisibility('copyMove', false);
3550+
}
3551+
}
3552+
}
3553+
},
3554+
3555+
/**
3556+
* Show or hide file action menu based on the current selection
3557+
*/
3558+
resizeFileActionMenu: function() {
3559+
const appList = this.$el.find('.filesSelectionMenu ul li:not(.hidden-action)');
3560+
const appListWidth = 179;
3561+
const checkWidth = Math.ceil(this.$el.find('.column-selection').outerWidth());
3562+
const headerNameWidth = Math.ceil(this.$el.find('.column-name').outerWidth());
3563+
const actionWidth = Math.ceil(this.$el.find('#selectedActionLabel').outerWidth());
3564+
const allLabelWidth = Math.ceil(this.$el.find('#allLabel').not('#allLabel:hidden').outerWidth());
3565+
let headerWidth = Math.ceil(this.$el.find('.files-filestable thead').outerWidth());
3566+
3567+
if($('#app-sidebar-vue').length>0){
3568+
headerWidth = headerWidth - Math.ceil($('#app-sidebar-vue').outerWidth());
3569+
}
3570+
3571+
var availableWidth;
3572+
if(!allLabelWidth){
3573+
availableWidth = headerWidth - (checkWidth + headerNameWidth);
3574+
}
3575+
else{
3576+
availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth);
3577+
}
3578+
3579+
let appCount = Math.floor((availableWidth / appListWidth));
3580+
3581+
if(appCount < appList.length) {
3582+
3583+
if(!allLabelWidth){
3584+
availableWidth = headerWidth - (checkWidth + headerNameWidth + actionWidth);
3585+
}
3586+
else{
3587+
availableWidth = headerWidth - (checkWidth + allLabelWidth+ headerNameWidth + actionWidth);
3588+
}
3589+
appCount = Math.floor((availableWidth / appListWidth));
3590+
}
3591+
3592+
var summary = this._selectionSummary.summary;
3593+
if (summary.totalFiles === 0 && summary.totalDirs === 0) {
3594+
this.$el.find('#selectedActionLabel').css('display','none');
3595+
}
3596+
else{
3597+
if(appCount < appList.length) {
3598+
this.$el.find('#selectedActionLabel').css('display','block');
3599+
}
3600+
else if(appCount == appList.length){
3601+
this.$el.find('#selectedActionLabel').css('display','none');
3602+
}
3603+
else if (!isFinite(appCount))
3604+
{
3605+
this.$el.find('#selectedActionLabel').css('display','block');
3606+
}
3607+
else if(appCount > appList.length){
3608+
this.$el.find('#selectedActionLabel').css('display','none');
3609+
}
3610+
}
3611+
3612+
for (let k = 0; k < appList.length; k++) {
3613+
if (k < appCount) {
3614+
$(appList[k]).removeClass('hidden');
3615+
} else {
3616+
$(appList[k]).addClass('hidden');
3617+
}
35013618
}
35023619
},
35033620

‎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
},

‎apps/files/js/merged-index.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"fileinfomodel.js",
1313
"filelist.js",
1414
"filemultiselectmenu.js",
15+
"filemultipleselectionmenu.js",
1516
"files.js",
1617
"filesummary.js",
1718
"gotoplugin.js",

‎apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ public function renderPage(IShare $share, string $token, string $path): Template
228228
Util::addScript('files', 'newfilemenu');
229229
Util::addScript('files', 'files');
230230
Util::addScript('files', 'filemultiselectmenu');
231+
Util::addScript('files', 'filemultipleselectionmenu');
231232
Util::addScript('files', 'filelist');
232233
Util::addScript('files', 'keyboardshortcuts');
233234
Util::addScript('files', 'operationprogressbar');

0 commit comments

Comments
 (0)