From 9b0229e4cc6c132cabab8a59b10f68ffeb629196 Mon Sep 17 00:00:00 2001
From: Bleak Grey <bleakgrey@e.email>
Date: Tue, 2 Feb 2021 13:19:13 +0300
Subject: [PATCH] Revert "New Account: Slight redesign (#273)" (#277)

This reverts commit c407b375a9d6e89e663ec21e6c252b643c627e54.
---
 data/ui/dialogs/new_account.ui | 335 +++++++++++++++++++++------------
 src/Dialogs/NewAccount.vala    |  39 ++--
 2 files changed, 235 insertions(+), 139 deletions(-)

diff --git a/data/ui/dialogs/new_account.ui b/data/ui/dialogs/new_account.ui
index cf80526..25deeba 100644
--- a/data/ui/dialogs/new_account.ui
+++ b/data/ui/dialogs/new_account.ui
@@ -6,60 +6,137 @@
   <template class="TootleDialogsNewAccount" parent="HdyWindow">
     <property name="can_focus">False</property>
     <property name="modal">True</property>
-    <property name="default_width">600</property>
-    <property name="default_height">450</property>
+    <property name="default_width">700</property>
+    <property name="default_height">500</property>
     <property name="type_hint">dialog</property>
-    <property name="title" translatable="yes">Add Account</property>
     <child>
-      <object class="HdyDeck" id="deck">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="can_swipe_back">True</property>
-        <signal name="notify::visible_child" handler="on_visible_child_notify" swapped="no"/>
+        <property name="orientation">vertical</property>
         <child>
-          <object class="GtkBox" id="instance_step">
+          <object class="HdyHeaderBar">
             <property name="visible">True</property>
-            <property name="orientation">vertical</property>
+            <property name="can_focus">False</property>
+            <property name="title" translatable="yes">Add Account</property>
+            <property name="show_close_button">True</property>
             <child>
-              <object class="HdyHeaderBar">
+              <object class="GtkButton" id="back_button">
+                <property name="label" translatable="yes">Back</property>
+                <property name="width_request">80</property>
                 <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">Cancel</property>
-                    <signal name="clicked" handler="gtk_widget_destroy" swapped="yes"/>
-                  </object>
-                </child>
-                <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>
+                <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="HdyStatusPage">
+              <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"/>
+                <child>
+                  <object class="GtkStack">
+                    <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>
+                  </object>
+                </child>
+                <style>
+                  <class name="suggested-action"/>
+                </style>
+              </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">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="icon_name">network-server-symbolic</property>
-                <property name="title" translatable="yes">What is Your Instance?</property>
+                <property name="valign">center</property>
+                <property name="transition_duration">100</property>
+                <property name="transition_type">crossfade</property>
                 <child>
-                  <object class="HdyClamp">
+                  <object class="GtkBox" id="instance_step">
                     <property name="visible">True</property>
-                    <property name="maximum-size">400</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>
                     <child>
                       <object class="GtkBox">
                         <property name="visible">True</property>
@@ -123,60 +200,56 @@
                           </packing>
                         </child>
                       </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">2</property>
+                      </packing>
                     </child>
                   </object>
-                </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="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>
+                    <property name="name">instance</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">
+                  <object class="GtkBox" id="code_step">
                     <property name="visible">True</property>
-                    <property name="maximum-size">400</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>
                     <child>
                       <object class="GtkBox">
                         <property name="visible">True</property>
@@ -213,55 +286,71 @@
                           </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="GtkButton">
+                  <object class="GtkBox" id="done_step">
                     <property name="visible">True</property>
-                    <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>
+                    <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>
                   </object>
                   <packing>
-                    <property name="pack_type">end</property>
+                    <property name="name">done</property>
+                    <property name="position">2</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>
diff --git a/src/Dialogs/NewAccount.vala b/src/Dialogs/NewAccount.vala
index 5eb146a..9d6f270 100644
--- a/src/Dialogs/NewAccount.vala
+++ b/src/Dialogs/NewAccount.vala
@@ -11,7 +11,12 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 	protected InstanceAccount account { get; set; default = new InstanceAccount.empty (""); }
 
 	[GtkChild]
-	Hdy.Deck deck;
+	Button back_button;
+	[GtkChild]
+	Button next_button;
+
+	[GtkChild]
+	Stack stack;
 	[GtkChild]
 	Box instance_step;
 	[GtkChild]
@@ -26,7 +31,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 	[GtkChild]
 	Label code_label;
 	[GtkChild]
-	Hdy.StatusPage done_page;
+	Label hello_label;
 
 	public NewAccount () {
 		Object (transient_for: window);
@@ -70,7 +75,15 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 	void reset () {
 		message ("Reset state");
 		account = new InstanceAccount.empty (account.instance);
-		deck.visible_child = instance_step;
+		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;
 	}
 
 	void oopsie (string title, string msg = "") {
@@ -79,7 +92,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 	}
 
 	async void step () throws Error {
-		if (deck.visible_child == done_step) {
+		if (stack.visible_child == done_step) {
 			if (accounts.is_empty ())
 				accounts.switch_account (0);
 
@@ -88,7 +101,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 			return;
 		}
 
-		if (deck.visible_child == instance_step)
+		if (stack.visible_child == instance_step)
 			setup_instance ();
 
 		if (account.client_secret == null || account.client_id == null) {
@@ -130,7 +143,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 		account.client_secret = root.get_string_member ("client_secret");
 		message ("OK: Instance registered client");
 
-		deck.visible_child = code_step;
+		stack.visible_child = code_step;
 		open_confirmation_page ();
 	}
 
@@ -174,8 +187,8 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 		message ("Saving account");
 		accounts.add (account);
 
-		done_page.title = _("Hello, %s!").printf (account.handle);
-		deck.visible_child = done_step;
+		hello_label.label = _("Hello, %s!").printf (account.handle);
+		stack.visible_child = done_step;
 	}
 
 	public void redirect (string uri) {
@@ -196,6 +209,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 		if (is_working) return;
 
 		is_working = true;
+		invalidate ();
 		step.begin ((obj, res) => {
 			try {
 				step.end (res);
@@ -207,6 +221,7 @@ public class Tootle.Dialogs.NewAccount: Hdy.Window {
 				oopsie (e.message);
 			}
 			is_working = false;
+			invalidate ();
 		});
 	}
 
@@ -215,12 +230,4 @@ 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;
-	}
-
 }