Modernize login dialog

This commit is contained in:
Elias Projahn 2021-01-30 22:23:03 +01:00
parent 7bf82eefbc
commit c9d9c1bc24
4 changed files with 145 additions and 126 deletions

View file

@ -2,85 +2,87 @@
<interface> <interface>
<requires lib="gtk" version="4.0"/> <requires lib="gtk" version="4.0"/>
<requires lib="libadwaita" version="1.0"/> <requires lib="libadwaita" version="1.0"/>
<object class="AdwWindow" id="window"> <object class="GtkStack" id="widget">
<property name="modal">True</property> <property name="transition-type">crossfade</property>
<property name="default-width">350</property>
<child> <child>
<object class="GtkStack" id="stack"> <object class="GtkStackPage">
<property name="transition-type">crossfade</property> <property name="name">content</property>
<child> <property name="child">
<object class="GtkStackPage"> <object class="GtkBox">
<property name="name">content</property> <property name="orientation">vertical</property>
<property name="child"> <child>
<object class="GtkBox"> <object class="AdwHeaderBar">
<property name="orientation">vertical</property> <property name="show-start-title-buttons">false</property>
<property name="show-end-title-buttons">false</property>
<property name="title-widget">
<object class="GtkLabel">
</object>
</property>
<child> <child>
<object class="AdwHeaderBar"> <object class="GtkButton" id="cancel_button">
<property name="show-start-title-buttons">false</property> <property name="label" translatable="yes">Cancel</property>
<property name="show-end-title-buttons">false</property>
<property name="title-widget">
<object class="GtkLabel">
<property name="label" translatable="yes">Login</property>
<style>
<class name="title"/>
</style>
</object>
</property>
<child>
<object class="GtkButton" id="cancel_button">
<property name="label" translatable="yes">Cancel</property>
</object>
</child>
<child type="end">
<object class="GtkButton" id="login_button">
<property name="label" translatable="yes">Login</property>
<property name="has-default">True</property>
<style>
<class name="suggested-action"/>
</style>
</object>
</child>
</object> </object>
</child> </child>
<child> <child type="end">
<object class="GtkInfoBar" id="info_bar"> <object class="GtkButton" id="login_button">
<property name="message-type">error</property> <property name="label" translatable="yes">Login</property>
<property name="revealed">False</property> <style>
<child> <class name="suggested-action"/>
<object class="GtkLabel"> </style>
<property name="label" translatable="yes">The login credentials were wrong!</property>
</object>
</child>
</object> </object>
</child> </child>
</object>
</child>
<child>
<object class="GtkInfoBar" id="info_bar">
<property name="revealed">False</property>
</object>
</child>
<child>
<object class="GtkScrolledWindow">
<property name="vexpand">true</property>
<child> <child>
<object class="GtkListBox"> <object class="AdwClamp">
<property name="selection-mode">none</property> <property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="margin-top">18</property>
<property name="margin-bottom">12</property>
<property name="maximum-size">500</property>
<property name="tightening-threshold">300</property>
<child> <child>
<object class="AdwActionRow"> <object class="GtkFrame">
<property name="activatable">True</property> <property name="valign">start</property>
<property name="title" translatable="yes">Username</property>
<property name="activatable-widget">username_entry</property>
<child> <child>
<object class="GtkEntry" id="username_entry"> <object class="GtkListBox">
<property name="valign">center</property> <property name="selection-mode">none</property>
<property name="hexpand">True</property> <child>
</object> <object class="AdwActionRow">
</child> <property name="activatable">True</property>
</object> <property name="title" translatable="yes">Username</property>
</child> <property name="activatable-widget">username_entry</property>
<child> <child>
<object class="AdwActionRow"> <object class="GtkEntry" id="username_entry">
<property name="activatable">True</property> <property name="valign">center</property>
<property name="title" translatable="yes">Password</property> <property name="hexpand">True</property>
<property name="activatable-widget">password_entry</property> </object>
<child> </child>
<object class="GtkEntry" id="password_entry"> </object>
<property name="valign">center</property> </child>
<property name="hexpand">True</property> <child>
<property name="visibility">False</property> <object class="AdwActionRow">
<property name="activates-default">True</property> <property name="activatable">True</property>
<property name="input-purpose">password</property> <property name="title" translatable="yes">Password</property>
<property name="activatable-widget">password_entry</property>
<child>
<object class="GtkEntry" id="password_entry">
<property name="valign">center</property>
<property name="hexpand">True</property>
<property name="visibility">False</property>
<property name="input-purpose">password</property>
</object>
</child>
</object>
</child>
</object> </object>
</child> </child>
</object> </object>
@ -88,49 +90,43 @@
</object> </object>
</child> </child>
</object> </object>
</property> </child>
</object> </object>
</child> </property>
<child> </object>
<object class="GtkStackPage"> </child>
<property name="name">loading</property> <child>
<property name="child"> <object class="GtkStackPage">
<object class="GtkBox"> <property name="name">loading</property>
<property name="orientation">vertical</property> <property name="child">
<child> <object class="GtkBox">
<object class="AdwHeaderBar"> <property name="orientation">vertical</property>
<property name="show-start-title-buttons">false</property> <child>
<property name="show-end-title-buttons">false</property> <object class="AdwHeaderBar">
<property name="title-widget"> <property name="show-start-title-buttons">false</property>
<object class="GtkLabel"> <property name="show-end-title-buttons">false</property>
<property name="label" translatable="yes">Login</property> <property name="title-widget">
<style> <object class="GtkLabel">
<class name="title"/> <property name="label" translatable="yes">Login</property>
</style> <style>
</object> <class name="title"/>
</property> </style>
</object> </object>
</child> </property>
<child>
<object class="GtkSpinner">
<property name="spinning">True</property>
<property name="hexpand">true</property>
<property name="vexpand">true</property>
<property name="halign">center</property>
<property name="valign">center</property>
</object>
</child>
</object> </object>
</property> </child>
<child>
<object class="GtkSpinner">
<property name="spinning">true</property>
<property name="hexpand">true</property>
<property name="vexpand">true</property>
<property name="halign">center</property>
<property name="valign">center</property>
</object>
</child>
</object> </object>
</child> </property>
</object> </object>
</child> </child>
</object> </object>
<object class="GtkSizeGroup">
<widgets>
<widget name="username_entry"/>
<widget name="password_entry"/>
</widgets>
</object>
</interface> </interface>

