Moved all hardcoded icon sizes to CSS (#565)

data/style/style.scss

@@ -14,6 +14,10 @@
   --text-color-disabled: rgb(150, 150, 150);
 
   --bg-selected: rgb(0, 128, 255);
+
+  --notification-icon-size: 64px;
+  --notification-app-icon-size: var(--notification-icon-size) / 3;
+  --notification-group-icon-size: 32px;
 }
 
 $border: 1px solid var(--noti-border-color);
@@ -113,12 +117,14 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
           .image {
             /* Notification Primary Image */
             -gtk-icon-filter: none;
+            -gtk-icon-size: var(--notification-icon-size);
             border-radius: 100px; /* Size in px */
             margin: $margin;
           }
           .app-icon {
             /* Notification app icon (only visible when the primary image is set) */
             -gtk-icon-filter: none;
+            -gtk-icon-size: var(--notification-app-icon-size);
             -gtk-icon-shadow: 0 1px 4px black;
             margin: 6px;
           }
@@ -254,6 +260,7 @@ $notification-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
 
     .notification-group-icon {
       color: var(--text-color);
+      -gtk-icon-size: var(--notification-group-icon-size);
     }
     .notification-group-header {
       color: var(--text-color);

data/style/widgets/mpris.scss

 :root {
   --mpris-album-art-overlay: rgba(0, 0, 0, 0.55);
   --mpris-button-hover: rgba(0, 0, 0, 0.5);
+  --mpris-album-art-icon-size: 96px;
 }
 
 $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
@@ -30,7 +31,7 @@ $mpris-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
       .widget-mpris-album-art {
         border-radius: $border-radius;
         box-shadow: $mpris-shadow;
-        -gtk-icon-size: 96px;
+        -gtk-icon-size: var(--mpris-album-art-icon-size);
       }
       .widget-mpris-title {
         font-weight: bold;

data/style/widgets/volume.scss

+:root {
+  --widget-volume-row-icon-size: 24px;
+}
+
 .widget-volume {
   padding: $margin;
   margin: $margin;
@@ -7,6 +11,11 @@
 .widget-volume > box > button {
 }
 
+/* Each row app icon */
+.widget-volume row image {
+  -gtk-icon-size: var(--widget-volume-row-icon-size);
+}
+
 .per-app-volume {
   background-color: var(--noti-bg-alt);
   padding: $margin/2 $margin $margin $margin;

data/ui/mpris_player.blp

@@ -2,7 +2,7 @@ using Gtk 4.0;
 
 template $SwayNotificationCenterWidgetsMprisMprisPlayer: $Underlay {
   overflow: hidden;
-  valign: start;
+  valign: fill;
   hexpand: true;
 
   underlay_child: Picture background_picture {
@@ -21,6 +21,7 @@ template $SwayNotificationCenterWidgetsMprisMprisPlayer: $Underlay {
     ]
 
     Box {
+      vexpand: true;
       spacing: 12;
 
       Image album_art {

src/configModel/configModel.vala

@@ -586,17 +586,9 @@ namespace SwayNotificationCenter {
         /**
          * Notification icon size, in pixels.
          */
-        private const int NOTIFICATION_ICON_MINIMUM_SIZE = 16;
-        private const int NOTIFICATION_ICON_DEFAULT_SIZE = 64;
-        private int _notification_icon_size = NOTIFICATION_ICON_DEFAULT_SIZE;
+        [Version (deprecated = true, replacement = "CSS root variable")]
         public int notification_icon_size {
-            get {
-                return _notification_icon_size;
-            }
-            set {
-                _notification_icon_size = value > NOTIFICATION_ICON_MINIMUM_SIZE
-                    ? value : NOTIFICATION_ICON_MINIMUM_SIZE;
-            }
+            get; set; default = -1;
         }
 
         /**

src/configSchema.json

@@ -97,9 +97,9 @@
     },
     "notification-icon-size": {
       "type": "integer",
-      "description": "The notification icon size (in pixels). The app icon size is 1/3",
-      "default": 64,
-      "minimum": 16
+      "deprecated": true,
+      "description": "deprecated (change the CSS root variable \"--notification-icon-size\"): The notification icon size (in pixels). The app icon size is 1/3",
+      "default": -1
     },
     "notification-body-image-height": {
       "type": "integer",
@@ -412,8 +412,9 @@
       "properties": {
         "image-size": {
           "type": "integer",
-          "description": "The size of the album art",
-          "default": 96
+          "deprecated": true,
+          "description": "deprecated (change the CSS root variable \"--mpris-album-art-icon-size\"): The size of the album art",
+          "default": -1
         }
       }
     },
@@ -556,8 +557,9 @@
         },
         "icon-size": {
           "type": "integer",
-          "default": 24,
-          "description": "Size of the application icon in per app volume control"
+          "deprecated": true,
+          "default": -1,
+          "description": "deprecated (change the CSS root variable \"--widget-volume-row-icon-size\"): Size of the application icon in per app volume control"
         },
         "animation-type": {
           "type": "string",

src/controlCenter/widgets/mpris/mpris.vala

 namespace SwayNotificationCenter.Widgets.Mpris {
     public struct Config {
+        [Version (deprecated = true, replacement = "CSS root variable")]
         int image_size;
         bool autohide;
         string[] blacklist;
@@ -27,7 +28,7 @@ namespace SwayNotificationCenter.Widgets.Mpris {
 
         // Default config values
         Config mpris_config = Config () {
-            image_size = 96,
+            image_size = -1,
             autohide = false,
         };
 
@@ -81,8 +82,11 @@ namespace SwayNotificationCenter.Widgets.Mpris {
             Json.Object ? config = get_config (this);
             if (config != null) {
                 // Get image-size
-                int? image_size = get_prop<int> (config, "image-size");
-                if (image_size != null) mpris_config.image_size = image_size;
+                bool image_size_found;
+                int? image_size = get_prop<int> (config, "image-size", out image_size_found);
+                if (image_size_found && image_size != null) {
+                    mpris_config.image_size = image_size;
+                }
 
                 Json.Array ? blacklist = get_prop_array (config, "blacklist");
                 if (blacklist != null) {

src/controlCenter/widgets/mpris/mpris_player.vala

@@ -269,11 +269,16 @@ namespace SwayNotificationCenter.Widgets.Mpris {
                 }
                 if (album_art_texture != null) {
                     // Set album art
+                    int icon_size = mpris_config.image_size;
+                    if (icon_size < 0) {
+                        icon_size = album_art_texture.width > album_art_texture.height
+                            ? album_art_texture.height : album_art_texture.width;
+                    }
                     Gtk.Snapshot snapshot = new Gtk.Snapshot ();
                     Functions.scale_texture (album_art_texture,
-                                             mpris_config.image_size, mpris_config.image_size,
+                                             icon_size, icon_size,
                                              get_scale_factor (), snapshot);
-                    Graphene.Size size = Graphene.Size ().init (mpris_config.image_size, mpris_config.image_size);
+                    Graphene.Size size = Graphene.Size ().init (icon_size, icon_size);
                     album_art.set_from_paintable (snapshot.free_to_paintable (size));
 
                     // Set background album art
@@ -291,21 +296,22 @@ namespace SwayNotificationCenter.Widgets.Mpris {
             }
             unowned Gtk.IconTheme icon_theme = Gtk.IconTheme.get_for_display (get_display ());
             if (icon != null) {
-                album_art.set_from_gicon (icon);
-
                 Gtk.IconPaintable ? icon_info = icon_theme.lookup_by_gicon (
-                    icon, mpris_config.image_size, get_scale_factor (), Gtk.TextDirection.NONE, 0);
-                background_picture.set_paintable (icon_info);
-            } else {
-                // Default icon
-                string icon_name = "audio-x-generic-symbolic";
-                album_art.set_from_icon_name (icon_name);
-
-                Gtk.IconPaintable ? icon_info = icon_theme.lookup_icon (
-                    icon_name, null, mpris_config.image_size, get_scale_factor (),
-                    Gtk.TextDirection.NONE, 0);
-                background_picture.set_paintable (icon_info);
+                    icon, 128, get_scale_factor (), Gtk.TextDirection.NONE, 0);
+                if (icon_info != null) {
+                    album_art.set_from_gicon (icon);
+                    background_picture.set_paintable (icon_info);
+                    return;
+                }
             }
+
+            // Default icon
+            string icon_name = "audio-x-generic-symbolic";
+            album_art.set_from_icon_name (icon_name);
+            Gtk.IconPaintable ? icon_info = icon_theme.lookup_icon (
+                icon_name, null, 128, get_scale_factor (),
+                Gtk.TextDirection.NONE, 0);
+            background_picture.set_paintable (icon_info);
         }
 
         private void update_button_shuffle (HashTable<string, Variant> metadata) {

src/controlCenter/widgets/volume/sinkInputRow.vala

@@ -26,7 +26,7 @@ namespace SwayNotificationCenter.Widgets {
             scale.draw_value = false;
             scale.set_hexpand (true);
 
-            icon.pixel_size = icon_size;
+            icon.set_pixel_size (icon_size);
 
             container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
 

src/controlCenter/widgets/volume/volume.vala

@@ -20,7 +20,9 @@ namespace SwayNotificationCenter.Widgets {
 
         string ? expand_label = null;
         string ? collapse_label = null;
-        int icon_size = 24;
+
+        [Version (deprecated = true, replacement = "CSS root variable")]
+        int icon_size = -1;
 
         Gtk.RevealerTransitionType revealer_type = Gtk.RevealerTransitionType.SLIDE_DOWN;
         int revealer_duration = 250;
@@ -124,8 +126,8 @@ namespace SwayNotificationCenter.Widgets {
 
                 foreach (var item in this.client.active_sinks.values) {
                     SinkInputRow row = new SinkInputRow (item, client,
-                                                             icon_size, show_per_app_icon,
-                                                             show_per_app_label);
+                                                         icon_size, show_per_app_icon,
+                                                         show_per_app_label);
                     list_box_controller.append (row);
                 }
 

src/functions.vala

@@ -30,7 +30,6 @@ namespace SwayNotificationCenter {
 
         public static void set_image_uri (owned string uri,
                                           Gtk.Image img,
-                                          int icon_size,
                                           bool file_exists,
                                           bool is_theme_icon = false) {
             const string URI_PREFIX = "file://";
@@ -59,8 +58,7 @@ namespace SwayNotificationCenter {
         }
 
         public static void set_image_data (ImageData data,
-                                           Gtk.Image img,
-                                           int icon_size) {
+                                           Gtk.Image img) {
             Gdk.MemoryFormat format = Gdk.MemoryFormat.R8G8B8;
             if (data.has_alpha) {
                 format = Gdk.MemoryFormat.R8G8B8A8;

src/notification/notification.vala

@@ -103,8 +103,6 @@ namespace SwayNotificationCenter {
         private bool default_action_down = false;
         private bool default_action_in = false;
 
-        private int notification_icon_size { get; default = ConfigModel.instance.notification_icon_size; }
-
         private int notification_body_image_height {
             get;
             default = ConfigModel.instance.notification_body_image_height;
@@ -696,10 +694,11 @@ namespace SwayNotificationCenter {
                 return;
             }
 
+            int notification_icon_size = ConfigModel.instance.notification_icon_size.clamp (-1, int.MAX);
             img.set_pixel_size (notification_icon_size);
             img.height_request = notification_icon_size;
             img.width_request = notification_icon_size;
-            int app_icon_size = notification_icon_size / 3;
+            int app_icon_size = (notification_icon_size / 3).clamp (-1, int.MAX);
             img_app_icon.set_pixel_size (app_icon_size);
 
             bool img_path_is_theme_icon = false;
@@ -724,25 +723,21 @@ namespace SwayNotificationCenter {
 
             // Set the main image to the provided image
             if (param.image_data.is_initialized) {
-                Functions.set_image_data (param.image_data, img,
-                                          notification_icon_size);
+                Functions.set_image_data (param.image_data, img);
             } else if (param.image_path != null &&
                        param.image_path != "" &&
                        img_path_exists) {
                 Functions.set_image_uri (param.image_path, img,
-                                         notification_icon_size,
                                          img_path_exists,
                                          img_path_is_theme_icon);
             } else if (param.icon_data.is_initialized) {
-                Functions.set_image_data (param.icon_data, img,
-                                          notification_icon_size);
+                Functions.set_image_data (param.icon_data, img);
             }
 
             if (img.storage_type == Gtk.ImageType.EMPTY) {
                 // Get the app icon
                 if (app_icon_uri != null) {
                     Functions.set_image_uri (app_icon_uri, img,
-                                              notification_icon_size,
                                               app_icon_exists);
                 } else if (app_icon_name != null) {
                     img.set_from_gicon (app_icon_name);
@@ -756,7 +751,6 @@ namespace SwayNotificationCenter {
                 // We only set the app icon if the main image is set
                 if (app_icon_uri != null) {
                     Functions.set_image_uri (app_icon_uri, img_app_icon,
-                                             app_icon_size,
                                              app_icon_exists);
                 } else if (app_icon_name != null) {
                     img_app_icon.set_from_gicon (app_icon_name);

src/notificationGroup/notificationGroup.vala

@@ -85,7 +85,6 @@ namespace SwayNotificationCenter {
             start_box.add_css_class ("notification-group-headers");
             // App Icon
             app_icon = new Gtk.Image ();
-            app_icon.set_pixel_size (32);
             app_icon.set_valign (Gtk.Align.CENTER);
             app_icon.add_css_class ("notification-group-icon");
             start_box.append (app_icon);