Merge pull request #12917 from nextcloud/feature/noid/favorites-quickaccess-add-droppable-v3

Added Drozone to favorites quickaccess

5 files changed, 83 insertions, 35 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 502f8ea1f73..62f4431dbbb 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -120,6 +120,9 @@
 .nav-icon-deletedshares {
 	@include icon-color('unshare', 'files', $color-black);
 }
+.nav-icon-favorites-starred {
+	@include icon-color('star-dark', 'actions', $color-yellow, 2, true);
+}
 
 #app-navigation .nav-files a.nav-icon-files {
 	width: auto;
@@ -704,7 +707,7 @@ table.dragshadow td.size {
 		background-image: none;
 	}
 	& .icon-starred {
-		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
+		@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
 	}
 }
 
@@ -727,7 +730,13 @@ table.dragshadow td.size {
 
 .breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {
-	background-color: rgb(179, 230, 255);
+	background-color: rgba( $color-primary, .3 );
+}
+.dropzone-background {
+	background-color: rgba( $color-primary, .3 );
+	:hover{
+		box-shadow: none !important;
+	}
 }
 
 
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index a4402caa7cc..232b47857bb 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -360,12 +360,12 @@
 
 			this.$fileList.on('click','td.filename>a.name, td.filesize, td.date', _.bind(this._onClickFile, this));
 
-			$.event.trigger({type: "droppedOnTrash"});
+			this.$fileList.on("droppedOnFavorites", function (event, file) {
+				self.fileActions.triggerAction('Favorite', self.getModelForFile(file), self);
+			});
 
-			var self=this;
-			this.$fileList.on("droppedOnTrash", function (event, filename, directory) {
-				//self.fileActions.triggerAction('Favorite', self.getModelForFile(file), self);
-				self.do_delete(filename, directory)
+			this.$fileList.on('droppedOnTrash', function (event, filename, directory) {
+				self.do_delete(filename, directory);
 			});
 
 			this.$fileList.on('change', 'td.selection>.selectCheckBox', _.bind(this._onClickFileCheckbox, this));
diff --git a/apps/files/js/navigation.js b/apps/files/js/navigation.js
index acfda3b6ce8..f8f15394ef0 100644
--- a/apps/files/js/navigation.js
+++ b/apps/files/js/navigation.js
@@ -62,40 +62,37 @@
 		 * Setup UI events
 		 */
 		_setupEvents: function () {
-			this.$el.on('click', 'li a', _.bind(this._onClickItem, this))
+			this.$el.on('click', 'li a', _.bind(this._onClickItem, this));
 			this.$el.on('click', 'li button', _.bind(this._onClickMenuButton, this));
 
-			var trashElement=$(".nav-trashbin");
-
-			//this div is required to prefetch the icon, otherwise it takes a second to show up
-			trashElement.append("<div class='nav-icon-trashbin-starred'></div>")
-			trashElement.droppable({
-				over: function( event, ui ) {
-					trashElement.addClass('dropzone-background')
+			var trashBinElement = $('.nav-trashbin');
+			trashBinElement.droppable({
+				over: function (event, ui) {
+					trashBinElement.addClass('dropzone-background');
 				},
-				out: function( event, ui ) {
-					trashElement.removeClass('dropzone-background');
+				out: function (event, ui) {
+					trashBinElement.removeClass('dropzone-background');
 				},
-				activate: function( event, ui ) {
-					var elem=trashElement.find("a").first();
-					elem.addClass('nav-icon-trashbin-starred').removeClass('nav-icon-trashbin');
+				activate: function (event, ui) {
+					var element = trashBinElement.find('a').first();
+					element.addClass('nav-icon-trashbin-starred').removeClass('nav-icon-trashbin');
 				},
-				deactivate: function( event, ui ) {
-					var elem=trashElement.find("a").first();
-					elem.addClass('nav-icon-trashbin').removeClass('nav-icon-trashbin-starred');
+				deactivate: function (event, ui) {
+					var element = trashBinElement.find('a').first();
+					element.addClass('nav-icon-trashbin').removeClass('nav-icon-trashbin-starred');
 				},
-				drop: function( event, ui ) {
+				drop: function (event, ui) {
+					trashBinElement.removeClass('dropzone-background');
 
 					var $selectedFiles = $(ui.draggable);
 
-					if (ui.helper.find("tr").size()===1) {
-						var $tr = $selectedFiles.closest('tr');
-						$selectedFiles.trigger("droppedOnTrash", $tr.attr("data-file"), $tr.attr('data-dir'));
-					}else{
-						var item = ui.helper.find("tr");
-						for(var i=0; i<item.length;i++){
-							$selectedFiles.trigger("droppedOnTrash", item[i].getAttribute("data-file"), item[i].getAttribute("data-dir"));
-						}
+					// FIXME: when there are a lot of selected files the helper
+					// contains only a subset of them; the list of selected
+					// files should be gotten from the file list instead to
+					// ensure that all of them are removed.
+					var item = ui.helper.find('tr');
+					for (var i = 0; i < item.length; i++) {
+						$selectedFiles.trigger('droppedOnTrash', item[i].getAttribute('data-file'), item[i].getAttribute('data-dir'));
 					}
 				}
 			});
@@ -222,11 +219,52 @@
 		 */
 		setInitialQuickaccessSettings: function () {
 			var quickAccessKey = this.$quickAccessListKey;
-			var quickAccessMenu = document.getElementById(quickAccessKey)
+			var quickAccessMenu = document.getElementById(quickAccessKey);
 			if (quickAccessMenu) {
 				var list = quickAccessMenu.getElementsByTagName('li');
 				this.QuickSort(list, 0, list.length - 1);
 			}
+
+			var favoritesListElement = $(quickAccessMenu).parent();
+			favoritesListElement.droppable({
+				over: function (event, ui) {
+					favoritesListElement.addClass('dropzone-background');
+				},
+				out: function (event, ui) {
+					favoritesListElement.removeClass('dropzone-background');
+				},
+				activate: function (event, ui) {
+					var element = favoritesListElement.find('a').first();
+					element.addClass('nav-icon-favorites-starred').removeClass('nav-icon-favorites');
+				},
+				deactivate: function (event, ui) {
+					var element = favoritesListElement.find('a').first();
+					element.addClass('nav-icon-favorites').removeClass('nav-icon-favorites-starred');
+				},
+				drop: function (event, ui) {
+					favoritesListElement.removeClass('dropzone-background');
+
+					var $selectedFiles = $(ui.draggable);
+
+					if (ui.helper.find('tr').size() === 1) {
+						var $tr = $selectedFiles.closest('tr');
+						if ($tr.attr("data-favorite")) {
+							return;
+						}
+						$selectedFiles.trigger('droppedOnFavorites', $tr.attr('data-file'));
+					} else {
+						// FIXME: besides the issue described for dropping on
+						// the trash bin, for favoriting it is not possible to
+						// use the data from the helper; due to some bugs the
+						// tags are not always added to the selected files, and
+						// thus that data can not be accessed through the helper
+						// to prevent triggering the favorite action on an
+						// already favorited file (which would remove it from
+						// favorites).
+						OC.Notification.showTemporary(t('files', 'You can only favorite a single file or folder at a time'));
+					}
+				}
+			});
 		},
 
 		/**
diff --git a/core/css/icons.scss b/core/css/icons.scss
index d761c3a974f..222b505b3a6 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -282,13 +282,13 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
 	&:focus {
 		@include icon-color('star', 'actions', $color-black, 1, true);
 	}
-	@include icon-color('star-dark', 'actions', 'FC0', 1, true);
+	@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
 }
 
 .icon-star {
 	&:hover,
 	&:focus {
-		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
+		@include icon-color('star-dark', 'actions', $color-yellow, 1, true);
 	}
 }
 
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 404fa8743f2..d3592032e57 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -53,6 +53,7 @@ $color-success: #46ba61;
 // used for svg
 $color-white: #fff;
 $color-black: #000;
+$color-yellow: #FC0;
 
 // rgb(118, 118, 118) / #767676
 // min. color contrast for normal text on white background according to WCAG AA