Merge pull request #13982 from nextcloud/stable15-12917-clean-code-and-fix-drop-zone-shadow

[stable15] Clean code and fix drop zone shadow

Author: MorrisJobke

apps/files/css/files.scss

@@ -699,7 +699,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);
 	}
 }
 
@@ -722,7 +722,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;
+	}
 }
 
 

apps/files/js/filelist.js

@@ -354,12 +354,8 @@
 
 			this.$fileList.on('click','td.filename>a.name, td.filesize, td.date', _.bind(this._onClickFile, this));
 
-			$.event.trigger({type: "droppedOnTrash"});
-
-			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));

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,7 +219,7 @@
 		 */
 		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);

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);
 	}
 }
 

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