From 9fbe7a15dfc146aa176b6fd3fc8ea2041cbf2128 Mon Sep 17 00:00:00 2001 From: Alice Mikhaylenko Date: Mon, 7 Oct 2024 18:54:08 +0400 Subject: [PATCH 1/4] search-options-dialog: Port modes of transport to AdwWrapBox Closes: https://gitlab.com/schmiddi-on-mobile/railway/-/issues/65 --- Cargo.toml | 2 +- data/resources/style.css | 21 ++++++ data/resources/ui/search_options_dialog.blp | 71 +++++++++++++-------- meson.build | 2 +- src/gui/search_options_dialog.rs | 58 ++++++++--------- 5 files changed, 97 insertions(+), 57 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index c846374..1f8ce56 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -13,7 +13,7 @@ edition = "2021" [dependencies] gtk = { version = "0.9.6", package = "gtk4", features = ["v4_14"] } gdk = { version = "0.9.6", package = "gdk4" } -libadwaita = { version = "0.7.2", features = ["v1_5"] } +libadwaita = { version = "0.7.2", features = ["v1_7"] } gettext-rs = { version = "0.7.2", features = ["gettext-system"] } once_cell = "1.21.3" diff --git a/data/resources/style.css b/data/resources/style.css index 198c5f5..d906c6b 100644 --- a/data/resources/style.css +++ b/data/resources/style.css @@ -145,3 +145,24 @@ popover listview.navigation-sidebar > row:selected:active { opacity: 0; margin: 3px 1px; } + +.modes-of-transport button { + border-radius: 99px; + padding-left: 12px; + padding-right: 12px; +} + +.modes-of-transport button:checked { + background-color: var(--accent-bg-color); + color: var(--accent-fg-color); + box-shadow: none; + outline-offset: 5px; +} + +.modes-of-transport button:checked:focus:focus-visible { + outline-offset: 1px; +} + +.modes-of-transport button:checked:hover { + background-image: image(color-mix(in srgb, currentColor 10%, transparent)); +} diff --git a/data/resources/ui/search_options_dialog.blp b/data/resources/ui/search_options_dialog.blp index 16bbb3a..bb49da3 100644 --- a/data/resources/ui/search_options_dialog.blp +++ b/data/resources/ui/search_options_dialog.blp @@ -51,40 +51,59 @@ template $DBSearchOptionsDialog: Adw.PreferencesDialog { Adw.PreferencesGroup { title: _("Modes of Transport"); - Adw.SwitchRow switch_national_express { - title: _("Mainline Train"); // TODO: check term, alternatives: Higher-speed Train, Long-distance Train - } + Adw.WrapBox { + line-spacing: 6; + child-spacing: 6; + justify: fill; + + styles [ + "modes-of-transport", + ] + + Gtk.ToggleButton toggle_national_express { + label: _("Mainline Train"); // TODO: check term, alternatives: Higher-speed Train, Long-distance Train + can-shrink: true; + } - Adw.SwitchRow switch_regional { - title: _("Regional Train"); // TODO: check term - } + Gtk.ToggleButton toggle_regional { + label: _("Regional Train"); // TODO: check term + can-shrink: true; + } - Adw.SwitchRow switch_suburban { - title: _("S-Bahn Train"); // TODO: more generic term, incl. Overground and S-Bahn? - } + Gtk.ToggleButton toggle_suburban { + label: _("S-Bahn Train"); // TODO: more generic term, incl. Overground and S-Bahn? + can-shrink: true; + } - Adw.SwitchRow switch_bus { - title: _("Bus"); - } + Gtk.ToggleButton toggle_bus { + label: _("Bus"); + can-shrink: true; + } - Adw.SwitchRow switch_ferry { - title: _("Ferry"); - } + Gtk.ToggleButton toggle_ferry { + label: _("Ferry"); + can-shrink: true; + } - Adw.SwitchRow switch_subway { - title: _("Subway"); - } + Gtk.ToggleButton toggle_subway { + label: _("Subway"); + can-shrink: true; + } - Adw.SwitchRow switch_tram { - title: _("Tram"); - } + Gtk.ToggleButton toggle_tram { + label: _("Tram"); + can-shrink: true; + } - Adw.SwitchRow switch_cablecar { - title: _("Cablecar"); - } + Gtk.ToggleButton toggle_cablecar { + label: _("Cablecar"); + can-shrink: true; + } - Adw.SwitchRow switch_taxi { - title: _("Taxi"); + Gtk.ToggleButton toggle_taxi { + label: _("Taxi"); + can-shrink: true; + } } } } diff --git a/meson.build b/meson.build index e32dc74..5a131dc 100644 --- a/meson.build +++ b/meson.build @@ -16,7 +16,7 @@ resources_path = '/de/schmidhuberj/DieBahn/' dependency('glib-2.0', version: '>= 2.66') dependency('gio-2.0', version: '>= 2.66') dependency('gtk4', version: '>= 4.0.0') -dependency('libadwaita-1', version: '>= 1.6.0') +dependency('libadwaita-1', version: '>= 1.7.0') glib_compile_resources = find_program('glib-compile-resources', required: true) glib_compile_schemas = find_program('glib-compile-schemas', required: true) diff --git a/src/gui/search_options_dialog.rs b/src/gui/search_options_dialog.rs index 0763b91..4e0e0ef 100644 --- a/src/gui/search_options_dialog.rs +++ b/src/gui/search_options_dialog.rs @@ -55,23 +55,23 @@ pub mod imp { switch_direct_only: TemplateChild, #[template_child] - switch_national_express: TemplateChild, + toggle_national_express: TemplateChild, #[template_child] - switch_regional: TemplateChild, + toggle_regional: TemplateChild, #[template_child] - switch_suburban: TemplateChild, + toggle_suburban: TemplateChild, #[template_child] - switch_bus: TemplateChild, + toggle_bus: TemplateChild, #[template_child] - switch_ferry: TemplateChild, + toggle_ferry: TemplateChild, #[template_child] - switch_subway: TemplateChild, + toggle_subway: TemplateChild, #[template_child] - switch_tram: TemplateChild, + toggle_tram: TemplateChild, #[template_child] - switch_cablecar: TemplateChild, + toggle_cablecar: TemplateChild, #[template_child] - switch_taxi: TemplateChild, + toggle_taxi: TemplateChild, settings: Settings, } @@ -186,49 +186,49 @@ pub mod imp { self.settings .bind( "include-national-express", - &self.switch_national_express.get(), + &self.toggle_national_express.get(), "active", ) .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-regional", &self.switch_regional.get(), "active") + .bind("include-regional", &self.toggle_regional.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-suburban", &self.switch_suburban.get(), "active") + .bind("include-suburban", &self.toggle_suburban.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-bus", &self.switch_bus.get(), "active") + .bind("include-bus", &self.toggle_bus.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-ferry", &self.switch_ferry.get(), "active") + .bind("include-ferry", &self.toggle_ferry.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-subway", &self.switch_subway.get(), "active") + .bind("include-subway", &self.toggle_subway.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-tram", &self.switch_tram.get(), "active") + .bind("include-tram", &self.toggle_tram.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-subway", &self.switch_subway.get(), "active") + .bind("include-subway", &self.toggle_subway.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-tram", &self.switch_tram.get(), "active") + .bind("include-tram", &self.toggle_tram.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-cablecar", &self.switch_cablecar.get(), "active") + .bind("include-cablecar", &self.toggle_cablecar.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); self.settings - .bind("include-taxi", &self.switch_taxi.get(), "active") + .bind("include-taxi", &self.toggle_taxi.get(), "active") .flags(SettingsBindFlags::DEFAULT) .build(); } @@ -264,15 +264,15 @@ pub mod imp { switch_direct_only: TemplateChild::default(), toggle_first_class: TemplateChild::default(), toggle_second_class: TemplateChild::default(), - switch_national_express: TemplateChild::default(), - switch_regional: TemplateChild::default(), - switch_suburban: TemplateChild::default(), - switch_bus: TemplateChild::default(), - switch_ferry: TemplateChild::default(), - switch_subway: TemplateChild::default(), - switch_tram: TemplateChild::default(), - switch_cablecar: TemplateChild::default(), - switch_taxi: TemplateChild::default(), + toggle_national_express: TemplateChild::default(), + toggle_regional: TemplateChild::default(), + toggle_suburban: TemplateChild::default(), + toggle_bus: TemplateChild::default(), + toggle_ferry: TemplateChild::default(), + toggle_subway: TemplateChild::default(), + toggle_tram: TemplateChild::default(), + toggle_cablecar: TemplateChild::default(), + toggle_taxi: TemplateChild::default(), } } -- GitLab From eede565a3641a2ef8022479508606c4f85a007bf Mon Sep 17 00:00:00 2001 From: Alice Mikhaylenko Date: Mon, 7 Oct 2024 19:03:41 +0400 Subject: [PATCH 2/4] search-options-dialog: Use toggle group as well --- data/resources/ui/search_options_dialog.blp | 16 ++++++---------- src/gui/search_options_dialog.rs | 17 +++++++---------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/data/resources/ui/search_options_dialog.blp b/data/resources/ui/search_options_dialog.blp index bb49da3..ae45b62 100644 --- a/data/resources/ui/search_options_dialog.blp +++ b/data/resources/ui/search_options_dialog.blp @@ -13,22 +13,18 @@ template $DBSearchOptionsDialog: Adw.PreferencesDialog { Adw.ActionRow { title: _("Class"); - Box { - styles [ - "linked", - ] - - halign: center; + Adw.ToggleGroup toggle_group_class { + notify::active => $handle_first_class() swapped; valign: center; - ToggleButton toggle_first_class { + Adw.Toggle { + name: "first"; label: _("First Class"); - toggled => $handle_first_class() swapped; } - ToggleButton toggle_second_class { + Adw.Toggle { + name: "second"; label: _("Second Class"); - group: toggle_first_class; } } } diff --git a/src/gui/search_options_dialog.rs b/src/gui/search_options_dialog.rs index 4e0e0ef..553a61d 100644 --- a/src/gui/search_options_dialog.rs +++ b/src/gui/search_options_dialog.rs @@ -43,9 +43,7 @@ pub mod imp { dropdown_bahncard: TemplateChild, #[template_child] - toggle_first_class: TemplateChild, - #[template_child] - toggle_second_class: TemplateChild, + toggle_group_class: TemplateChild, #[template_child] switch_bike_accessible: TemplateChild, @@ -80,9 +78,9 @@ pub mod imp { impl SearchOptionsDialog { fn init_settings(&self) { if self.settings.boolean("first-class") { - self.toggle_first_class.set_active(true); + self.toggle_group_class.set_active_name(Some("first")); } else { - self.toggle_second_class.set_active(true); + self.toggle_group_class.set_active_name(Some("second")); } let model_bahncard = gdk::gio::ListStore::new::(); @@ -234,10 +232,10 @@ pub mod imp { } #[template_callback] - fn handle_first_class(&self, toggle: gtk::ToggleButton) { - let active = toggle.is_active(); + fn handle_first_class(&self) { + let first = self.toggle_group_class.active_name().unwrap() == "first"; self.settings - .set_boolean("first-class", active) + .set_boolean("first-class", first) .expect("Failed to set first-class value"); } @@ -262,8 +260,7 @@ pub mod imp { switch_bike_accessible: TemplateChild::default(), spin_transfer_time: TemplateChild::default(), switch_direct_only: TemplateChild::default(), - toggle_first_class: TemplateChild::default(), - toggle_second_class: TemplateChild::default(), + toggle_group_class: TemplateChild::default(), toggle_national_express: TemplateChild::default(), toggle_regional: TemplateChild::default(), toggle_suburban: TemplateChild::default(), -- GitLab From 833f3f0623ead3e90f1c50df325a55995ae06ea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=B6llnitz?= Date: Tue, 6 May 2025 02:26:18 +0200 Subject: [PATCH 3/4] chores(): use new Adw.ToggleGroup for departure/arrival toggle group MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This allows us to drop the custom styles as this was the last custom toggle group in Railway. Signed-off-by: Markus Göllnitz --- data/resources/style.css | 28 ------------------------- data/resources/ui/date_time_picker.blp | 29 +++++--------------------- src/gui/date_time_picker.rs | 16 +++++--------- 3 files changed, 10 insertions(+), 63 deletions(-) diff --git a/data/resources/style.css b/data/resources/style.css index d906c6b..52d9315 100644 --- a/data/resources/style.css +++ b/data/resources/style.css @@ -118,34 +118,6 @@ popover listview.navigation-sidebar > row:selected:active { padding: 12px 12px 6px; } -/* Mostly copied from Elastic https://gitlab.gnome.org/World/elastic/-/blob/476c2a1dc7aac30fa25ec105a9e9fa5b3d069d52/src/style.css#L17 */ -.toggle-group { - border-radius: 9px; - padding: 3px; - background: color-mix(in srgb, currentColor 10%, transparent); -} - -.toggle-group .toggle { - padding: 2px 15px; - transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - transition-property: outline-color, outline-width, outline-offset, background, box-shadow; - min-width: 100px; -} - -.toggle-group .toggle:checked { - border-radius: 6px; - padding: 2px 15px; - background: rgb(from var(--card-bg-color) r g b / calc(alpha * 2)); - color: var(--card-fg-color); - box-shadow: 0 1px 3px 1px #00000011, - 0 2px 6px 2px #00000008; -} - -.toggle-group separator { - opacity: 0; - margin: 3px 1px; -} - .modes-of-transport button { border-radius: 99px; padding-left: 12px; diff --git a/data/resources/ui/date_time_picker.blp b/data/resources/ui/date_time_picker.blp index d66b69e..3fe6b5f 100644 --- a/data/resources/ui/date_time_picker.blp +++ b/data/resources/ui/date_time_picker.blp @@ -5,34 +5,15 @@ template $DBDateTimePicker: Box { orientation: vertical; spacing: 12; - Box { - styles [ - "toggle-group", - ] - - orientation: horizontal; - - ToggleButton toggle_departure { - styles [ - "flat", - ] - + Adw.ToggleGroup toggle_group_time_type { + Adw.Toggle { + name: "departure"; label: _("Departure"); - hexpand: true; - } - - Separator { - orientation: vertical; } - ToggleButton toggle_arrival { - styles [ - "flat", - ] - + Adw.Toggle { + name: "arrival"; label: _("Arrival"); - hexpand: true; - group: toggle_departure; } } diff --git a/src/gui/date_time_picker.rs b/src/gui/date_time_picker.rs index b9b5509..c56208f 100644 --- a/src/gui/date_time_picker.rs +++ b/src/gui/date_time_picker.rs @@ -1,7 +1,6 @@ use chrono::DateTime; use chrono::Local; use gdk::subclass::prelude::ObjectSubclassIsExt; -use gtk::prelude::ToggleButtonExt; use crate::backend::TimeType; @@ -18,10 +17,10 @@ impl DateTimePicker { } pub fn time_type(&self) -> TimeType { - if self.imp().toggle_departure.is_active() { - TimeType::Departure - } else { - TimeType::Arrival + match self.imp().toggle_group_time_type.active_name().as_deref() { + Some("departure") => TimeType::Departure, + Some("arrival") => TimeType::Arrival, + _ => unimplemented!(), } } } @@ -72,9 +71,7 @@ pub mod imp { popover_date: TemplateChild, #[template_child] - toggle_arrival: TemplateChild, - #[template_child] - pub(super) toggle_departure: TemplateChild, + pub(super) toggle_group_time_type: TemplateChild, #[property(get, set)] now: Cell, @@ -270,9 +267,6 @@ pub mod imp { popover_time.popup(); } )); - - self.toggle_arrival.set_active(false); - self.toggle_departure.set_active(true); } } -- GitLab From 54b92d882252805b1d991c7e62583d0ff9b594de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20G=C3=B6llnitz?= Date: Tue, 6 May 2025 02:27:25 +0200 Subject: [PATCH 4/4] fix(): let leg items fit narrow windows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With the introduction of wrap boxes in libadwaita, the distination/frequency row can be made wrapping its child labels dynamically. This is a good time to revisit the situation with lots of stops and multiple indicators. Then the announcements' toggle button can move off the screen. Signed-off-by: Markus Göllnitz --- data/resources/ui/leg_item.blp | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/data/resources/ui/leg_item.blp b/data/resources/ui/leg_item.blp index 3dc9285..568ab2e 100644 --- a/data/resources/ui/leg_item.blp +++ b/data/resources/ui/leg_item.blp @@ -99,14 +99,14 @@ template $DBLegItem: Box { margin-top: 6; margin-bottom: 6; spacing: 6; - // TODO: annoying ellipses in frequency label. Replace with AdwWrapBox when it comes out. https://gitlab.gnome.org/GNOME/libadwaita/-/merge_requests/219. - Box { + + Adw.WrapBox { orientation: horizontal; margin-bottom: 6; - spacing: 12; + child-spacing: 12; + line-spacing: 6; Label segment_label { - wrap: true; hexpand: false; xalign: 0; label: bind $format_train_direction(template.leg as <$DBLeg>.name, template.leg as <$DBLeg>.direction) as ; @@ -141,6 +141,10 @@ template $DBLegItem: Box { Label label_num_stopovers { halign: start; + // Ellipsize but not the first four characters assuming that + // those could contain the amount of stops. + width-chars: 4; + ellipsize: end; } Image { -- GitLab