He.SegmentedButton

tau-OS · Jan 19, 2023 · 7814699 · 7814699
1 parent d8ff8d0
commit 7814699
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 47 deletions.
diff --git a/demo/data/ui/settings.blp b/demo/data/ui/settings.blp
@@ -2,12 +2,12 @@ using Gtk 4.0;
 using He 1;
 
 template DemoSettingsWindow : He.SettingsWindow {
-  He.ContentList {
+  He.SettingsList {
     title: "Appearance";
-    hexpand: true;
-    He.MiniContentBlock {
+    He.SettingsRow {
       title: "Default Accent Color";
       subtitle: "Demo of the accent color function.";
+      activatable-widget: clr_btn;
 
       ColorButton clr_btn {
       }

diff --git a/demo/data/ui/window.blp b/demo/data/ui/window.blp
@@ -11,7 +11,7 @@ menu bottombar_menu {
 template DemoMainWindow : He.ApplicationWindow {
   visible: true;
   default-height: 600;
-  default-width: 600;
+  default-width: 1550;
    Bis.Album album {
     Bis.AlbumPage {
       child:
@@ -21,6 +21,7 @@ template DemoMainWindow : He.ApplicationWindow {
         show-back: false;
         width-request: 200;
         scroller: s;
+        has-margins: false;
 
         [titlebar-button]
         $HeAvatar avy {
@@ -41,6 +42,8 @@ template DemoMainWindow : He.ApplicationWindow {
         Revealer {
           reveal-child: bind search.active;
           margin-bottom: 12;
+          margin-start: 18;
+          margin-end: 18;
 
           SearchEntry {
           }
@@ -52,6 +55,9 @@ template DemoMainWindow : He.ApplicationWindow {
 
           Box {
             orientation: vertical;
+            margin-start: 18;
+            margin-end: 18;
+            margin-bottom: 18;
 
             He.MiniContentBlock {
               title: "Mini Content Block";
@@ -104,15 +110,6 @@ template DemoMainWindow : He.ApplicationWindow {
       ;
     }
 
-    Bis.AlbumPage {
-      navigatable: false;
-      child:
-      Separator {
-        orientation: vertical;
-      }
-      ;
-    }
-
     Bis.AlbumPage {
       child:
       He.SideBar {
@@ -135,22 +132,6 @@ template DemoMainWindow : He.ApplicationWindow {
           Box {
             orientation: vertical;
 
-            He.MiniContentBlock {
-              title: "Mini Content Block";
-              subtitle: "Subtitle";
-              icon: "list-add-symbolic";
-            }
-            He.MiniContentBlock {
-              title: "Mini Content Block";
-              subtitle: "Subtitle";
-              icon: "list-add-symbolic";
-            }
-            He.MiniContentBlock {
-              title: "Mini Content Block";
-              subtitle: "Subtitle";
-              icon: "list-add-symbolic";
-            }
-
             $HeSettingsList {
               title: "Settings List";
               description: "Subtitle";
@@ -169,10 +150,22 @@ template DemoMainWindow : He.ApplicationWindow {
                 title: "Settings Row";
                 subtitle: "Subtitle";
                 icon: "list-add-symbolic";
-                activatable-widget: miniswitch2;
-
-                Switch miniswitch2 {
 
+                $HeSegmentedButton {
+                  [segment]
+                  ToggleButton tb {
+                    label: "Option 1";
+                  }
+                  [segment]
+                  ToggleButton {
+                    label: "Option 2";
+                    group: tb;
+                  }
+                  [segment]
+                  ToggleButton {
+                    label: "Option 3";
+                    group: tb;
+                  }
                 }
               }
               $HeSettingsRow {
@@ -192,19 +185,15 @@ template DemoMainWindow : He.ApplicationWindow {
       ;
     }
 
-    Bis.AlbumPage {
-      navigatable: false;
-      child:
-      Separator {
-        orientation: vertical;
-      }
-      ;
-    }
-
     Bis.AlbumPage {
       child:
       Gtk.Box main_box {
       orientation: vertical;
+
+        styles [
+          "main-view",
+        ]
+
         $HeAppBar {
           show-buttons: true;
           show-back: bind album.folded;
@@ -214,7 +203,7 @@ template DemoMainWindow : He.ApplicationWindow {
               margin-start: 10;
             }
           ;
-          viewsubtitle-label: "Subtitle";
+          viewsubtitle-label: ""; // this does a double-storey AppBar like the HIG :)
 
           MenuButton {
             icon-name: "view-more";

diff --git a/lib/Main.vala b/lib/Main.vala
@@ -54,6 +54,7 @@ namespace He {
         typeof (He.OutlineButton).ensure ();
         typeof (He.OverlayButton).ensure ();
         typeof (He.PillButton).ensure ();
+        typeof (He.SegmentedButton).ensure ();
         typeof (He.SideBar).ensure ();
         typeof (He.SettingsPage).ensure ();
         typeof (He.SettingsList).ensure ();

diff --git a/lib/Models/ButtonContent.vala b/lib/Models/ButtonContent.vala
@@ -33,7 +33,8 @@ public class He.ButtonContent : Gtk.Widget, Gtk.Buildable {
      */
     public string icon {
         set {
-            image.set_from_icon_name(value);
+            if (value != null)
+                image.set_from_icon_name(value);
         }
 
         owned get {
@@ -47,7 +48,8 @@ public class He.ButtonContent : Gtk.Widget, Gtk.Buildable {
      */
     public string label {
         set {
-            lbl.set_label(value);
+            if (value != null)
+                lbl.set_label(value);
         }
 
         owned get {

diff --git a/lib/Widgets/SegmentedButton.vala b/lib/Widgets/SegmentedButton.vala
@@ -0,0 +1,42 @@
+/*
+* Copyright (c) 2023 Fyra Labs
+*
+* 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, write to the
+* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+* Boston, MA 02110-1301 USA
+*/
+
+/**
+ * A SegmentedButton is a group of buttons that selects a setting
+ * or chooses a view in a small space. Does not work with stacks
+ * of less than 2 elements. The developer supplies the stack, and or
+ * buttons as child for further coding in their app.
+ */
+ public class He.SegmentedButton : Gtk.Box {
+    /**
+     * Adds a widget to SegmentedButton, should only be used in the context of a UI or Blueprint file. There should be no need to use this method in code.
+     *
+     * @since 1.0
+     */
+    public void add_child (Gtk.Builder builder, GLib.Object child, string? type) {
+        if (type == "segment") {
+            ((Gtk.Widget) child).set_parent (this);
+        }
+    }
+
+    construct {
+        this.add_css_class ("segmented-button");
+        this.valign = Gtk.Align.CENTER;
+    }
+}
diff --git a/lib/meson.build b/lib/meson.build
@@ -8,10 +8,10 @@ libhelium_sources += files(
     'Models/Colors.vala',
     'Models/View.vala',
     'Models/Window.vala',
+    'Utils/Color.vala',
     'Utils/Desktop.vala',
-    'Utils/Portal.vala',
     'Utils/Misc.vala',
-    'Utils/Color.vala',
+    'Utils/Portal.vala',
     'Widgets/AboutWindow.vala',
     'Widgets/AppBar.vala',
     'Widgets/ApplicationWindow.vala',
@@ -35,9 +35,10 @@ libhelium_sources += files(
     'Widgets/OutlineButton.vala',
     'Widgets/OverlayButton.vala',
     'Widgets/PillButton.vala',
-    'Widgets/SettingsRow.vala',
+    'Widgets/SegmentedButton.vala',
     'Widgets/SettingsList.vala',
     'Widgets/SettingsPage.vala',
+    'Widgets/SettingsRow.vala',
     'Widgets/SettingsWindow.vala',
     'Widgets/SideBar.vala',
     'Widgets/Tab.vala',