From 2ae6c762e98bc9555c41065ac9f86843997725ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 13 Oct 2026 12:05:07 -0700 Subject: [PATCH 1/5] Use Granite.Box and css spacing --- src/Indicator/Indicator.vala | 29 ++++++++++++------- src/Indicator/Widgets/DisplayWidget.vala | 9 +++++- .../Widgets/IndicatorGroupWidget.vala | 15 +++++----- src/Indicator/Widgets/IndicatorWidget.vala | 14 ++------- .../Widgets/IndicatorWidgetBandwidth.vala | 6 ++-- .../Widgets/IndicatorWidgetFrequency.vala | 8 ++--- .../Widgets/IndicatorWidgetPercentage.vala | 15 +++++----- .../Widgets/IndicatorWidgetTemperature.vala | 6 ++-- 8 files changed, 53 insertions(+), 49 deletions(-) diff --git a/src/Indicator/Indicator.vala b/src/Indicator/Indicator.vala index 96f42dcdf..859fe235b 100644 --- a/src/Indicator/Indicator.vala +++ b/src/Indicator/Indicator.vala @@ -76,16 +76,25 @@ public class Monitor.Indicator : Wingpanel.Indicator { public void apply_custom_styles () throws GLib.Error { var provider = new Gtk.CssProvider (); string css = """ - .composited-indicator > revealer label.monitor-indicator-label-warning { - color: @warning_color; - } - .composited-indicator > revealer label.monitor-indicator-label-critical { - color: @error_color; - } - .monitor-indicator-icon { - margin-right: 0.4em; - margin-left: 0.7em; - } + monitor-indicator-group { + font-size: 0.9rem; + } + + monitor-indicator-group image:dir(ltr) { + margin-right: 0.5em; + } + + monitor-indicator-group image:dir(rtl) { + margin-left: 0.5em; + } + + monitor-indicator-group label:dir(ltr) { + margin-left: 0.5em; + } + + monitor-indicator-group label:dir(rtl) { + margin-right: 0.5em; + } """; provider.load_from_string (css); diff --git a/src/Indicator/Widgets/DisplayWidget.vala b/src/Indicator/Widgets/DisplayWidget.vala index 4faf74618..a9e2f0406 100644 --- a/src/Indicator/Widgets/DisplayWidget.vala +++ b/src/Indicator/Widgets/DisplayWidget.vala @@ -3,7 +3,14 @@ * SPDX-FileCopyrightText: 2025 elementary, Inc. (https://elementary.io) */ -public class Monitor.Widgets.DisplayWidget : Gtk.Box { +public class Monitor.Widgets.DisplayWidget : Granite.Box { + public DisplayWidget () { + Object ( + child_spacing: Granite.Box.Spacing.SINGLE, + orientation: Gtk.Orientation.HORIZONTAL + ); + } + construct { valign = Gtk.Align.CENTER; diff --git a/src/Indicator/Widgets/IndicatorGroupWidget.vala b/src/Indicator/Widgets/IndicatorGroupWidget.vala index df32b7303..9fffda77f 100644 --- a/src/Indicator/Widgets/IndicatorGroupWidget.vala +++ b/src/Indicator/Widgets/IndicatorGroupWidget.vala @@ -4,32 +4,31 @@ */ public class Monitor.IndicatorGroupWidget : Gtk.Box { - public string icon_name { get; construct; } public bool revealed { get; set; } protected Gtk.Label label; public IndicatorGroupWidget (string icon_name) { - Object ( - orientation: Gtk.Orientation.HORIZONTAL, - icon_name: icon_name - ); + Object (icon_name: icon_name); + } + + class construct { + set_css_name ("monitor-indicator-group"); } construct { var icon = new Gtk.Image.from_icon_name (icon_name); - icon.add_css_class ("monitor-indicator-icon"); base.append (icon); } public new void append (IndicatorWidget widget) { var revealer = new Gtk.Revealer () { child = widget, - transition_type = Gtk.RevealerTransitionType.SLIDE_LEFT, + transition_type = SLIDE_LEFT, }; widget.bind_property ("revealed", revealer, "reveal-child", DEFAULT); + base.append (revealer); } - } diff --git a/src/Indicator/Widgets/IndicatorWidget.vala b/src/Indicator/Widgets/IndicatorWidget.vala index 299c4e663..0d9da2643 100644 --- a/src/Indicator/Widgets/IndicatorWidget.vala +++ b/src/Indicator/Widgets/IndicatorWidget.vala @@ -4,24 +4,14 @@ */ public class Monitor.IndicatorWidget : Gtk.Box { - protected Gtk.Label label; public bool revealed { get; set; } - public IndicatorWidget () { - Object ( - orientation: Gtk.Orientation.HORIZONTAL - ); - } - construct { label = new Gtk.Label (Utils.NOT_AVAILABLE) { - margin_start = 2, - margin_end = 2, - margin_top = 2, - margin_bottom = 2, - width_chars = 4, + valign = BASELINE_CENTER }; + label.add_css_class (Granite.CssClass.NUMERIC); append (label); } diff --git a/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala b/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala index 78b8823c7..81752b7a1 100644 --- a/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala +++ b/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala @@ -4,12 +4,12 @@ */ public class Monitor.IndicatorWidgetBandwidth : Monitor.IndicatorWidget { + construct { + label.width_chars = 9; + } public override void update_label (Value value) { uint64 bandwidth = value.get_uint64 (); - - label.add_css_class (Granite.CssClass.NUMERIC); - label.width_chars = 9; label.label = "%s".printf (Utils.Strings.format_network_speed (bandwidth)); } } diff --git a/src/Indicator/Widgets/IndicatorWidgetFrequency.vala b/src/Indicator/Widgets/IndicatorWidgetFrequency.vala index 4293150d8..17e908091 100644 --- a/src/Indicator/Widgets/IndicatorWidgetFrequency.vala +++ b/src/Indicator/Widgets/IndicatorWidgetFrequency.vala @@ -4,12 +4,12 @@ */ public class Monitor.IndicatorWidgetFrequency : Monitor.IndicatorWidget { + construct { + label.width_chars = 7; + } -public override void update_label (Value value) { + public override void update_label (Value value) { double frequency = value.get_double (); - - label.add_css_class (Granite.CssClass.NUMERIC); - label.width_chars = 7; label.label = "%s".printf (Utils.Strings.format_frequency (frequency)); } } diff --git a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala index 4e35cb952..003d7e915 100644 --- a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala +++ b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala @@ -4,22 +4,21 @@ */ public class Monitor.IndicatorWidgetPercentage : Monitor.IndicatorWidget { - public override void update_label (Value value) { uint percentage = value.get_uint (); - label.add_css_class (Granite.CssClass.NUMERIC); label.label = "%u%%".printf (percentage); - label.remove_css_class ("monitor-indicator-label-warning"); - label.remove_css_class ("monitor-indicator-label-critical"); + if (percentage > 90) { + label.css_classes = {"Granite.CssClass.ERROR"}; + return; + } if (percentage > 80) { - label.add_css_class ("monitor-indicator-label-warning"); + label.css_classes = {"Granite.CssClass.WARNING"}; + return; } - if (percentage > 90) { - label.add_css_class ("monitor-indicator-label-critical"); - } + label.css_classes = {""}; } } diff --git a/src/Indicator/Widgets/IndicatorWidgetTemperature.vala b/src/Indicator/Widgets/IndicatorWidgetTemperature.vala index a64a387e8..49f5e3dd3 100644 --- a/src/Indicator/Widgets/IndicatorWidgetTemperature.vala +++ b/src/Indicator/Widgets/IndicatorWidgetTemperature.vala @@ -4,12 +4,12 @@ */ public class Monitor.IndicatorWidgetTemperature : Monitor.IndicatorWidget { + construct { + label.width_chars = 3; + } public override void update_label (Value value) { int temperature = value.get_int (); - - label.add_css_class (Granite.CssClass.NUMERIC); - label.width_chars = 3; label.label = "%i℃".printf (temperature); } } From 554df71cb8534e0887a3f62ce8ec0b94523be5d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 13 Oct 2026 12:16:13 -0700 Subject: [PATCH 2/5] groups are themselves in revealers, css again --- src/Indicator/Indicator.vala | 14 ++++++++------ src/Indicator/Widgets/DisplayWidget.vala | 9 +-------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/Indicator/Indicator.vala b/src/Indicator/Indicator.vala index 859fe235b..8fd7509b0 100644 --- a/src/Indicator/Indicator.vala +++ b/src/Indicator/Indicator.vala @@ -80,19 +80,21 @@ public class Monitor.Indicator : Wingpanel.Indicator { font-size: 0.9rem; } - monitor-indicator-group image:dir(ltr) { - margin-right: 0.5em; + monitor-indicator-group:dir(ltr) { + margin-left: 1em; } - monitor-indicator-group image:dir(rtl) { - margin-left: 0.5em; + monitor-indicator-group:dir(rtl) { + margin-right: 1em; } - monitor-indicator-group label:dir(ltr) { + monitor-indicator-group label:dir(ltr), + monitor-indicator-group image:dir(rtl) { margin-left: 0.5em; } - monitor-indicator-group label:dir(rtl) { + monitor-indicator-group label:dir(rtl), + monitor-indicator-group image:dir(ltr) { margin-right: 0.5em; } """; diff --git a/src/Indicator/Widgets/DisplayWidget.vala b/src/Indicator/Widgets/DisplayWidget.vala index a9e2f0406..4faf74618 100644 --- a/src/Indicator/Widgets/DisplayWidget.vala +++ b/src/Indicator/Widgets/DisplayWidget.vala @@ -3,14 +3,7 @@ * SPDX-FileCopyrightText: 2025 elementary, Inc. (https://elementary.io) */ -public class Monitor.Widgets.DisplayWidget : Granite.Box { - public DisplayWidget () { - Object ( - child_spacing: Granite.Box.Spacing.SINGLE, - orientation: Gtk.Orientation.HORIZONTAL - ); - } - +public class Monitor.Widgets.DisplayWidget : Gtk.Box { construct { valign = Gtk.Align.CENTER; From 844ab7897d909cce91c11fa4d03d2ffde067fa57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 13 Oct 2026 12:18:32 -0700 Subject: [PATCH 3/5] Remove unnecessary formats --- src/Indicator/Widgets/IndicatorWidgetBandwidth.vala | 2 +- src/Indicator/Widgets/IndicatorWidgetFrequency.vala | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala b/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala index 81752b7a1..9fbe3e31c 100644 --- a/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala +++ b/src/Indicator/Widgets/IndicatorWidgetBandwidth.vala @@ -10,6 +10,6 @@ public class Monitor.IndicatorWidgetBandwidth : Monitor.IndicatorWidget { public override void update_label (Value value) { uint64 bandwidth = value.get_uint64 (); - label.label = "%s".printf (Utils.Strings.format_network_speed (bandwidth)); + label.label = Utils.Strings.format_network_speed (bandwidth); } } diff --git a/src/Indicator/Widgets/IndicatorWidgetFrequency.vala b/src/Indicator/Widgets/IndicatorWidgetFrequency.vala index 17e908091..60face509 100644 --- a/src/Indicator/Widgets/IndicatorWidgetFrequency.vala +++ b/src/Indicator/Widgets/IndicatorWidgetFrequency.vala @@ -10,6 +10,6 @@ public class Monitor.IndicatorWidgetFrequency : Monitor.IndicatorWidget { public override void update_label (Value value) { double frequency = value.get_double (); - label.label = "%s".printf (Utils.Strings.format_frequency (frequency)); + label.label = Utils.Strings.format_frequency (frequency); } } From b43d63fb64dbecc750e4be4fdc1d38ec70852ee9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 13 Oct 2026 15:51:01 -0700 Subject: [PATCH 4/5] Fix warning and error classes --- src/Indicator/Widgets/IndicatorWidgetPercentage.vala | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala index 003d7e915..1d36d2c1a 100644 --- a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala +++ b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala @@ -10,12 +10,12 @@ public class Monitor.IndicatorWidgetPercentage : Monitor.IndicatorWidget { label.label = "%u%%".printf (percentage); if (percentage > 90) { - label.css_classes = {"Granite.CssClass.ERROR"}; + label.css_classes = {Granite.CssClass.ERROR}; return; } if (percentage > 80) { - label.css_classes = {"Granite.CssClass.WARNING"}; + label.css_classes = {Granite.CssClass.WARNING}; return; } From 8fbb00aa436098863f5cb212779a8a9483d0eb40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 13 Oct 2026 16:03:08 -0700 Subject: [PATCH 5/5] WidgetPercentage: Set width chars --- src/Indicator/Widgets/IndicatorWidgetPercentage.vala | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala index 1d36d2c1a..dfd672527 100644 --- a/src/Indicator/Widgets/IndicatorWidgetPercentage.vala +++ b/src/Indicator/Widgets/IndicatorWidgetPercentage.vala @@ -4,6 +4,10 @@ */ public class Monitor.IndicatorWidgetPercentage : Monitor.IndicatorWidget { + construct { + label.width_chars = 4; + } + public override void update_label (Value value) { uint percentage = value.get_uint ();