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 {

data/dock.metainfo.xml.in

@@ -31,6 +31,7 @@
       <issues>
         <issue url="https://github.com/elementary/dock/issues/259">Dock is sometimes hard to see</issue>
         <issue url="https://github.com/elementary/dock/issues/341">Increase actionable area of an app icon all way to the screen edge</issue>
+        <issue url="https://github.com/elementary/dock/issues/399">Workspace icons are a little larger than normal</issue>
         <issue url="https://github.com/elementary/dock/issues/465">Replace dock bubble animation</issue>
       </issues>
     </release>

src/AppSystem/Launcher.vala

@@ -31,9 +31,11 @@ public class Dock.Launcher : BaseItem {
 
     public App app { get; construct; }
 
+    private Gtk.Box running_box;
     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 +131,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
@@ -272,6 +292,15 @@ public class Dock.Launcher : BaseItem {
         app.notify["running"].connect (update_active_state);
         update_active_state ();
 
+        notify["moving"].connect (() => {
+            running_revealer.reveal_child = !moving && state != HIDDEN;
+        });
+
+        notify["state"].connect (() => {
+            running_revealer.reveal_child = (state != HIDDEN) && !moving;
+            running_revealer.sensitive = state == ACTIVE;
+        });
+
         var drop_controller_motion = new Gtk.DropControllerMotion ();
         add_controller (drop_controller_motion);
         drop_controller_motion.enter.connect (queue_dnd_cycle);

src/BaseIconGroup.vala

@@ -33,6 +33,14 @@ public abstract class Dock.BaseIconGroup : BaseItem {
         bind_property ("icon-size", bin, "height-request", SYNC_CREATE);
 
         overlay.child = bin;
+
+        notify["state"].connect (() => {
+            if ((state != HIDDEN) && !moving) {
+                add_css_class ("running");
+            } else if (has_css_class ("running")) {
+                remove_css_class ("running");
+            }
+        });
     }
 
     private Gtk.Widget create_flow_box_child (Object? item) {

src/BaseItem.vala

@@ -49,26 +49,15 @@ public class Dock.BaseItem : Gtk.Box {
             }
 
             overlay.visible = !value;
-            running_revealer.reveal_child = !value && state != HIDDEN;
         }
     }
 
-    private State _state;
-    public State state {
-        get { return _state; }
-        set {
-            _state = value;
-            running_revealer.reveal_child = (value != HIDDEN) && !moving;
-            running_revealer.sensitive = value == ACTIVE;
-        }
-    }
+    public State state { get; set; }
 
     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 +78,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");