diff --git a/src/Views/AbstractInstallerView.vala b/src/Views/AbstractInstallerView.vala index 07c6a1e5..55e80755 100644 --- a/src/Views/AbstractInstallerView.vala +++ b/src/Views/AbstractInstallerView.vala @@ -15,30 +15,57 @@ * along with this program. If not, see . */ -public abstract class AbstractInstallerView : Gtk.Grid { +public abstract class AbstractInstallerView : Gtk.Box { public signal void next_step (); - protected Gtk.Grid content_area; - protected Gtk.ButtonBox action_area; + protected Gtk.Box title_area; + protected Gtk.FlowBoxChild content_area; + protected Gtk.Box action_area; construct { - content_area = new Gtk.Grid () { - column_homogeneous = true, + title_area = new Gtk.Box (Gtk.Orientation.VERTICAL, 12) { + width_request = 300, // Prevent layout flipping in language view + }; + title_area.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); + + var title_child = new Gtk.FlowBoxChild () { + can_focus = false, + valign = Gtk.Align.CENTER + }; + title_child.add (title_area); + + content_area = new Gtk.FlowBoxChild () { + can_focus = false, + vexpand = true + }; + + var flowbox = new Gtk.FlowBox () { + max_children_per_line = 2, + min_children_per_line = 1, + selection_mode = Gtk.SelectionMode.NONE, + vexpand = true, column_spacing = 12, - row_spacing = 12, - expand = true, - orientation = Gtk.Orientation.VERTICAL + row_spacing = 12 }; + flowbox.add (title_child); + flowbox.add (content_area); + + var size_group = new Gtk.SizeGroup (Gtk.SizeGroupMode.HORIZONTAL); + size_group.add_widget (title_area); + size_group.add_widget (content_area); - action_area = new Gtk.ButtonBox (Gtk.Orientation.HORIZONTAL) { - spacing = 6, - layout_style = Gtk.ButtonBoxStyle.END + action_area = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6) { + halign = Gtk.Align.END, + homogeneous = true }; orientation = Gtk.Orientation.VERTICAL; - margin = 12; - row_spacing = 24; - add (content_area); + margin_top = 12; + margin_end = 12; + margin_bottom = 12; + margin_start = 12; + spacing = 24; + add (flowbox); add (action_area); } } diff --git a/src/Views/AccountView.vala b/src/Views/AccountView.vala index 68bdcb16..fad3259b 100644 --- a/src/Views/AccountView.vala +++ b/src/Views/AccountView.vala @@ -64,8 +64,6 @@ public class Installer.AccountView : AbstractInstallerView { }; var title_label = new Gtk.Label (_("Create an Account")); - title_label.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); - title_label.valign = Gtk.Align.START; var realname_label = new Granite.HeaderLabel (_("Full Name")); @@ -119,13 +117,14 @@ public class Installer.AccountView : AbstractInstallerView { }); var hostname_info = new Gtk.Label (_("Visible to other devices when sharing, e.g. with Bluetooth or over the network.")) { + hexpand = true, // Wrap without expanding the view - max_width_chars = 0, - margin_bottom = 18, + max_width_chars = 1, wrap = true, xalign = 0 }; hostname_info.get_style_context ().add_class (Gtk.STYLE_CLASS_DIM_LABEL); + hostname_info.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL); var form_grid = new Gtk.Grid (); form_grid.row_spacing = 3; @@ -148,11 +147,14 @@ public class Installer.AccountView : AbstractInstallerView { form_grid.attach (hostname_entry, 0, 14, 1, 1); form_grid.attach (hostname_info, 0, 15, 1, 1); - content_area.attach (avatar, 0, 0); - content_area.attach (title_label, 0, 1, 1, 1); - content_area.attach (form_grid, 1, 0, 1, 2); + title_area.add (avatar); + title_area.add (title_label); - var back_button = new Gtk.Button.with_label (_("Back")); + content_area.add (form_grid); + + var back_button = new Gtk.Button.with_label (_("Back")) { + width_request = 86 + }; finish_button = new Gtk.Button.with_label (_("Finish Setup")); finish_button.can_default = true; @@ -475,18 +477,19 @@ public class Installer.AccountView : AbstractInstallerView { public string label { set { - label_widget.label = "%s".printf (value); + label_widget.label = value; } } public ErrorRevealer (string label) { - label_widget = new Gtk.Label ("%s".printf (label)); - label_widget.halign = Gtk.Align.END; - label_widget.justify = Gtk.Justification.RIGHT; - label_widget.max_width_chars = 55; - label_widget.use_markup = true; - label_widget.wrap = true; - label_widget.xalign = 1; + label_widget = new Gtk.Label (label) { + halign = Gtk.Align.END, + justify = Gtk.Justification.RIGHT, + max_width_chars = 55, + wrap = true, + xalign = 1 + }; + label_widget.get_style_context ().add_class (Granite.STYLE_CLASS_SMALL_LABEL); transition_type = Gtk.RevealerTransitionType.CROSSFADE; add (label_widget); diff --git a/src/Views/KeyboardLayoutView.vala b/src/Views/KeyboardLayoutView.vala index 119c1711..5c25f549 100644 --- a/src/Views/KeyboardLayoutView.vala +++ b/src/Views/KeyboardLayoutView.vala @@ -20,14 +20,10 @@ public class KeyboardLayoutView : AbstractInstallerView { construct { var image = new Gtk.Image.from_icon_name ("input-keyboard", Gtk.IconSize.DIALOG) { - pixel_size = 128, - valign = Gtk.Align.END + pixel_size = 128 }; - var title_label = new Gtk.Label (_("Select Keyboard Layout")) { - valign = Gtk.Align.START - }; - title_label.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); + var title_label = new Gtk.Label (_("Select Keyboard Layout")); input_variant_widget = new VariantWidget (); @@ -46,11 +42,14 @@ public class KeyboardLayoutView : AbstractInstallerView { stack_grid.add (input_variant_widget); stack_grid.add (keyboard_test_entry); - content_area.attach (image, 0, 0); - content_area.attach (title_label, 0, 1); - content_area.attach (stack_grid, 1, 0, 1, 2); + title_area.add (image); + title_area.add (title_label); + + content_area.add (stack_grid); - var back_button = new Gtk.Button.with_label (_("Back")); + var back_button = new Gtk.Button.with_label (_("Back")) { + width_request = 86 + }; var next_button = new Gtk.Button.with_label (_("Select")) { sensitive = false diff --git a/src/Views/LanguageView.vala b/src/Views/LanguageView.vala index a1fc45be..d63fb20c 100644 --- a/src/Views/LanguageView.vala +++ b/src/Views/LanguageView.vala @@ -43,8 +43,7 @@ public class Installer.LanguageView : AbstractInstallerView { construct { var image = new Gtk.Image.from_icon_name ("preferences-desktop-locale", Gtk.IconSize.DIALOG) { - pixel_size = 128, - valign = Gtk.Align.END + pixel_size = 128 }; select_label = new Gtk.Label (null) { @@ -54,10 +53,8 @@ public class Installer.LanguageView : AbstractInstallerView { }; select_stack = new Gtk.Stack () { - transition_type = Gtk.StackTransitionType.CROSSFADE, - valign = Gtk.Align.START + transition_type = Gtk.StackTransitionType.CROSSFADE }; - select_stack.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); select_stack.add (select_label); select_stack.notify["transition-running"].connect (() => { @@ -70,7 +67,9 @@ public class Installer.LanguageView : AbstractInstallerView { } }); - lang_variant_widget = new VariantWidget (); + lang_variant_widget = new VariantWidget () { + vexpand = true + }; lang_variant_widget.variant_listbox.set_sort_func ((Gtk.ListBoxSortFunc) CountryRow.compare); lang_variant_widget.variant_listbox.row_activated.connect (() => { @@ -107,6 +106,7 @@ public class Installer.LanguageView : AbstractInstallerView { } next_button = new Gtk.Button.with_label (_("Select")) { + width_request = 86, sensitive = false }; next_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION); @@ -131,9 +131,10 @@ public class Installer.LanguageView : AbstractInstallerView { lang_variant_widget.main_listbox.row_selected.disconnect (row_selected); }); - content_area.attach (image, 0, 0); - content_area.attach (select_stack, 0, 1); - content_area.attach (lang_variant_widget, 1, 0, 1, 2); + title_area.add (image); + title_area.add (select_stack); + + content_area.add (lang_variant_widget); timeout (); } diff --git a/src/Views/NetworkView.vala b/src/Views/NetworkView.vala index 83d79c95..1827690c 100644 --- a/src/Views/NetworkView.vala +++ b/src/Views/NetworkView.vala @@ -23,14 +23,14 @@ public class Installer.NetworkView : AbstractInstallerView { construct { var image = new Gtk.Image.from_icon_name ("network-wireless", Gtk.IconSize.DIALOG) { - pixel_size = 128, - valign = Gtk.Align.END + pixel_size = 128 }; var title_label = new Gtk.Label (_("Connect Network")) { - valign = Gtk.Align.START + hexpand = true, + max_width_chars = 1, // Make Gtk wrap, but not expand the window + wrap = true }; - title_label.get_style_context ().add_class (Granite.STYLE_CLASS_H2_LABEL); var details_label = new Gtk.Label (_("An Internet connection is required to receive updates, install new apps, and connect to online services")) { hexpand = true, @@ -80,11 +80,14 @@ public class Installer.NetworkView : AbstractInstallerView { choice_grid.attach (wired_image, 0, 2); choice_grid.attach (wired_label, 1, 2); - content_area.attach (image, 0, 0); - content_area.attach (title_label, 0, 1); - content_area.attach (choice_grid, 1, 0, 1, 2); + title_area.add (image); + title_area.add (title_label); - var back_button = new Gtk.Button.with_label (_("Back")); + content_area.add (choice_grid); + + var back_button = new Gtk.Button.with_label (_("Back")) { + width_request = 86 + }; skip_button = new Gtk.Button.with_label (_("Skip")); skip_button.get_style_context ().add_class (Gtk.STYLE_CLASS_SUGGESTED_ACTION);