From f331bd942ebce5c0e01aec98bf111e6e06d4fcae Mon Sep 17 00:00:00 2001 From: Marco Loletti Date: Thu, 17 Aug 2023 14:39:01 +0000 Subject: [PATCH] ui(): Restyle link pages --- CHANGELOG.md | 4 + .../scalable/status/phonelink2-symbolic.svg | 2 + .../status}/view-more-horizontal-symbolic.svg | 0 data/resources/resources.gresource.xml | 4 +- data/resources/style.css | 5 + data/resources/ui/link_window.blp | 119 ++++++++++++++---- src/gui/link_window.rs | 31 ++++- 7 files changed, 135 insertions(+), 30 deletions(-) create mode 100644 data/resources/icons/scalable/status/phonelink2-symbolic.svg rename data/{icons => resources/icons/scalable/status}/view-more-horizontal-symbolic.svg (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91e6aac..7c5d192 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/data/resources/icons/scalable/status/phonelink2-symbolic.svg b/data/resources/icons/scalable/status/phonelink2-symbolic.svg new file mode 100644 index 0000000..0ae8cce --- /dev/null +++ b/data/resources/icons/scalable/status/phonelink2-symbolic.svg @@ -0,0 +1,2 @@ + + diff --git a/data/icons/view-more-horizontal-symbolic.svg b/data/resources/icons/scalable/status/view-more-horizontal-symbolic.svg similarity index 100% rename from data/icons/view-more-horizontal-symbolic.svg rename to data/resources/icons/scalable/status/view-more-horizontal-symbolic.svg diff --git a/data/resources/resources.gresource.xml b/data/resources/resources.gresource.xml index 2051bbf..c252a89 100644 --- a/data/resources/resources.gresource.xml +++ b/data/resources/resources.gresource.xml @@ -2,7 +2,6 @@ ../icons/de.schmidhuberj.Flare.svg - ../icons/view-more-horizontal-symbolic.svg ui/window.ui ui/channel_list.ui @@ -33,5 +32,8 @@ style.css style-dark.css + icons/scalable/status/view-more-horizontal-symbolic.svg + icons/scalable/status/phonelink2-symbolic.svg + diff --git a/data/resources/style.css b/data/resources/style.css index b3c023e..3fac4a8 100644 --- a/data/resources/style.css +++ b/data/resources/style.css @@ -79,3 +79,8 @@ group { .download-media { margin-bottom: 14px; } + +.qr-code { + padding:18px; + background-color: white; +} \ No newline at end of file diff --git a/data/resources/ui/link_window.blp b/data/resources/ui/link_window.blp index 330390e..3bbe88c 100644 --- a/data/resources/ui/link_window.blp +++ b/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."); - } - } + }; + }; } diff --git a/src/gui/link_window.rs b/src/gui/link_window.rs index fd1dffc..d87fbea 100644 --- a/src/gui/link_window.rs +++ b/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) @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, + #[template_child] + pub(super) content: TemplateChild, #[template_child] qr_image: TemplateChild, @@ -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);