Skip to content

X
ximper-shell-notification-center
Unverified Commit 6f1bf432 authored by Erik Reider's avatar Erik Reider Committed by GitHub
Browse files
Options

Moved all hardcoded icon sizes to CSS (#565)

* Moved Notification icon sizes to CSS * Added Notification group app icon size to CSS * Moved MPRIS icon sizes to CSS * Moved Volume widget icon sizes to CSS
parent 8fe365a0
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 55 deletions
data/style/style.scss
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
: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
View file @ 6f1bf432
: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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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
View file @ 6f1bf432
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment