diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss index 5b3988d8..40618135 100644 --- a/data/stylesheet/_index.scss +++ b/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; diff --git a/src/Views/SystemView/SystemCPUView.vala b/src/Views/SystemView/SystemCPUView.vala index 84556836..2e6b6412 100644 --- a/src/Views/SystemView/SystemCPUView.vala +++ b/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")); } diff --git a/src/Views/SystemView/SystemGPUView.vala b/src/Views/SystemView/SystemGPUView.vala index 74aed64f..7b1c1e8d 100644 --- a/src/Views/SystemView/SystemGPUView.vala +++ b/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); diff --git a/src/Views/SystemView/SystemMemoryView.vala b/src/Views/SystemView/SystemMemoryView.vala index e7bdbd93..4863187b 100644 --- a/src/Views/SystemView/SystemMemoryView.vala +++ b/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); diff --git a/src/Widgets/Labels/LabelVertical.vala b/src/Widgets/Labels/LabelVertical.vala deleted file mode 100644 index d54b216e..00000000 --- a/src/Widgets/Labels/LabelVertical.vala +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright 2025 elementary, Inc. (https://elementary.io) - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -public class Monitor.LabelVertical : Gtk.EventBox { - private Gtk.Grid grid; - - public signal void clicked (); - - public Gtk.Label val; - public Gtk.Label desc; - - construct { - grid = new Gtk.Grid (); - margin_start = 12; - margin_top = 6; - - get_style_context ().add_class ("label-vertical"); - } - - public LabelVertical (string description) { - val = new Gtk.Label (Utils.NO_DATA); - val.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); - - desc = new Gtk.Label (description.up ()); - 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); - - add (grid); - - events |= Gdk.EventMask.BUTTON_RELEASE_MASK; - - button_release_event.connect ((event) => { - clicked (); - return false; - }); - } - - public void set_text (string text) { - val.set_text (text); - } - -} diff --git a/src/Widgets/WidgetResource/WidgetResource.vala b/src/Widgets/WidgetResource/WidgetResource.vala index 48c54c3b..5ba1b820 100644 --- a/src/Widgets/WidgetResource/WidgetResource.vala +++ b/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); } } diff --git a/src/meson.build b/src/meson.build index 2c2ea3f6..492dd1ad 100644 --- a/src/meson.build +++ b/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',