LabelRoundy: rewrite

data/stylesheet/_index.scss

@@ -5,33 +5,50 @@ $fg-color: $BLACK_500;
 
 $text_color: $fg_color;
 
-.roundy-label,
-.roundy-label:hover,
-.roundy-label:selected,
-.roundy-label:selected:focus,
-.roundy-label:hover:selected {
-    background-image: none;
-    box-shadow: none;
-    color: rgba($text_color, 0.7);
-    font-weight: 700;
-    border-radius: 10px;
-    padding: 0 6px;
+roundy-label,
+roundy-label:hover,
+roundy-label:selected,
+roundy-label:selected:focus,
+roundy-label:hover:selected {
     margin: 0 3px;
-    border-width: 0;
 
-    @if $color-scheme == "light" {
-        background-color: $SILVER_300;
-    } @else if $color-scheme == "dark" {
-        background-color: $SILVER_900;
+    .small-label {
+        padding: 0;
     }
-}
 
-.green {
-    background-color: rgba($LIME_300, 0.6);
-}
+    .value {
+        color: #{'alpha(@text_color, 0.7)'};
+        font-feature-settings: "tnum";
+        font-weight: 700;
+        border-radius: 10px;
+        padding: 0 6px;
+
+        @if $color-scheme == "light" {
+            background-color: $SILVER_300;
+        } @else if $color-scheme == "dark" {
+            background-color: $SILVER_900;
+        }
+    }
+
+    &.green .value {
+        background-color: rgba($LIME_300, 0.6);
+    }
+
+    &.blue .value {
+        background-color: rgba($BLUEBERRY_300, 0.6);
+    }
 
-.blue {
-    background-color: rgba($BLUEBERRY_300, 0.6);
+    &.username {
+        &-other .value {
+            background-color: $BANANA_300;
+            color: #381F00;
+        }
+
+        &-root .value {
+            background-color: $STRAWBERRY_300;
+            color: $SILVER_100;
+        }
+    }
 }
 
 .grape_500 {
@@ -53,28 +70,6 @@ $text_color: $fg_color;
     }
 }
 
-.username {
-    &-current {
-        @if $color-scheme == "light" {
-            background-color: $SILVER_300;
-            color: $SILVER_900;
-        } @else if $color-scheme == "dark" {
-            background-color: $SILVER_900;
-            color: rgba($text_color, 0.7);
-        }
-    }
-
-    &-other {
-        background-color: $BANANA_300;
-        color: #381F00;
-    }
-
-    &-root {
-        background-color: $STRAWBERRY_300;
-        color: $SILVER_100;
-    }
-}
-
 .state_badge,
 .state_badge:hover,
 .state_badge:selected,
@@ -96,8 +91,6 @@ $text_color: $fg_color;
     padding-right: 4px;
     padding-left:2px;
     font-size: 10px;
-    /* font-weight:bold; */
-    color: $text_color;
 
     @if $color-scheme == "light" {
         border: 1px solid $SILVER_300;
@@ -172,16 +165,6 @@ $text_color: $fg_color;
     }
 }
 
-.small-text {
-    font-weight:bold;
-    font-size:9px;
-    @if $color-scheme == "light" {
-        color:grey;
-    } @else if $color-scheme == "dark" {
-        color: $SILVER_500;
-    }
-}
-
 .graph {
     border-radius: 6px;
 

src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala

@@ -67,28 +67,25 @@ public class Monitor.ProcessInfoHeader : Gtk.Grid {
     public void update (Process process) {
         application_name.label = process.application_name;
         application_name.tooltip_text = process.command;
-        pid.set_text (process.stat.pid.to_string ());
-        nice.set_text (process.stat.nice.to_string ());
-        priority.set_text (process.stat.priority.to_string ());
+        pid.text = process.stat.pid.to_string ();
+        nice.text = process.stat.nice.to_string ();
+        priority.text = process.stat.priority.to_string ();
 
         if (process.uid == 0) {
-            username.val.get_style_context ().add_class ("username-root");
-            username.val.get_style_context ().remove_class ("username-other");
-            username.val.get_style_context ().remove_class ("username-current");
+            username.get_style_context ().add_class ("username-root");
+            username.get_style_context ().remove_class ("username-other");
         } else if (process.uid == (int) Posix.getuid ()) {
-            username.val.get_style_context ().add_class ("username-current");
-            username.val.get_style_context ().remove_class ("username-other");
-            username.val.get_style_context ().remove_class ("username-root");
+            username.get_style_context ().remove_class ("username-other");
+            username.get_style_context ().remove_class ("username-root");
         } else {
-            username.val.get_style_context ().add_class ("username-other");
-            username.val.get_style_context ().remove_class ("username-root");
-            username.val.get_style_context ().remove_class ("username-current");
+            username.get_style_context ().add_class ("username-other");
+            username.get_style_context ().remove_class ("username-root");
         }
 
-        username.set_text (process.username);
+        username.text = process.username;
         username.tooltip_text = process.uid.to_string ();
 
-        num_threads.set_text (process.stat.num_threads.to_string ());
+        num_threads.text = process.stat.num_threads.to_string ();
 
         state.label = process.stat.state;
         state.tooltip_text = set_state_tooltip ();

src/Views/SystemView/SystemCPUView.vala

@@ -82,7 +82,7 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
         //      temperature_index++;
         //  }]
         cpu_temperature_chart.update (0, cpu.temperature_mean);
-        cpu_temperature_label.set_text (("%.2f %s").printf (cpu.temperature_mean, _("℃")));
+        cpu_temperature_label.text = ("%.2f %s").printf (cpu.temperature_mean, _("℃"));
 
         double cpu_prev_util = 0;
 
@@ -128,7 +128,7 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
             }
         }
         label_vertical_main_metric = ("%d%%").printf (cpu.percentage);
-        cpu_frequency_label.set_text (("%.2f %s").printf (cpu.frequency, _("GHz")));
+        cpu_frequency_label.text = ("%.2f %s").printf (cpu.frequency, _("GHz"));
     }
 
     private Gtk.Grid grid_core_labels () {
@@ -156,7 +156,8 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
             }
         }
         var threads_label = new Gtk.Label (_("THREADS"));
