ui(): Restyle link pages

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Better UI for linking.
+
 ## [0.9.3] - 2023-08-17
 
 ### Added

data/resources/icons/scalable/status/phonelink2-symbolic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 2 4.035156 v 6.964844 h -2 c 0 1.105469 0.894531 2 2 2 h 8 v -2 h -6 v -7 h 9 v 2 h 2 v -2.042969 c 0 -1.082031 -0.875 -1.957031 -1.957031 -1.957031 h -9.007813 c -1.125 0 -2.035156 0.910156 -2.035156 2.035156 z m 0 0"/><path d="m 11 8.015625 v 5.042969 c 0 0.519531 0.421875 0.941406 0.941406 0.941406 h 3.058594 c 0.550781 0 1 -0.449219 1 -1 v -5 c 0 -0.550781 -0.449219 -1 -1 -1 h -2.984375 c -0.5625 0 -1.015625 0.453125 -1.015625 1.015625 z m 1 -0.015625 h 3 v 4 h -3 z m 0 0"/></svg>

data/resources/resources.gresource.xml

@@ -2,7 +2,6 @@
 <gresources>
   <gresource prefix="/">
     <file alias="icon.png">../icons/de.schmidhuberj.Flare.svg</file>
-    <file preprocess="xml-stripblanks">../icons/view-more-horizontal-symbolic.svg</file>
 
     <file preprocess="xml-stripblanks">ui/window.ui</file>
     <file preprocess="xml-stripblanks">ui/channel_list.ui</file>
@@ -33,5 +32,8 @@
   <gresource prefix="/de/schmidhuberj/Flare/">
     <file compressed="true">style.css</file>
     <file compressed="true">style-dark.css</file>
+    <file preprocess="xml-stripblanks">icons/scalable/status/view-more-horizontal-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">icons/scalable/status/phonelink2-symbolic.svg</file>
   </gresource>
 </gresources>
+

data/resources/style.css