View file

@ -1,4 +1,5 @@
use crate::backend::{Backend, LoginData}; use crate::backend::{Backend, LoginData};
use crate::widgets::{Navigator, NavigatorScreen};
use glib::clone; use glib::clone;
use gtk::prelude::*; use gtk::prelude::*;
use gtk_macros::get_widget; use gtk_macros::get_widget;
@ -8,48 +9,48 @@ use std::rc::Rc;
/// A dialog for entering login credentials. /// A dialog for entering login credentials.
pub struct LoginDialog { pub struct LoginDialog {
backend: Rc<Backend>, backend: Rc<Backend>,
window: libadwaita::Window, widget: gtk::Stack,
stack: gtk::Stack,
info_bar: gtk::InfoBar, info_bar: gtk::InfoBar,
username_entry: gtk::Entry, username_entry: gtk::Entry,
password_entry: gtk::Entry, password_entry: gtk::Entry,
selected_cb: RefCell<Option<Box<dyn Fn(LoginData) -> ()>>>, selected_cb: RefCell<Option<Box<dyn Fn(LoginData) -> ()>>>,
navigator: RefCell<Option<Rc<Navigator>>>,
} }
impl LoginDialog { impl LoginDialog {
/// Create a new login dialog. /// Create a new login dialog.
pub fn new<P: IsA<gtk::Window>>(backend: Rc<Backend>, parent: &P) -> Rc<Self> { pub fn new(backend: Rc<Backend>) -> Rc<Self> {
// Create UI // Create UI
let builder = gtk::Builder::from_resource("/de/johrpan/musicus/ui/login_dialog.ui"); let builder = gtk::Builder::from_resource("/de/johrpan/musicus/ui/login_dialog.ui");
get_widget!(builder, libadwaita::Window, window); get_widget!(builder, gtk::Stack, widget);
get_widget!(builder, gtk::Stack, stack);
get_widget!(builder, gtk::InfoBar, info_bar); get_widget!(builder, gtk::InfoBar, info_bar);
get_widget!(builder, gtk::Button, cancel_button); get_widget!(builder, gtk::Button, cancel_button);
get_widget!(builder, gtk::Button, login_button); get_widget!(builder, gtk::Button, login_button);
get_widget!(builder, gtk::Entry, username_entry); get_widget!(builder, gtk::Entry, username_entry);
get_widget!(builder, gtk::Entry, password_entry); get_widget!(builder, gtk::Entry, password_entry);
window.set_transient_for(Some(parent));
let this = Rc::new(Self { let this = Rc::new(Self {
backend, backend,
window, widget,
stack,
info_bar, info_bar,
username_entry, username_entry,
password_entry, password_entry,
selected_cb: RefCell::new(None), selected_cb: RefCell::new(None),
navigator: RefCell::new(None),
}); });
// Connect signals and callbacks // Connect signals and callbacks
cancel_button.connect_clicked(clone!(@strong this => move |_| { cancel_button.connect_clicked(clone!(@strong this => move |_| {
this.window.close(); let navigator = this.navigator.borrow().clone();
if let Some(navigator) = navigator {
navigator.pop();
}
})); }));
login_button.connect_clicked(clone!(@strong this => move |_| { login_button.connect_clicked(clone!(@strong this => move |_| {
this.stack.set_visible_child_name("loading"); this.widget.set_visible_child_name("loading");
let data = LoginData { let data = LoginData {
username: this.username_entry.get_text().unwrap().to_string(), username: this.username_entry.get_text().unwrap().to_string(),
@ -65,9 +66,12 @@ impl LoginDialog {
cb(data); cb(data);
} }
clone.window.close(); let navigator = clone.navigator.borrow().clone();
if let Some(navigator) = navigator {
navigator.pop();
}
} else { } else {
clone.stack.set_visible_child_name("content"); clone.widget.set_visible_child_name("content");
clone.info_bar.set_revealed(true); clone.info_bar.set_revealed(true);
} }
}); });
@ -80,9 +84,18 @@ impl LoginDialog {
pub fn set_selected_cb<F: Fn(LoginData) -> () + 'static>(&self, cb: F) { pub fn set_selected_cb<F: Fn(LoginData) -> () + 'static>(&self, cb: F) {
self.selected_cb.replace(Some(Box::new(cb))); self.selected_cb.replace(Some(Box::new(cb)));
} }
}
/// Show the login dialog. impl NavigatorScreen for LoginDialog {
pub fn show(&self) { fn attach_navigator(&self, navigator: Rc<Navigator>) {
self.window.show(); self.navigator.replace(Some(navigator));
}
fn get_widget(&self) -> gtk::Widget {
self.widget.clone().upcast()
}
fn detach_navigator(&self) {
self.navigator.replace(None);
} }
} }

View file

@ -1,5 +1,6 @@
use super::{LoginDialog, ServerDialog}; use super::{LoginDialog, ServerDialog};
use crate::backend::Backend; use crate::backend::Backend;
use crate::widgets::NavigatorWindow;
use gettextrs::gettext; use gettextrs::gettext;
use glib::clone; use glib::clone;
use gtk::prelude::*; use gtk::prelude::*;
@ -84,13 +85,16 @@ impl Preferences {
})); }));
login_button.connect_clicked(clone!(@strong this => move |_| { login_button.connect_clicked(clone!(@strong this => move |_| {
let dialog = LoginDialog::new(this.backend.clone(), &this.window); let dialog = LoginDialog::new(this.backend.clone());
dialog.set_selected_cb(clone!(@strong this => move |data| { dialog.set_selected_cb(clone!(@strong this => move |data| {
this.login_row.set_subtitle(Some(&data.username)); this.login_row.set_subtitle(Some(&data.username));
})); }));
dialog.show();
let window = NavigatorWindow::new(dialog);
window.set_transient_for(&this.window);
window.show();
})); }));
// Initialize // Initialize

View file

@ -35,6 +35,12 @@ impl NavigatorWindow {
this this
} }
/// Make the wrapped window transient. This will make the window modal.
pub fn set_transient_for<W: IsA<gtk::Window>>(&self, window: &W) {
self.window.set_modal(true);
self.window.set_transient_for(Some(window));
}
/// Show the navigator window. /// Show the navigator window.
pub fn show(&self) { pub fn show(&self) {
self.window.show(); self.window.show();