WidgetResource: rewrite and cleanup

data/stylesheet/_index.scss

@@ -61,6 +61,8 @@ roundy-label:hover:selected {
 
 .usage-label-container {
     border-radius: 3px;
+    margin: 6px;
+
     @if $color-scheme == "light" {
         background-color: rgba($SILVER_100, 0.5);
         border: 1px solid $SILVER_300;

src/Views/SystemView/SystemCPUView.vala

@@ -24,7 +24,7 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
         cpu_utilization_chart.config.y_axis.tick_interval = 100;
         cpu_utilization_chart.config.y_axis.fixed_max = 100.0 * cpu.core_list.size;
 
-        set_main_chart (cpu_utilization_chart);
+        main_chart = cpu_utilization_chart;
         set_main_chart_overlay (grid_core_labels ());
     }
 
@@ -125,7 +125,7 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
             }
         }
 
-        label_vertical_main_metric = ("%d%%").printf (cpu.percentage);
+        main_metric_value = ("%d%%").printf (cpu.percentage);
         cpu_frequency_label.text = ("%.2f %s").printf (cpu.frequency, _("GHz"));
     }
 

src/Views/SystemView/SystemGPUView.vala

@@ -59,7 +59,7 @@ public class Monitor.SystemGPUView : Monitor.WidgetResource {
 
         gpu_chart = new Chart (1);
         gpu_chart.set_serie_color (0, Utils.Colors.get_rgba_color (Utils.Colors.LIME_500));
-        set_main_chart (gpu_chart);
+        main_chart = gpu_chart;
 
         set_main_chart_overlay (gpu_usage_grid ());
     }
