[gnome-shell/gbsneto/icon-grid-dnd-fixes: 4/14] appDisplay: Lighten folder dialog background when dragging out




commit 9d6d83ecf7d0a5476107fe7d6f25f936f8a837ea
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Sep 24 10:17:53 2020 -0300

    appDisplay: Lighten folder dialog background when dragging out
    
    As per design feedback, make the app folder dialog background lighter when
    hovering it with an icon. This gives the visual feedback to show that that
    region is a target.
    
    Related: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3092
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1447

 js/ui/appDisplay.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3f2f605429..a60cf41f3d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2361,6 +2361,18 @@ var AppFolderDialog = GObject.registerClass({
         return this.navigate_focus(null, direction, false);
     }
 
+    _setLighterBackground(lighter) {
+        const backgroundColor = lighter
+            ? Clutter.Color.from_pixel(0x00000055)
+            : Clutter.Color.from_pixel(0x000000cc);
+
+        this.ease({
+            backgroundColor,
+            duration: FOLDER_DIALOG_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
     _withinDialog(x, y) {
         const childExtents = this.child.get_transformed_extents();
         return childExtents.contains_point(new Graphene.Point({ x, y }));
@@ -2372,7 +2384,12 @@ var AppFolderDialog = GObject.registerClass({
 
         this._dragMonitor = {
             dragMotion: dragEvent => {
-                if (this._withinDialog(dragEvent.x, dragEvent.y)) {
+                const withinDialog =
+                    this._withinDialog(dragEvent.x, dragEvent.y);
+
+                this._setLighterBackground(!withinDialog);
+
+                if (withinDialog) {
                     this._removePopdownTimeout();
                     this._removeDragMonitor();
                 }
@@ -2396,6 +2413,7 @@ var AppFolderDialog = GObject.registerClass({
 
     handleDragOver(source, actor, x, y) {
         if (this._withinDialog(x, y)) {
+            this._setLighterBackground(false);
             this._removePopdownTimeout();
             this._removeDragMonitor();
         } else {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]