Adds an action dropdown that is shown on file selection.

Signed-off-by: Abijeet <abijeetpatro@gmail.com>

5 files changed, 157 insertions, 33 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index d2d810c1e6c..bbc95d7cd6d 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 307147076b2..ec203043e4f 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 00000000000..8cb10f08bbc
--- /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 127bbb46b29..05b33139e95 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 e6b1e54d389..9cae72a176f 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>