@@ -75,7 +75,7 @@ public class Monitor.SystemGPUView : Monitor.WidgetResource {
     }
 
     public void update () {
-        label_vertical_main_metric = (("%d%%").printf (gpu.percentage));
+        main_metric_value = (("%d%%").printf (gpu.percentage));
         gpu_chart.update (0, gpu.percentage);
 
         gpu_vram_percentage_chart.update (0, gpu.memory_percentage);

src/Views/SystemView/SystemMemoryView.vala

@@ -32,7 +32,7 @@ public class Monitor.SystemMemoryView : Monitor.WidgetResource {
         // memory_chart.set_serie_color (2, Utils.Colors.get_rgba_color (Utils.Colors.LIME_500));
         // memory_chart.set_serie_color (3, Utils.Colors.get_rgba_color (Utils.Colors.LIME_700));
         // memory_chart.set_serie_color (4, Utils.Colors.get_rgba_color (Utils.Colors.LIME_900));
-        set_main_chart (memory_chart);
+        main_chart = memory_chart;
 
         set_main_chart_overlay (memory_usage_grid ());
     }
@@ -55,7 +55,7 @@ public class Monitor.SystemMemoryView : Monitor.WidgetResource {
     }
 
     public void update () {
-        label_vertical_main_metric = (("%u%%").printf (memory.used_percentage));
+        main_metric_value = (("%u%%").printf (memory.used_percentage));
         memory_chart.update (0, memory.used_percentage);
         // memory_chart.update (1, memory.shared_percentage);
         // memory_chart.update (2, memory.shared_percentage + memory.buffer_percentage);

src/Widgets/WidgetResource/WidgetResource.vala

@@ -4,103 +4,100 @@
  */
 
 public class Monitor.WidgetResource : Gtk.Box {
-    private Granite.HeaderLabel _title = new Granite.HeaderLabel (Utils.NO_DATA);
-
     public string title {
         set {
             _title.label = value;
         }
     }
 
-    public Gtk.Popover popover_more_info;
-    private LabelVertical _label_vertical_main_metric = new LabelVertical (_("UTILIZATION"));
-
-    public string label_vertical_main_metric {
+    public string main_metric_value {
         set {
-            _label_vertical_main_metric.set_text (value);
+            main_metric_label.label = value;
         }
     }
 
-    private Gtk.Box charts_container = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
-
-    private Gtk.Grid grid_main_chart_container;
-    private Gtk.Grid grid_main_onchart_info_container;
-    private Gtk.Grid grid_header;
+    public Chart main_chart {
+        set {
+            main_overlay.child = value;
+        }
+    }
 
+    private Granite.HeaderLabel _title;
+    private Gtk.Box charts_box;
+    private Gtk.Box header_box;
+    private Gtk.Overlay main_overlay;
+    private Gtk.Box info_box;
+    private Gtk.Label main_metric_label;
 
     construct {
-        margin = 12;
-        margin_top = 6;
-        set_vexpand (false);
-        orientation = Gtk.Orientation.VERTICAL;
-
-
-
-        grid_header = new Gtk.Grid () {
-            column_spacing = 6,
-        };
-        grid_header.attach (_title, 0, 0, 1, 1);
-        add (grid_header);
+        _title = new Granite.HeaderLabel (Utils.NO_DATA);
 
+        header_box = new Gtk.Box (HORIZONTAL, 6);
+        header_box.add (_title);
 
-        grid_main_chart_container = new Gtk.Grid ();
-        grid_main_chart_container.attach (build_grid_main_onchart_info_container (), 0, 0, 1, 1);
+        var main_metric_title = new Gtk.Label (_("Utilization").up ());
+        main_metric_title.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL);
+        main_metric_title.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
 
-        charts_container.pack_start (grid_main_chart_container, true, true, 0);
+        main_metric_label = new Gtk.Label (Utils.NO_DATA);
+        main_metric_label.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL);
 
-        add (charts_container);
-
-    }
+        var main_metric_box = new Gtk.Box (VERTICAL, 0) {
+            margin_top = 6,
+            margin_bottom = 6,
+            margin_start = 12
+        };
+        main_metric_box.add (main_metric_title);
+        main_metric_box.add (main_metric_label);
 
-    private Gtk.Grid build_grid_main_onchart_info_container () {
-        grid_main_onchart_info_container = new Gtk.Grid () {
-            column_spacing = 6,
-            margin = 6,
-            valign = Gtk.Align.START,
-            halign = Gtk.Align.START,
+        info_box = new Gtk.Box (HORIZONTAL, 6) {
+            halign = START,
+            valign = START
         };
+        info_box.get_style_context ().add_class ("usage-label-container");
+        info_box.add (main_metric_box);
 
-        grid_main_onchart_info_container.get_style_context ().add_class ("usage-label-container");
-        grid_main_onchart_info_container.attach (_label_vertical_main_metric, 0, 0, 1, 1);
+        main_overlay = new Gtk.Overlay ();
+        main_overlay.add_overlay (info_box);
 
-        return grid_main_onchart_info_container;
-    }
+        charts_box = new Gtk.Box (HORIZONTAL, 6);
+        charts_box.add (main_overlay);
+
+        margin_top = 6;
+        margin_end = 12;
+        margin_bottom = 12;
+        margin_start = 12;
 
-    public void set_main_chart (Chart chart) {
-        grid_main_chart_container.attach (chart, 0, 0, 1, 1);
+        orientation = VERTICAL;
+        add (header_box);
+        add (charts_box);
     }
 
     public void set_main_chart_overlay (Gtk.Widget widget) {
-        grid_main_onchart_info_container.attach (widget, 1, 0, 1, 1);
+        info_box.add (widget);
     }
 
     public void add_charts_container (Gtk.Widget widget) {
-        charts_container.pack_start (widget, false, false, 0);
+        charts_box.add (widget);
     }
 
     public void set_popover_more_info (Gtk.Widget widget) {
-        var button_more_info = new Gtk.ToggleButton () {
+        widget.show_all ();
+
+        var popover_more_info = new Gtk.Popover (null) {
+            child = widget,
+            position = BOTTOM
+        };
+
+        var button_more_info = new Gtk.MenuButton () {
+            halign = START,
+            valign = START,
             has_focus = false,
-            valign = Gtk.Align.START,
-            halign = Gtk.Align.START
+            image = new Gtk.Image.from_icon_name ("dialog-information", SMALL_TOOLBAR),
+            popover = popover_more_info
         };
         button_more_info.get_style_context ().add_class ("circular");
-        //  button_more_info.get_style_context ().add_class ("popup");
-        var icon = new Gtk.Image ();
-        icon.gicon = new ThemedIcon ("dialog-information");
-        icon.pixel_size = 16;
-        button_more_info.set_image (icon);
-
-        popover_more_info = new Gtk.Popover (button_more_info) {
-            position = Gtk.PositionType.BOTTOM,
-            modal = true,
-            visible = false,
-        };
-        popover_more_info.closed.connect (() => { button_more_info.set_active (false); });
-        button_more_info.clicked.connect (() => { popover_more_info.show_all (); });
-
-        popover_more_info.add (widget);
 
-        grid_header.attach (button_more_info, 1, 0, 1, 1);
+        header_box.add (button_more_info);
     }
 }

src/meson.build

@@ -28,7 +28,6 @@ source_app_files = [
     # Widgets
     'Widgets/Headerbar/Search.vala',
     'Widgets/Statusbar/Statusbar.vala',
-    'Widgets/Labels/LabelVertical.vala',
     'Widgets/Labels/LabelRoundy.vala',
     'Widgets/Chart/Chart.vala',
     'Widgets/WidgetResource/WidgetResource.vala',