From d3ff3c589bd36ea68f7d723ffda5c06e474f779e Mon Sep 17 00:00:00 2001 From: Pellaeon Lin Date: Thu, 29 Oct 2015 21:41:37 +0800 Subject: [PATCH 1/3] Add visual cue when moving draggable item over droppable item, ie. breadcrumb and filenameTd --- apps/files/css/files.css | 4 ++++ apps/files/js/breadcrumb.js | 3 ++- core/css/styles.css | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 373739071e9..9da46aaeede 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -828,3 +828,7 @@ html.ie8 #controls .button.new { .app-files .actions .button.new .icon { margin-bottom: 2px; } + +.canDrop { + background-color: rgba(255, 255, 140, 1); +} diff --git a/apps/files/js/breadcrumb.js b/apps/files/js/breadcrumb.js index 58ac9924ef7..98de7aa374c 100644 --- a/apps/files/js/breadcrumb.js +++ b/apps/files/js/breadcrumb.js @@ -133,7 +133,8 @@ drop: this.onDrop, over: this.onOver, out: this.onOut, - tolerance: 'pointer' + tolerance: 'pointer', + hoverClass: 'canDrop' }); } diff --git a/core/css/styles.css b/core/css/styles.css index 736ddc6be01..0362b8b030f 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -856,7 +856,7 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;} div.crumb { float: left; display: block; - background: url('../img/breadcrumb.svg') no-repeat right center; + background-image: url('../img/breadcrumb.svg') no-repeat right center; height: 44px; background-size: auto 24px; } From 72ac5dd8a117a95f9e3f0bfdc33247a27e38c263 Mon Sep 17 00:00:00 2001 From: Pellaeon Lin Date: Sat, 12 Mar 2016 11:29:59 +0800 Subject: [PATCH 2/3] Make entire file tr droppable, so that .canDrop will highlight the entire row when drag hover --- apps/files/css/files.css | 3 ++- apps/files/js/filelist.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 9da46aaeede..94eafe27520 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -829,6 +829,7 @@ html.ie8 #controls .button.new { margin-bottom: 2px; } -.canDrop { +.canDrop, +#filestable tbody tr.canDrop { background-color: rgba(255, 255, 140, 1); } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index ef29a4844bf..6c482e8834a 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1322,7 +1322,7 @@ } // allow dropping on folders if (this._folderDropOptions && mime === 'httpd/unix-directory') { - filenameTd.droppable(this._folderDropOptions); + tr.droppable(this._folderDropOptions); } if (options.hidden) { From 56241afad790a05bf7d5e2eeedb4ebc05de2cfa7 Mon Sep 17 00:00:00 2001 From: Pellaeon Lin Date: Sat, 12 Mar 2016 11:31:58 +0800 Subject: [PATCH 3/3] Fix breadcrumb background right arrow due to incorrect background-image syntax --- core/css/styles.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/core/css/styles.css b/core/css/styles.css index 0362b8b030f..2f83b9912c0 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -856,7 +856,9 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;} div.crumb { float: left; display: block; - background-image: url('../img/breadcrumb.svg') no-repeat right center; + background-image: url('../img/breadcrumb.svg'); + background-repeat: no-repeat; + background-position: right center; height: 44px; background-size: auto 24px; }