IconGroup: change focused style

data/Application.css

@@ -92,6 +92,21 @@ icongroup .icon-group-bin {
         0 1px 4px alpha(@borders, 0.4);
     border-radius: 6px;
     border-spacing: 3px;
+    transition:
+        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+icongroup.running .icon-group-bin {
+    background: alpha(@base_color, 0.7);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(@highlight_color, 0.2),
+        inset 0 1px 0 0 alpha(@highlight_color, 0.3),
+        inset 1px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -1px 0 0 0 alpha(@highlight_color, 0.07),
+        0 0 0 1px alpha(@borders, 0.3),
+        0 4px 6px -1px alpha(@borders, 0.8),
+        0 3px 2px -1px alpha(@borders, 0.6);
 }
 
 .reduce-transparency icongroup bin {

src/AppSystem/Launcher.vala

@@ -31,9 +31,39 @@ public class Dock.Launcher : BaseItem {
 
     public App app { get; construct; }
 
+    private bool _moving;
+    public new bool moving {
+        get { return _moving; }
+        set {
+            _moving = value;
+
+            if (value) {
+                bin.width_request = bin.get_width ();
+                bin.height_request = bin.get_height ();
+            } else {
+                bin.width_request = -1;
+                bin.height_request = -1;
+            }
+
+            overlay.visible = !value;
+            running_revealer.reveal_child = !value && state != HIDDEN;
+        }
+    }
+
+    private State _state;
+    public new State state {
+        get { return _state; }
+        set {
+            _state = value;
+            running_revealer.reveal_child = (value != HIDDEN) && !moving;
+            running_revealer.sensitive = value == ACTIVE;
+        }
+    }
+
     private Gtk.Image image;
     private Gtk.Label badge;
     private Gtk.Revealer progress_revealer;
+    private Gtk.Revealer running_revealer;
     private Adw.TimedAnimation badge_fade;
     private Adw.TimedAnimation badge_scale;
     private Adw.TimedAnimation bounce_up;
@@ -129,6 +159,24 @@ public class Dock.Launcher : BaseItem {
         overlay.add_overlay (badge_container);
         overlay.add_overlay (progress_revealer);
 
+        var running_indicator = new Gtk.Image.from_icon_name ("pager-checked-symbolic");
+        running_indicator.add_css_class ("running-indicator");
+
+        running_box = new Gtk.Box (HORIZONTAL, 0) {
+            halign = CENTER
+        };
+        running_box.append (running_indicator);
+
+        running_revealer = new Gtk.Revealer () {
+            can_target = false,
+            child = running_box,
+            overflow = VISIBLE,
+            transition_type = CROSSFADE,
+            valign = END
+        };
+
+        insert_child_after (running_revealer, bin);
+
         insert_action_group (ACTION_GROUP_PREFIX, app.action_group);
 
         // We have to destroy the progressbar when it is not needed otherwise it will

src/BaseIconGroup.vala

@@ -9,6 +9,20 @@ public abstract class Dock.BaseIconGroup : BaseItem {
 
     public ListModel icons { get; construct; }
 
+    private State _state;
+    public new State state {
+        get { return _state; }
+        set {
+            _state = value;
+
+            if ((value != HIDDEN) && !moving) {
+                add_css_class ("running");
+            } else if (has_css_class ("running")) {
+                remove_css_class ("running");
+            }
+        }
+    }
+
     class construct {
         set_css_name ("icongroup");
     }

src/BaseItem.vala

@@ -49,7 +49,6 @@ public class Dock.BaseItem : Gtk.Box {
             }
 
             overlay.visible = !value;
-            running_revealer.reveal_child = !value && state != HIDDEN;
         }
     }
 
@@ -58,17 +57,14 @@ public class Dock.BaseItem : Gtk.Box {
         get { return _state; }
         set {
             _state = value;
-            running_revealer.reveal_child = (value != HIDDEN) && !moving;
-            running_revealer.sensitive = value == ACTIVE;
         }
     }
 
     protected Gtk.Overlay overlay;
     protected Gtk.GestureClick gesture_click;
     protected Gtk.Box running_box;
 
-    private Granite.Bin bin;
-    private Gtk.Revealer running_revealer;
+    protected Granite.Bin bin { get; private set; }
 
     private Adw.TimedAnimation fade;
     private Adw.TimedAnimation reveal;
@@ -89,24 +85,7 @@ public class Dock.BaseItem : Gtk.Box {
             child = overlay
         };
 
-        var running_indicator = new Gtk.Image.from_icon_name ("pager-checked-symbolic");
-        running_indicator.add_css_class ("running-indicator");
-
-        running_box = new Gtk.Box (HORIZONTAL, 0) {
-            halign = CENTER
-        };
-        running_box.append (running_indicator);
-
-        running_revealer = new Gtk.Revealer () {
-            can_target = false,
-            child = running_box,
-            overflow = VISIBLE,
-            transition_type = CROSSFADE,
-            valign = END
-        };
-
         append (bin);
-        append (running_revealer);
         append (new BottomMargin ());
 
         icon_size = dock_settings.get_int ("icon-size");