IconGroup: change focused style

Author: danirabbit

data/Application.css

@@ -82,9 +82,24 @@ icongroup .icon-group-box {
         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);
 }
 
-.reduce-transparency icongroup box {
+icongroup.running .icon-group-box {
+    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 .icon-group-box {
     background: @base_color;
 }
 

src/AppSystem/Launcher.vala

@@ -25,9 +25,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.Revealer progress_revealer;
     private Gtk.Revealer badge_revealer;
+    private Gtk.Revealer running_revealer;
     private Adw.TimedAnimation bounce_up;
     private Adw.TimedAnimation bounce_down;
     private Gtk.PopoverMenu popover;
@@ -101,6 +131,24 @@ public class Dock.Launcher : BaseItem {
 
         tooltip_text = app.app_info.get_display_name ();
 
+        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 (running_revealer);
+
         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

@@ -11,6 +11,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");
+            }
+        }
+    }
+
     private Gtk.Grid grid;
 
     class construct {

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);
 
         icon_size = dock_settings.get_int ("icon-size");
         dock_settings.changed["icon-size"].connect (() => {