-        threads_label.get_style_context ().add_class ("small-text");
+        threads_label.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL);
+        threads_label.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
         grid.attach (threads_label, 0, -1, column, 1);
 
         return grid;

src/Views/SystemView/SystemGPUView.vala

@@ -80,8 +80,8 @@ public class Monitor.SystemGPUView : Monitor.WidgetResource {
 
         gpu_vram_percentage_chart.update (0, gpu.memory_percentage);
         gpu_temperature_chart.update (0, gpu.temperature);
-        gpu_vram_percentage_label.set_text (("%.2f %s").printf (gpu.memory_percentage, "%"));
-        gpu_temperature_label.set_text (("%.2f %s").printf (gpu.temperature, _("℃")));
+        gpu_vram_percentage_label.text = ("%.2f %s").printf (gpu.memory_percentage, "%");
+        gpu_temperature_label.text = ("%.2f %s").printf (gpu.temperature, _("℃"));
 
     }
 

src/Views/SystemView/SystemMemoryView.vala

@@ -62,13 +62,13 @@ public class Monitor.SystemMemoryView : Monitor.WidgetResource {
         // memory_chart.update (3, memory.shared_percentage + memory.buffer_percentage + memory.cached_percentage);
         // memory_chart.update (3, memory.shared_percentage + memory.buffer_percentage + memory.cached_percentage + memory.locked_percentage);
 
-        memory_total_label.set_text (format_size ((uint64) memory.total, IEC_UNITS));
-        memory_used_label.set_text (format_size ((uint64) memory.used, IEC_UNITS));
-        memory_buffered_label.set_text (format_size ((uint64) memory.buffer, IEC_UNITS));
-        memory_cached_label.set_text (format_size ((uint64) memory.cached, IEC_UNITS));
-        memory_locked_label.set_text (format_size ((uint64) memory.locked, IEC_UNITS));
+        memory_total_label.text = format_size ((uint64) memory.total, IEC_UNITS);
+        memory_used_label.text = format_size ((uint64) memory.used, IEC_UNITS);
+        memory_buffered_label.text = format_size ((uint64) memory.buffer, IEC_UNITS);
+        memory_cached_label.text = format_size ((uint64) memory.cached, IEC_UNITS);
+        memory_locked_label.text = format_size ((uint64) memory.locked, IEC_UNITS);
 
-        memory_shared_label.set_text (format_size ((uint64) memory.shared, IEC_UNITS));
+        memory_shared_label.text = format_size ((uint64) memory.shared, IEC_UNITS);
     }
 
 }

src/Views/SystemView/SystemNetworkView.vala

