[connections/add-protocol-selection-to-assistant] assistant: Implement new connection popover design

[Felipe Borges <felipeborges src gnome org>]

commit f258f4aeebe8b8b204e4de094cc8776b96a23ac8
Author: Felipe Borges <felipeborges gnome org>
Date:   Tue Jul 27 13:47:48 2021 +0200

    assistant: Implement new connection popover design
    
    See https://gitlab.gnome.org/Teams/Design/app-mockups/-/raw/61362d9c/connections/connection-popover.png
    
    Fixes #58

 src/assistant.vala  | 51 ++++++++++++++++++++------------
 src/ui/assistant.ui | 83 ++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 92 insertions(+), 42 deletions(-)
---
diff --git a/src/assistant.vala b/src/assistant.vala
index 8e4cdd8..d8b8cf7 100644
--- a/src/assistant.vala
+++ b/src/assistant.vala
@@ -27,12 +27,12 @@ namespace Connections {
         [GtkChild]
         private unowned Gtk.Button create_button; 
         [GtkChild]
-        private unowned Gtk.Label learn_more_label;
+        private unowned Gtk.RadioButton rdp_radio_button;
+        [GtkChild]
+        private unowned Gtk.RadioButton vnc_radio_button;
 
-        construct {
-            // Translators: This is a link which takes users to a documentation page in yelp
-            var learn_more_string = _("Learn more.");
-            learn_more_label.set_markup ("<a href=\'help:gnome-connections/connect\'>%s</a>".printf 
(learn_more_string));
+        private bool uri_has_supported_scheme (string uri) {
+            return uri.has_prefix ("rdp") || uri.has_prefix ("vnc");
         }
 
         [GtkCallback]
@@ -44,33 +44,35 @@ namespace Connections {
             }
 
             var uri = Xml.URI.parse (url_entry.text);
-            if (uri == null || uri.scheme == null || uri.path != null || uri.server == null) {
+            if (uri == null) {
                 create_button.sensitive = false;
 
                 return;
             }
 
-            var port_str = url_entry.text.substring (url_entry.text.last_index_of (":",
-                                                                                   int.max 
(uri.scheme.length + 3,
-                                                                                            
url_entry.text.index_of ("@"))
-                                                                                  )).substring (1);
-
-            if (uri.port > 65535 || port_str != "" && uri.port == 0) {
-                create_button.sensitive = false;
+            rdp_radio_button.set_active (uri.scheme == "rdp");
+            vnc_radio_button.set_active (uri.scheme == "vnc");
 
-                return;
+            if (!uri_has_supported_scheme (url_entry.text)) {
+                uri.server = url_entry.text;
             }
 
-            if (uri.scheme == "vnc" || uri.scheme == "rdp") {
-                create_button.sensitive = true;
-            }
+            create_button.sensitive = uri.server != null;
         }
 
         [GtkCallback]
         private void on_create_connection_button_clicked () {
-            Application.application.add_connection (url_entry.get_text ());
-            url_entry.set_text ("");
+            var uri = url_entry.get_text ();
+
+            // Prefixes the uri string with the selected protocol (when protocol isn't explicit)
+            if (!uri_has_supported_scheme (uri)) {
+                var scheme = rdp_radio_button.get_active () ? "rdp://" : "vnc://";
+                uri = scheme + uri;
+            }
+
+            Application.application.add_connection (uri);
 
+            url_entry.set_text ("");
             popdown ();
         }
 
@@ -79,5 +81,16 @@ namespace Connections {
             if (create_button.sensitive)
                 create_button.clicked ();
         }
+
+        [GtkCallback]
+        private void on_help_button_clicked () {
+            try {
+                Gtk.show_uri_on_window (Application.application.main_window,
+                                        "help:gnome-connections/connect",
+                                        Gtk.get_current_event_time ());
+            } catch (GLib.Error error) {
+                warning ("Failed to display help: %s", error.message);
+            }
+        }
     }
 }
diff --git a/src/ui/assistant.ui b/src/ui/assistant.ui
index d01d77d..4d53e5e 100644
--- a/src/ui/assistant.ui
+++ b/src/ui/assistant.ui
@@ -2,7 +2,7 @@
 <interface>
   <requires lib="gtk+" version="3.20"/>
     <template class="ConnectionsAssistant" parent="GtkPopover">
-      <property name="border-width">10</property>
+      <property name="border-width">20</property>
 
       <child>
         <object class="GtkGrid">
@@ -14,14 +14,15 @@
             <object class="GtkLabel">
               <property name="visible">True</property>
               <property name="halign">start</property>
-              <property name="label" translatable="yes">Connect to a Desktop</property>
-              <attributes>
-                <attribute name="weight" value="bold"/>
-              </attributes>
+              <property name="xalign">0</property>
+              <property name="wrap">True</property>
+              <property name="max-width-chars">40</property>
+              <property name="label" translatable="yes">Enter the network identifier of the remote desktop 
to connect to:</property>
             </object>
             <packing>
               <property name="top-attach">0</property>
               <property name="left-attach">0</property>
+              <property name="width">2</property>
             </packing>
           </child>
 
@@ -36,50 +37,79 @@
             <packing>
               <property name="top-attach">1</property>
               <property name="left-attach">0</property>
+              <property name="width">2</property>
             </packing>
           </child>
 
           <child>
-            <object class="GtkButton" id="create_button">
+            <object class="GtkLabel">
               <property name="visible">True</property>
-              <property name="sensitive">False</property>
-              <property name="label" translatable="yes">Connect</property>
-              <signal name="clicked" handler="on_create_connection_button_clicked"/>
-              <style>
-                <class name="suggested-action"/>
-              </style>
+              <property name="halign">start</property>
+              <property name="label" translatable="yes">Connection Type</property>
+              <attributes>
+                <attribute name="weight" value="bold"/>
+              </attributes>
             </object>
             <packing>
-              <property name="top-attach">1</property>
-              <property name="left-attach">1</property>
+              <property name="top-attach">2</property>
+              <property name="left-attach">0</property>
             </packing>
           </child>
 
           <child>
-            <object class="GtkLabel">
+            <object class="GtkRadioButton" id="rdp_radio_button">
               <property name="visible">True</property>
-              <property name="label" translatable="yes">Addresses start with either vnc:// or 
rdp://.</property>
-              <style>
-                <class name="dim-label"/>
-              </style>
+              <property name="label" translatable="yes">RDP (standard for connecting to Windows)</property>
             </object>
             <packing>
-              <property name="top-attach">2</property>
+              <property name="top-attach">3</property>
+              <property name="left-attach">0</property>
+              <property name="width">2</property>
+            </packing>
+          </child>
+
+          <child>
+            <object class="GtkRadioButton" id="vnc_radio_button">
+              <property name="visible">True</property>
+              <property name="group">rdp_radio_button</property>
+              <property name="label" translatable="yes">VNC (standard for connecting to Linux)</property>
+            </object>
+            <packing>
+              <property name="top-attach">4</property>
               <property name="left-attach">0</property>
+              <property name="width">2</property>
             </packing>
           </child>
 
           <child>
-            <object class="GtkLabel" id="learn_more_label">
+            <object class="GtkButton" id="help_button">
               <property name="visible">True</property>
-              <property name="use-markup">True</property>
               <property name="halign">start</property>
+              <property name="label" translatable="yes">Help</property>
+              <signal name="clicked" handler="on_help_button_clicked"/>
             </object>
             <packing>
-              <property name="top-attach">3</property>
+              <property name="top-attach">5</property>
               <property name="left-attach">0</property>
             </packing>
           </child>
+
+          <child>
+            <object class="GtkButton" id="create_button">
+              <property name="visible">True</property>
+              <property name="sensitive">False</property>
+              <property name="halign">end</property>
+              <property name="label" translatable="yes">Connect</property>
+              <signal name="clicked" handler="on_create_connection_button_clicked"/>
+              <style>
+                <class name="suggested-action"/>
+              </style>
+            </object>
+            <packing>
+              <property name="top-attach">5</property>
+              <property name="left-attach">1</property>
+            </packing>
+          </child>
         </object>
       </child>
     </template>
@@ -104,4 +134,11 @@
         </row>
       </data>
     </object>
+
+    <object class="GtkSizeGroup">
+      <widgets>
+        <widget name="help_button"/>
+        <widget name="create_button"/>
+      </widgets>
+    </object>
   </interface>