VariantWidget: sync with installer

src/Views/KeyboardLayoutView.vala

@@ -16,7 +16,7 @@ public class KeyboardLayoutView : AbstractInstallerView {
 
         var title_label = new Gtk.Label (title);
 
-        input_variant_widget = new VariantWidget ();
+        input_variant_widget = new VariantWidget (_("Input Language"));
 
         title_label.mnemonic_widget = input_variant_widget.main_listbox;
 
@@ -110,7 +110,7 @@ public class KeyboardLayoutView : AbstractInstallerView {
             input_variant_widget.variant_listbox.bind_model (layout.get_variants (), (variant) => { return new VariantRow (variant as InitialSetup.KeyboardVariant); });
             input_variant_widget.variant_listbox.select_row (input_variant_widget.variant_listbox.get_row_at_index (0));
 
-            input_variant_widget.show_variants (_("Input Language"), "<b>%s</b>".printf (layout.display_name));
+            input_variant_widget.show_variants (layout.display_name);
         });
 
         input_variant_widget.main_listbox.row_selected.connect ((row) => {

src/Views/LanguageView.vala

@@ -64,7 +64,7 @@ public class Installer.LanguageView : AbstractInstallerView {
             }
         });
 
-        lang_variant_widget = new VariantWidget ();
+        lang_variant_widget = new VariantWidget (_("Languages"));
 
         lang_variant_widget.variant_listbox.set_sort_func ((Gtk.ListBoxSortFunc) CountryRow.compare);
 
@@ -208,7 +208,7 @@ public class Installer.LanguageView : AbstractInstallerView {
 
             Environment.set_variable ("LANGUAGE", lang_code, true);
             Intl.textdomain (Build.GETTEXT_PACKAGE);
-            lang_variant_widget.show_variants (_("Languages"), "<b>%s</b>".printf (lang_entry.name));
+            lang_variant_widget.show_variants (lang_entry.name);
     }
 
     private void on_next_button_clicked () {

src/Widgets/VariantWidget.vala

@@ -4,15 +4,20 @@
  */
 
 public class VariantWidget : Gtk.Frame {
+    public string main_title { get; construct; }
+
     public Gtk.ListBox main_listbox { get; private set; }
     public Gtk.ListBox variant_listbox { get; private set; }
 
     public signal void going_to_main ();
 
-    private Gtk.Button back_button;
     private Gtk.Box variant_box;
-    private Gtk.Label variant_title;
-    private Adw.Leaflet leaflet;
+    private Adw.NavigationView navigation_view;
+    private Adw.NavigationPage variant_page;
+
+    public VariantWidget (string main_title) {
+        Object (main_title: main_title);
+    }
 
     construct {
         main_listbox = new Gtk.ListBox ();
@@ -22,17 +27,18 @@ public class VariantWidget : Gtk.Frame {
             hscrollbar_policy = NEVER
         };
 
-        variant_listbox = new Gtk.ListBox () {
-            activate_on_single_click = false
-        };
+        var main_page = new Adw.NavigationPage (main_scrolled, main_title);
+
+        variant_listbox = new Gtk.ListBox ();
+        variant_listbox.activate_on_single_click = false;
 
         var variant_scrolled = new Gtk.ScrolledWindow () {
             child = variant_listbox,
             hscrollbar_policy = NEVER,
             vexpand = true
         };
 
-        back_button = new Gtk.Button () {
+        var back_button = new Gtk.Button.with_label (main_page.title) {
             halign = START,
             margin_top = 6,
             margin_end = 6,
@@ -41,55 +47,53 @@ public class VariantWidget : Gtk.Frame {
         };
         back_button.add_css_class (Granite.STYLE_CLASS_BACK_BUTTON);
 
-        variant_title = new Gtk.Label ("") {
+        var variant_title = new Gtk.Label ("") {
             hexpand = true,
             justify = CENTER,
             margin_end = 6,
             margin_start = 6,
             mnemonic_widget = variant_listbox,
-            use_markup = true,
             wrap = true
         };
+        variant_title.add_css_class (Granite.STYLE_CLASS_H4_LABEL);
 
         var header_box = new Gtk.CenterBox () {
+            start_widget = back_button,
+            center_widget = variant_title,
             hexpand = true
         };
-        header_box.set_start_widget (back_button);
-        header_box.set_center_widget (variant_title);
 
         variant_box = new Gtk.Box (VERTICAL, 0);
         variant_box.add_css_class (Granite.STYLE_CLASS_VIEW);
         variant_box.append (header_box);
         variant_box.append (new Gtk.Separator (HORIZONTAL));
         variant_box.append (variant_scrolled);
 
-        leaflet = new Adw.Leaflet () {
-            can_navigate_back = true,
-            can_unfold = false
-        };
-        leaflet.append (main_scrolled);
-        leaflet.append (variant_box);
+        variant_page = new Adw.NavigationPage (variant_box, "");
+
+        navigation_view = new Adw.NavigationView ();
+        navigation_view.add (main_page);
 
-        child = leaflet;
+        child = navigation_view;
         vexpand = true;
 
         back_button.clicked.connect (() => {
             going_to_main ();
-            leaflet.navigate (BACK);
+            navigation_view.pop ();
         });
+
+        variant_page.bind_property ("title", variant_title, "label");
     }
 
-    public void show_variants (string back_button_label, string variant_title_label) {
-        back_button.label = back_button_label;
-        variant_title.label = variant_title_label;
-        leaflet.visible_child = variant_box;
+    public void show_variants (string variant_title_label) {
+        variant_page.title = variant_title_label;
+        navigation_view.push (variant_page);
+
         variant_listbox.get_selected_row ().grab_focus ();
     }
 
     public void clear_variants () {
-        while (variant_listbox.get_first_child () != null) {
-            variant_listbox.get_first_child ().destroy ();
-        }
+        variant_listbox.remove_all ();
     }
 }