@@ -22,13 +22,15 @@ public class Monitor.SystemNetworkView : Gtk.Grid {
 
         network_name_label = new Granite.HeaderLabel (_("Network"));
 
-        network_download_label = new LabelRoundy (_("DOWN"));
-        network_download_label.val.set_width_chars (7);
-        network_download_label.set_color ("blue");
+        network_download_label = new LabelRoundy (_("DOWN")) {
+            width_chars = 7
+        };
+        network_download_label.get_style_context ().add_class ("blue");
 
-        network_upload_label = new LabelRoundy (_("UP"));
-        network_upload_label.val.set_width_chars (7);
-        network_upload_label.set_color ("green");
+        network_upload_label = new LabelRoundy (_("UP")) {
+            width_chars = 7
+        };
+        network_upload_label.get_style_context ().add_class ("green");
 
         network_chart = new Chart (2);
         network_chart.config.y_axis.fixed_max = null;
@@ -52,8 +54,8 @@ public class Monitor.SystemNetworkView : Gtk.Grid {
         double up_bytes = network.bytes_out;
         double down_bytes = network.bytes_in;
         if (up_bytes >= 0 && down_bytes >= 0) {
-            network_download_label.set_text (("%s/s").printf (format_size ((uint64) down_bytes, IEC_UNITS)));
-            network_upload_label.set_text (("%s/s").printf (format_size ((uint64) up_bytes, IEC_UNITS)));
+            network_download_label.text = ("%s/s").printf (format_size ((uint64) down_bytes, IEC_UNITS));
+            network_upload_label.text = ("%s/s").printf (format_size ((uint64) up_bytes, IEC_UNITS));
             network_chart.update (0, up_bytes);
             network_chart.update (1, down_bytes);
         }

src/Views/SystemView/SystemStorageView.vala

@@ -17,13 +17,15 @@ public class Monitor.SystemStorageView : Gtk.Box {
     construct {
         var storage_name_label = new Granite.HeaderLabel (_("Storage"));
 
-        storage_write_label = new LabelRoundy (_("WRITE"));
-        storage_write_label.val.set_width_chars (7);
-        storage_write_label.set_color ("blue");
+        storage_write_label = new LabelRoundy (_("WRITE")) {
+            width_chars = 7
+        };
+        storage_write_label.get_style_context ().add_class ("blue");
 
-        storage_read_label = new LabelRoundy (_("READ"));
-        storage_read_label.val.set_width_chars (7);
-        storage_read_label.set_color ("green");
+        storage_read_label = new LabelRoundy (_("READ")) {
+            width_chars = 7
+        };
+        storage_read_label.get_style_context ().add_class ("green");
 
         storage_chart = new Chart (2);
         storage_chart.config.y_axis.fixed_max = null;
@@ -72,8 +74,8 @@ public class Monitor.SystemStorageView : Gtk.Box {
         double up_bytes = storage.bytes_read;
         double down_bytes = storage.bytes_write;
         if (up_bytes >= 0 && down_bytes >= 0) {
-            storage_write_label.set_text (("%s/s").printf (format_size ((uint64) down_bytes, IEC_UNITS)));
-            storage_read_label.set_text (("%s/s").printf (format_size ((uint64) up_bytes, IEC_UNITS)));
+            storage_write_label.text = ("%s/s").printf (format_size ((uint64) down_bytes, IEC_UNITS));
+            storage_read_label.text = ("%s/s").printf (format_size ((uint64) up_bytes, IEC_UNITS));
             storage_chart.update (0, up_bytes);
             storage_chart.update (1, down_bytes);
         }

src/Widgets/Labels/LabelRoundy.vala

@@ -3,29 +3,44 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-public class Monitor.LabelRoundy : Gtk.Fixed {
-    public Gtk.Label val;
-    public Gtk.Label desc;
+public class Monitor.LabelRoundy : Gtk.Box {
+    public string title { get; construct; }
 
-    public LabelRoundy (string description) {
-        val = new Gtk.Label (Utils.NO_DATA) {
-            selectable = true
-        };
-        val.get_style_context ().add_class ("roundy-label");
-
-        desc = new Gtk.Label (description.up ());
-        desc.get_style_context ().add_class ("small-text");
+    public string text {
+        set {
+            val.label = value;
+        }
+    }
 
-        put (val, 0, 12);
-        put (desc, 6, 0);
+    public int width_chars {
+        set {
+            val.width_chars = value;
+        }
     }
 
-    public void set_color (string colorname) {
-        val.get_style_context ().add_class (colorname);
+    private Gtk.Label val;
+
+    public LabelRoundy (string title) {
+        Object (title: title);
     }
 
-    public void set_text (string text) {
-        val.set_text (text);
+    class construct {
+        set_css_name ("roundy-label");
     }
 
+    construct {
+        val = new Gtk.Label (Utils.NO_DATA) {
+            selectable = true
+        };
+        val.get_style_context ().add_class ("value");
+
+        var header_label = new Granite.HeaderLabel (title.up ()) {
+            mnemonic_widget = val
+        };
+        header_label.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
+
+        orientation = VERTICAL;
+        add (header_label);
+        add (val);
+    }
 }

src/Widgets/Labels/LabelVertical.vala

@@ -24,7 +24,8 @@ public class Monitor.LabelVertical : Gtk.EventBox {
         val.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL);
 
         desc = new Gtk.Label (description.up ());
-        desc.get_style_context ().add_class ("small-text");
+        desc.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL);
+        desc.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
 
         grid.attach (desc, 0, 0, 1, 1);
         grid.attach (val, 0, 1, 1, 1);