Skip to content

Responsive #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
danirabbit wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Responsive #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8102913
AbstractInstallerView: handle more layout
danirabbit Nov 17, 2022
baaf21b
Merge branch 'master' into abstractlayout
danirabbit Nov 17, 2022
290b36b
Merge branch 'master' into abstractlayout
danirabbit Nov 17, 2022
7c003cc
Merge branch 'master' into abstractlayout
danirabbit Nov 17, 2022
57775e5
Responsive layout
danirabbit Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 41 additions & 14 deletions src/Views/AbstractInstallerView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,57 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

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);
}
}
35 changes: 19 additions & 16 deletions src/Views/AccountView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -475,18 +477,19 @@ public class Installer.AccountView : AbstractInstallerView {

public string label {
set {
label_widget.label = "<span font_size=\"small\">%s</span>".printf (value);
label_widget.label = value;
}
}

public ErrorRevealer (string label) {
label_widget = new Gtk.Label ("<span font_size=\"small\">%s</span>".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);
Expand Down
19 changes: 9 additions & 10 deletions src/Views/KeyboardLayoutView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ();

Expand All @@ -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
Expand Down
19 changes: 10 additions & 9 deletions src/Views/LanguageView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 (() => {
Expand All @@ -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 (() => {
Expand Down Expand Up @@ -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);
Expand All @@ -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 ();
}
Expand Down
19 changes: 11 additions & 8 deletions src/Views/NetworkView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down