Diskbar: responsive redesign (#770)

Co-authored-by: Ryan Kornheisl <[email protected]>

data/disk-bar-fallback.css

@@ -35,6 +35,8 @@ levelbar block:not(:last-child) {
 levelbar block.legend {
     border-radius: 50%;
     border-style: solid;
+    min-height: 14px;
+    min-width: 14px;
 }
 
 levelbar block.swap {
@@ -84,9 +86,15 @@ levelbar block.unused {
 }
 
 levelbar block image {
+    min-height: 16px; /* Preserve height when empty */
     padding: 0.5em;
     -gtk-icon-palette: error #fff, success #fff, warning #fff;
     -gtk-icon-shadow:
         0 1px 1px alpha(#000, 0.2),
         0 1px 3px alpha(#000, 0.1);
 }
+
+levelbar .h4 {
+    opacity: 1;
+    padding: 0;
+}

src/Widgets/DiskBar.vala

@@ -1,32 +1,17 @@
-// -*- Mode: vala; indent-tabs-mode: nil; tab-width: 4 -*-
-/*-
- * Copyright (c) 2018 elementary LLC. (https://elementary.io)
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+/*
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ * SPDX-FileCopyrightText: 2018-2024 elementary, Inc. (https://elementary.io)
  *
  * Authored by: Michael Aaron Murphy <[email protected]>
  */
 
-public class Installer.DiskBar: Gtk.Grid {
+public class Installer.DiskBar: Gtk.Box {
     public string disk_name { get; construct; }
     public string disk_path { get; construct; }
     public uint64 size { get; construct; }
     public Gee.ArrayList<PartitionBar> partitions { get; construct; }
 
-    private static Gtk.SizeGroup label_sizegroup;
-
-    private Gtk.Grid legend_container;
+    private Gtk.Box legend_box;
 
     public DiskBar (string disk_name, string disk_path, uint64 size, Gee.ArrayList<PartitionBar> partitions) {
         Object (
@@ -41,33 +26,18 @@ public class Installer.DiskBar: Gtk.Grid {
         set_css_name ("levelbar");
     }
 
-    static construct {
-        label_sizegroup = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL);
-    }
-
     construct {
-        var name_label = new Gtk.Label ("<b>%s</b>".printf (disk_name)) {
-            xalign = 1,
-            use_markup = true
-        };
+        var name_label = new Granite.HeaderLabel (disk_name);
 
         var size_label = new Gtk.Label ("%s %s".printf (disk_path, GLib.format_size (size))) {
-            xalign = 1
+            xalign = 0
         };
+        size_label.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL);
+        size_label.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
 
-        unowned var size_label_context = size_label.get_style_context ();
-        size_label_context.add_class (Gtk.STYLE_CLASS_DIM_LABEL);
-        size_label_context.add_class (Granite.STYLE_CLASS_SMALL_LABEL);
-
-        var label = new Gtk.Grid ();
-        label.orientation = Gtk.Orientation.VERTICAL;
-        label.row_spacing = 6;
-        label.valign = Gtk.Align.CENTER;
-        label.add (name_label);
-        label.add (size_label);
-
-        label_sizegroup.add_widget (name_label);
-        label_sizegroup.add_widget (size_label);
+        var label_box = new Gtk.Box (VERTICAL, 0);
+        label_box.add (name_label);
+        label_box.add (size_label);
 
         var bar = new Gtk.Grid ();
 
@@ -79,17 +49,18 @@ public class Installer.DiskBar: Gtk.Grid {
             bar.add (part);
         }
 
-        legend_container = new Gtk.Grid ();
-        legend_container.column_spacing = 24;
-        legend_container.halign = Gtk.Align.CENTER;
-        legend_container.margin_bottom = 9;
-
-        var legend = new Gtk.ScrolledWindow (null, null);
-        legend.vscrollbar_policy = Gtk.PolicyType.NEVER;
-        legend.add (legend_container);
+        legend_box = new Gtk.Box (VERTICAL, 6) {
+            halign = START
+        };
 
         foreach (PartitionBar p in partitions) {
-            add_legend (p.partition.device_path, p.get_size () * 512, Distinst.strfilesys (p.partition.filesystem), p.volume_group, p.menu);
+            add_legend (
+                p.partition.device_path,
+                p.get_size () * 512,
+                Distinst.strfilesys (p.partition.filesystem),
+                p.volume_group,
+                p.menu
+            );
         }
 
         uint64 used = 0;
@@ -110,60 +81,57 @@ public class Installer.DiskBar: Gtk.Grid {
             bar.add (unused_bar);
         }
 
-        column_spacing = 12;
+        orientation = VERTICAL;
         hexpand = true;
-        get_style_context ().add_class (Granite.STYLE_CLASS_STORAGEBAR);
-        attach (label, 0, 1);
-        attach (legend, 1, 0);
-        attach (bar, 1, 1);
-
+        spacing = 12;
+        add (label_box);
+        add (bar);
+        add (legend_box);
         show_all ();
     }
 
     private void add_legend (string ppath, uint64 size, string fs, string? vg, Gtk.Popover? menu) {
-        var fill_round = new Block ();
-        fill_round.width_request = fill_round.height_request = 14;
-        fill_round.valign = Gtk.Align.CENTER;
-
-        var context = fill_round.get_style_context ();
-        context.add_class ("legend");
-        context.add_class (fs);
+        var fill_round = new Block () {
+            valign = CENTER
+        };
+        fill_round.get_style_context ().add_class ("legend");
+        fill_round.get_style_context ().add_class (fs);
 
         var format_size = GLib.format_size (size);
 
         var info = new Gtk.Label (
             (vg == null)
                 ? _("%s (%s)").printf (format_size, fs)
                 : _("%s (%s: <b>%s</b>)").printf (format_size, fs, vg)
-        );
+        ) {
+            halign = START,
+        };
+        info.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL);
+        info.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL);
         info.use_markup = true;
 
-        var path = new Gtk.Label ("<b>%s</b>".printf (ppath));
-        path.halign = Gtk.Align.START;
-        path.use_markup = true;
+        var path = new Gtk.Label (ppath) {
+            halign = START
+        };
 
-        var legend = new Gtk.Grid ();
-        legend.column_spacing = 6;
-        legend.attach (set_menu (fill_round, menu), 0, 0, 1, 2);
-        legend.attach (set_menu (path, menu), 1, 0);
+        var legend = new Gtk.Grid () {
+            column_spacing = 12
+        };
+        legend.attach (fill_round, 0, 0, 1, 2);
+        legend.attach (path, 1, 0);
         legend.attach (info, 1, 1);
 
-        legend_container.add (legend);
-    }
+        var event_box = new Gtk.EventBox ();
+        event_box.add (legend);
 
-    private Gtk.Widget set_menu (Gtk.Widget widget, Gtk.Popover? menu) {
         if (menu != null) {
-            var event_box = new Gtk.EventBox ();
-            event_box.add (widget);
-            event_box.add_events (Gdk.EventMask.BUTTON_PRESS_MASK);
             event_box.button_press_event.connect (() => {
                 menu.popup ();
                 return true;
             });
-            return event_box;
         }
 
-        return widget;
+        legend_box.add (event_box);
     }
 
     private void update_sector_lengths (Gee.ArrayList<PartitionBar> partitions, Gtk.Allocation alloc) {