@@ -79,3 +79,8 @@ group {
 .download-media {
 	margin-bottom: 14px;
 }
+
+.qr-code {
+	padding:18px;
+  background-color: white;
+}

data/resources/ui/link_window.blp

@@ -3,35 +3,106 @@ using Adw 1;
 
 template $FlLinkWindow : Adw.Window {
   can-focus: true;
-  title: _("Link Device");
   default-height: 600;
-  default-width: 500;
+  default-width: 450;
+  resizable: false;
   destroy-with-parent: true;
+  modal: true;
 
-  Box {
-    orientation: vertical;
+  content: Adw.ToastOverlay toast_overlay {
+  child: Box {
+      orientation: vertical;
 
-    Label {
-      label: _("Please scan this QR code with your primary device.");
-    }
+      Adw.Leaflet content {
+        can-unfold: false;
+        vexpand: true;
+        can-navigate-back: true;
+      
+        Adw.LeafletPage {
+          navigatable: true;
+          name: "qr-code-page";
+          child:  Box {
+            orientation: vertical;
+            Adw.HeaderBar {
+              styles ["flat"]
+              title-widget: Adw.WindowTitle {
+                title: _("Link device");
+              };
+            }
+          
+            Adw.StatusPage {
+              title: _("Scan Code");
+              description: _("Scan this code with another Signal app logged into your account.");
+              vexpand: true;
+              child: Box {
+                orientation: vertical;
 
-    Picture qr_image {
-    }
+                Adw.Bin {
+                  Picture qr_image {
+                    styles [
+                      "qr-code",
+                      "card",
+                    ]
+                    height-request: 200;
+                    width-request: 200;
+                    halign: center;
+                    overflow: hidden;
+                  }
+                }
+                
+                Button switch_show_url {
+                  styles [
+                    "pill",
+                    "text-button",
+                  ]
+                  margin-top: 30;
+                  label: _("Link without scanning");
+                  halign: center;
+                  clicked => $forward() swapped;
+                }
+              };
+            }
+          };
+        }
+      
+        Adw.LeafletPage {
+          name: "link-without-scanning";
+          navigatable: true;
+          child:  Box {
+            orientation: vertical;
 
-    Button switch_show_url {
-      accessibility {
-        label: C_("accessibility", "Copy to clipboard");
+            Adw.HeaderBar {
+              styles ["flat"]
+              Button {
+                clicked => $previous() swapped;
+                icon-name: "go-previous-symbolic";
+              }
+              title-widget: Adw.WindowTitle {
+                title: _("Link device");
+              };
+            }
+
+            Adw.StatusPage {
+              title: _("Manual Linking");
+              description: _("If your device can't scan the QR code, you can manually enter the link provided here");
+              icon-name: "phonelink2-symbolic";
+              vexpand: true;
+              
+              Button  {
+                styles [
+                  "pill",
+                  "suggested-action",
+                  "text-button",
+                ]
+                
+                label: _("Copy to clipboard");
+                halign: center;
+                clicked => $handle_clipboard() swapped;
+              }
+            }
+          };
+        }  
       }
-
-      tooltip-text: "Copy to clipboard";
-      icon-name: "edit-copy-symbolic";
-      hexpand: false;
-      halign: center;
-      clicked => $handle_clipboard() swapped;
-    }
-
-    Label {
-      label: _("Please wait until the contacts are displayed after linking.");
-    }
-  }
+    };
+  };
 }

src/gui/link_window.rs

@@ -1,8 +1,7 @@
+use crate::backend::Manager;
 use glib::{prelude::IsA, Object, ObjectExt};
 use gtk::glib;
 
-use crate::backend::Manager;
-
 glib::wrapper! {
     pub struct LinkWindow(ObjectSubclass<imp::LinkWindow>)
         @extends libadwaita::Window, gtk::Window, gtk::Widget,
@@ -26,9 +25,8 @@ impl LinkWindow {
 }
 
 pub mod imp {
-    use std::cell::RefCell;
-
     use gdk::gdk_pixbuf::Pixbuf;
+    use gettextrs::gettext;
     use gio::MemoryInputStream;
     use glib::{
         clone, once_cell::sync::Lazy, subclass::InitializingObject, Bytes, ParamSpec,
@@ -37,12 +35,18 @@ pub mod imp {
     use gtk::{gdk, gio, glib};
     use gtk::{prelude::*, subclass::prelude::*, CompositeTemplate};
     use libadwaita::subclass::prelude::*;
+    use libadwaita::Toast;
+    use std::cell::RefCell;
 
     use crate::backend::Manager;
 
     #[derive(CompositeTemplate, Default)]
     #[template(resource = "/ui/link_window.ui")]
     pub struct LinkWindow {
+        #[template_child]
+        pub(super) toast_overlay: TemplateChild<libadwaita::ToastOverlay>,
+        #[template_child]
+        pub(super) content: TemplateChild<libadwaita::Leaflet>,
         #[template_child]
         qr_image: TemplateChild<gtk::Picture>,
 
@@ -57,6 +61,23 @@ pub mod imp {
             let obj = self.obj();
             let clipboard = obj.clipboard();
             clipboard.set_text(&obj.url());
+
+            let toast = Toast::new(&gettext("Copied to clipboard"));
+            obj.imp().toast_overlay.add_toast(toast);
+        }
+        #[template_callback]
+        fn previous(&self) {
+            let obj = self.obj();
+            obj.imp()
+                .content
+                .navigate(libadwaita::NavigationDirection::Back);
+        }
+        #[template_callback]
+        fn forward(&self) {
+            let obj = self.obj();
+            obj.imp()
+                .content
+                .navigate(libadwaita::NavigationDirection::Forward);
         }
     }
 
@@ -129,7 +150,7 @@ pub mod imp {
                         let bytes_vec = qrcode_generator::to_png_to_vec(
                             url,
                             qrcode_generator::QrCodeEcc::Low,
-                            1024,
+                            200,
                         )
                         .expect("Failed to generate QR code");
                         let bytes_glib = Bytes::from_owned(bytes_vec);