New Account: Slight redesign (#273)
This makes the code simpler, implements the latest GNOME HIG standard, gives a back gesture, and makes the dialog it fit phones. Co-authored-by: Bleak Grey <bleakgrey@e.email>
This commit is contained in:
Adrien Plazas
GitHub
parent
02f168e19d
commit
c407b375a9
|
|
@ -6,137 +6,60 @@
|
|||
<template class="TootleDialogsNewAccount" parent="HdyWindow">
|
||||
<property name="can_focus">False</property>
|
||||
<property name="modal">True</property>
|
||||
<property name="default_width">700</property>
|
||||
<property name="default_height">500</property>
|
||||
<property name="default_width">600</property>
|
||||
<property name="default_height">450</property>
|
||||
<property name="type_hint">dialog</property>
|
||||
<property name="title" translatable="yes">Add Account</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<object class="HdyDeck" id="deck">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="can_swipe_back">True</property>
|
||||
<signal name="notify::visible_child" handler="on_visible_child_notify" swapped="no"/>
|
||||
<child>
|
||||
<object class="HdyHeaderBar">
|
||||
<object class="GtkBox" id="instance_step">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="title" translatable="yes">Add Account</property>
|
||||
<property name="show_close_button">True</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<child>
|
||||
<object class="GtkButton" id="back_button">
|
||||
<property name="label" translatable="yes">Back</property>
|
||||
<property name="width_request">80</property>
|
||||
<object class="HdyHeaderBar">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="receives_default">True</property>
|
||||
<signal name="clicked" handler="on_back_clicked" swapped="no"/>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="next_button">
|
||||
<property name="width_request">80</property>
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="receives_default">True</property>
|
||||
<signal name="clicked" handler="on_next_clicked" swapped="no"/>
|
||||
<property name="title" bind-source="TootleDialogsNewAccount" bind-property="title" bind-flags="sync-create"/>
|
||||
<child>
|
||||
<object class="GtkStack">
|
||||
<object class="GtkButton">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="label" translatable="yes">Next</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">idle</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkSpinner">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="active">True</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">spinner</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="label" translatable="yes">Cancel</property>
|
||||
<signal name="clicked" handler="gtk_widget_destroy" swapped="yes"/>
|
||||
</object>
|
||||
</child>
|
||||
<style>
|
||||
<class name="suggested-action"/>
|
||||
</style>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="receives_default">True</property>
|
||||
<property name="label" translatable="yes">Next</property>
|
||||
<property name="sensitive" bind-source="TootleDialogsNewAccount" bind-property="is_working" bind-flags="sync-create|invert-boolean"/>
|
||||
<signal name="clicked" handler="on_next_clicked" swapped="no"/>
|
||||
<style>
|
||||
<class name="suggested-action"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="pack_type">end</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="pack_type">end</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">0</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="HdyClamp">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="margin_left">18</property>
|
||||
<property name="margin_right">18</property>
|
||||
<property name="margin_top">18</property>
|
||||
<property name="margin_bottom">18</property>
|
||||
<property name="hexpand">True</property>
|
||||
<property name="vexpand">True</property>
|
||||
<property name="maximum_size">400</property>
|
||||
<child>
|
||||
<object class="GtkStack" id="stack">
|
||||
<object class="HdyStatusPage">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="transition_duration">100</property>
|
||||
<property name="transition_type">crossfade</property>
|
||||
<property name="icon_name">network-server-symbolic</property>
|
||||
<property name="title" translatable="yes">What is Your Instance?</property>
|
||||
<child>
|
||||
<object class="GtkBox" id="instance_step">
|
||||
<object class="HdyClamp">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="spacing">24</property>
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="pixel_size">128</property>
|
||||
<property name="icon_name">network-server-symbolic</property>
|
||||
<property name="icon_size">0</property>
|
||||
<style>
|
||||
<class name="dim-label"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">0</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="label" translatable="yes">What is your instance?</property>
|
||||
<style>
|
||||
<class name="title-1"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
<property name="maximum-size">400</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="visible">True</property>
|
||||
|
|
@ -200,56 +123,60 @@
|
|||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">2</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">instance</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="code_step">
|
||||
<property name="visible">True</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<child>
|
||||
<object class="HdyHeaderBar">
|
||||
<property name="visible">True</property>
|
||||
<property name="title" bind-source="TootleDialogsNewAccount" bind-property="title" bind-flags="sync-create"/>
|
||||
<child>
|
||||
<object class="GtkButton">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="label" translatable="yes">Previous</property>
|
||||
<signal name="clicked" handler="on_back_clicked" swapped="no"/>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="code_step">
|
||||
<object class="GtkButton">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="spacing">24</property>
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="pixel_size">128</property>
|
||||
<property name="icon_name">dialog-password-symbolic</property>
|
||||
<property name="icon_size">0</property>
|
||||
<style>
|
||||
<class name="dim-label"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">0</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="label" translatable="yes">Enter authorization code</property>
|
||||
<style>
|
||||
<class name="title-1"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="receives_default">True</property>
|
||||
<property name="label" translatable="yes">Next</property>
|
||||
<property name="sensitive" bind-source="TootleDialogsNewAccount" bind-property="is_working" bind-flags="sync-create|invert-boolean"/>
|
||||
<signal name="clicked" handler="on_next_clicked" swapped="no"/>
|
||||
<style>
|
||||
<class name="suggested-action"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="pack_type">end</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="HdyStatusPage">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="icon_name">dialog-password-symbolic</property>
|
||||
<property name="title" translatable="yes">Enter Authorization Code</property>
|
||||
<child>
|
||||
<object class="HdyClamp">
|
||||
<property name="visible">True</property>
|
||||
<property name="maximum-size">400</property>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="visible">True</property>
|
||||
|
|
@ -286,71 +213,55 @@
|
|||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">2</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">code</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="done_step">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<child>
|
||||
<object class="HdyHeaderBar">
|
||||
<property name="visible">True</property>
|
||||
<property name="title" bind-source="TootleDialogsNewAccount" bind-property="title" bind-flags="sync-create"/>
|
||||
<child>
|
||||
<object class="GtkBox" id="done_step">
|
||||
<object class="GtkButton">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="spacing">24</property>
|
||||
<child>
|
||||
<object class="GtkImage">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="pixel_size">128</property>
|
||||
<property name="icon_name">emblem-default-symbolic</property>
|
||||
<property name="icon_size">0</property>
|
||||
<style>
|
||||
<class name="dim-label"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">0</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel" id="hello_label">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="label">Hello, @user@instance.com!</property>
|
||||
<style>
|
||||
<class name="title-1"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
<property name="can_focus">True</property>
|
||||
<property name="receives_default">True</property>
|
||||
<property name="label" translatable="yes">Done</property>
|
||||
<property name="sensitive" bind-source="TootleDialogsNewAccount" bind-property="is_working" bind-flags="sync-create|invert-boolean"/>
|
||||
<signal name="clicked" handler="on_next_clicked" swapped="no"/>
|
||||
<style>
|
||||
<class name="suggested-action"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">done</property>
|
||||
<property name="position">2</property>
|
||||
<property name="pack_type">end</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
<child>
|
||||
<object class="HdyStatusPage" id="done_page">
|
||||
<property name="visible">True</property>
|
||||
<property name="can_focus">False</property>
|
||||
<property name="icon_name">emblem-default-symbolic</property>
|
||||
<property name="title">Hello, @user@instance.com!</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="position">1</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
</child>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
protected InstanceAccount account { get; set; default = new InstanceAccount.empty (""); }
|
||||
|
||||
[GtkChild]
|
||||
Button back_button;
|
||||
[GtkChild]
|
||||
Button next_button;
|
||||
|
||||
[GtkChild]
|
||||
Stack stack;
|
||||
Hdy.Deck deck;
|
||||
[GtkChild]
|
||||
Box instance_step;
|
||||
[GtkChild]
|
||||
|
|
@ -31,7 +26,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
[GtkChild]
|
||||
Label code_label;
|
||||
[GtkChild]
|
||||
Label hello_label;
|
||||
Hdy.StatusPage done_page;
|
||||
|
||||
public NewAccount () {
|
||||
Object (transient_for: window);
|
||||
|
|
@ -75,15 +70,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
void reset () {
|
||||
message ("Reset state");
|
||||
account = new InstanceAccount.empty (account.instance);
|
||||
stack.visible_child = instance_step;
|
||||
invalidate ();
|
||||
}
|
||||
|
||||
void invalidate () {
|
||||
next_button.sensitive = !is_working;
|
||||
next_button.label = stack.visible_child == done_step ? _("Close") : _("Next");
|
||||
back_button.label = stack.visible_child == done_step ? _("Add Another") : _("Back");
|
||||
back_button.visible = stack.visible_child != instance_step;
|
||||
deck.visible_child = instance_step;
|
||||
}
|
||||
|
||||
void oopsie (string title, string msg = "") {
|
||||
|
|
@ -92,7 +79,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
}
|
||||
|
||||
async void step () throws Error {
|
||||
if (stack.visible_child == done_step) {
|
||||
if (deck.visible_child == done_step) {
|
||||
if (accounts.is_empty ())
|
||||
accounts.switch_account (0);
|
||||
|
||||
|
|
@ -101,7 +88,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
return;
|
||||
}
|
||||
|
||||
if (stack.visible_child == instance_step)
|
||||
if (deck.visible_child == instance_step)
|
||||
setup_instance ();
|
||||
|
||||
if (account.client_secret == null || account.client_id == null) {
|
||||
|
|
@ -143,7 +130,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
account.client_secret = root.get_string_member ("client_secret");
|
||||
message ("OK: Instance registered client");
|
||||
|
||||
stack.visible_child = code_step;
|
||||
deck.visible_child = code_step;
|
||||
open_confirmation_page ();
|
||||
}
|
||||
|
||||
|
|
@ -187,8 +174,8 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
message ("Saving account");
|
||||
accounts.add (account);
|
||||
|
||||
hello_label.label = _("Hello, %s!").printf (account.handle);
|
||||
stack.visible_child = done_step;
|
||||
done_page.title = _("Hello, %s!").printf (account.handle);
|
||||
deck.visible_child = done_step;
|
||||
}
|
||||
|
||||
public void redirect (string uri) {
|
||||
|
|
@ -209,7 +196,6 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
if (is_working) return;
|
||||
|
||||
is_working = true;
|
||||
invalidate ();
|
||||
step.begin ((obj, res) => {
|
||||
try {
|
||||
step.end (res);
|
||||
|
|
@ -221,7 +207,6 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
oopsie (e.message);
|
||||
}
|
||||
is_working = false;
|
||||
invalidate ();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -230,4 +215,12 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
|
|||
reset ();
|
||||
}
|
||||
|
||||
[GtkCallback]
|
||||
void on_visible_child_notify () {
|
||||
if (!deck.transition_running && deck.visible_child == instance_step)
|
||||
reset ();
|
||||
|
||||
deck.can_swipe_back = deck.visible_child != done_step;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue