diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index d2d810c1e6c07f1f88d18162050cf7f83b144e48..bbc95d7cd6d9650f658824871fbf48966936c94d 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -169,7 +169,7 @@ table.multiselect th a {
color: #000;
}
table th .columntitle {
- display: block;
+ display: inline-block;
padding: 15px;
height: 50px;
box-sizing: border-box;
@@ -178,7 +178,6 @@ table th .columntitle {
}
table th .columntitle.name {
padding-left: 5px;
- padding-right: 80px;
margin-left: 50px;
}
@@ -474,10 +473,9 @@ a.action > img {
/* Actions for selected files */
.selectedActions {
- position: absolute;
- top: 0;
- right: 0;
+ position: relative;
}
+
.selectedActions a {
display: inline;
font-size: 11px;
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 307147076b239f31685836064a14a072491a5dd7..ec203043e4ff78b83462a8a6f2206edee135e512 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -126,7 +126,11 @@
* @type OCA.Files.FileActions
*/
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
* be rendered
@@ -271,7 +275,8 @@
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
this._detailsView = new OCA.Files.DetailsView();
this._detailsView.$el.insertBefore(this.$el);
- this._detailsView.$el.addClass('disappear');
+ // this._detailsView.$el.addClass('disappear');
+ this.showDetailsView('/');
}
this._initFileActions(options.fileActions);
@@ -288,6 +293,28 @@
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) {
this.setSort(options.sorting.mode, options.sorting.direction, false, false);
} else {
@@ -339,6 +366,10 @@
this.$el.find('.download').click(_.bind(this._onClickDownloadSelected, this));
this.$el.find('.copy-move').click(_.bind(this._onClickCopyMoveSelected, 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'});
@@ -365,6 +396,7 @@
}
}
+
OC.Plugins.attach('OCA.Files.FileList', this);
},
@@ -754,6 +786,7 @@
files = _.pluck(this.getSelectedFiles(), 'name');
}
+ // TODO: Update
var downloadFileaction = $('#selectedActionsList').find('.download');
// don't allow a second click on the download action
@@ -786,6 +819,7 @@
files = _.pluck(this.getSelectedFiles(), 'name');
+ // TODO: Update
var moveFileAction = $('#selectedActionsList').find('.move');
// don't allow a second click on the download action
@@ -2882,22 +2916,21 @@
selection += ' (' + hiddenInfo + ')';
}
+ // TODO : Change here!!
this.$el.find('#headerName a.name>span:first').text(selection);
this.$el.find('#modified a>span:first').text('');
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()) {
- $copyMove.toggleClass('hidden', false);
if (this.isSelectedMovable()) {
- $copyMove.find('.label').text(t('files', 'Move or copy'));
+ this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Move or copy'));
} else {
- $copyMove.find('.label').text(t('files', 'Copy'));
+ this.fileSelectionMenu.updateItemText('moveCopy', t('files', 'Copy'));
}
- } else {
- $copyMove.toggleClass('hidden', true);
}
}
},
diff --git a/apps/files/js/fileselectionmenu.js b/apps/files/js/fileselectionmenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cb10f08bbc30e7a528c8e744352174484562765
--- /dev/null
+++ b/apps/files/js/fileselectionmenu.js
@@ -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);
\ No newline at end of file
diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json
index 127bbb46b29d5c5bff614529a77d891aae48d0b4..05b33139e95fa7f68d8b0ec789cf53390d39976c 100644
--- a/apps/files/js/merged-index.json
+++ b/apps/files/js/merged-index.json
@@ -6,6 +6,7 @@
"jquery-visibility.js",
"fileinfomodel.js",
"filesummary.js",
+ "fileselectionmenu.js",
"breadcrumb.js",
"filelist.js",
"search.js",
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index e6b1e54d3896eb37ff8d0c43d6f902c2122095cd..9cae72a176f5b62ca856afed7058390297a1a891 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -49,20 +49,16 @@
</th>
<th id='headerName' class="hidden column-name">
<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>
- <span id="selectedActionsList" class="selectedActions">
- <a href="" class="copy-move">
- <span class="icon icon-external"></span>
- <span class="label"><?php p($l->t('Move or copy'))?></span>
- </a>
- <a href="" class="download">
- <span class="icon icon-download"></span>
- <span><?php p($l->t('Download'))?></span>
- </a>
- <a href="" class="delete-selected">
- <span class="icon icon-delete"></span>
- <span><?php p($l->t('Delete'))?></span>
- </a>
+ <a class="name sort columntitle" data-sort="name">
+ <span><?php p($l->t( 'Name' )); ?></span>
+ <span class="sort-indicator"></span>
+
+ </a>
+ <span id="selectedActionsList" class="selectedActions">
+ <a href="" class="actions-selected">
+ <span class="icon icon-more"></span>
+ <span><?php p($l->t('Actions'))?></span>
+ </a>
</span>
</div>
</th>
@@ -71,10 +67,6 @@
</th>
<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>
- <span class="selectedActions"><a href="" class="delete-selected">
- <span><?php p($l->t('Delete'))?></span>
- <span class="icon icon-delete"></span>
- </a></span>
</th>
</tr>
</thead>