From aecd1881519ffe748af7e7011907b5303207d5b8 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Mon, 25 Dec 2023 00:36:13 -0500 Subject: [PATCH] Open and style the day detail modal --- fitnesstrax/app/resources/style.css | 39 +++++- fitnesstrax/app/src/app_window.rs | 100 +++++++++----- fitnesstrax/app/src/components/day.rs | 83 +++++++++++- fitnesstrax/app/src/components/mod.rs | 4 +- fitnesstrax/app/src/components/modal.rs | 132 +++++++++++++++---- fitnesstrax/app/src/views/historical_view.rs | 25 ++-- fitnesstrax/app/src/views/welcome_view.rs | 3 +- 7 files changed, 306 insertions(+), 80 deletions(-) diff --git a/fitnesstrax/app/resources/style.css b/fitnesstrax/app/resources/style.css index 1f3aea4..7ea5d9e 100644 --- a/fitnesstrax/app/resources/style.css +++ b/fitnesstrax/app/resources/style.css @@ -2,32 +2,57 @@ margin: 64px; } -.welcome-title { +.welcome__title { font-size: larger; padding: 8px; } -.welcome-content { +.welcome__content { padding: 8px; } -.welcome-footer { +.welcome__footer { } -.dialog-row { +.modal { + background-color: @dialog_bg_color; + border-radius: 8px; + margin: 64px; +} + +.modal__header { +} + +.modal__title { + font-size: larger; + padding: 8px; +} + +.modal__content { + background-color: @view_bg_color; + margin: 16px; +} + +.modal__row { margin: 8px 0px 8px 0px; padding: 8px; } -.daysummary { +.historical { + margin: 32px; + border-radius: 8px; +} + +.day-summary { padding: 8px; } -.daysummary-date { +.day-summary__date { font-size: larger; margin-bottom: 8px; } -.daysummary-weight { +.day-summary__weight { margin: 4px; } + diff --git a/fitnesstrax/app/src/app_window.rs b/fitnesstrax/app/src/app_window.rs index d03c53c..b372104 100644 --- a/fitnesstrax/app/src/app_window.rs +++ b/fitnesstrax/app/src/app_window.rs @@ -16,6 +16,7 @@ You should have received a copy of the GNU General Public License along with Fit use crate::{ app::{AppInvocation, AppResponse}, + components::day_detail, views::{HistoricalView, PlaceholderView, View, ViewName, WelcomeView}, }; use adw::prelude::*; @@ -36,6 +37,8 @@ pub struct AppWindow { layout: gtk::Box, current_view: Rc>, settings: gio::Settings, + overlay: gtk::Overlay, + modal: RefCell>, } impl AppWindow { @@ -75,6 +78,8 @@ impl AppWindow { #[allow(deprecated)] context.add_provider(&provider, STYLE_PROVIDER_PRIORITY_USER); + let overlay = gtk::Overlay::new(); + let header = adw::HeaderBar::builder() .title_widget(>k::Label::new(Some("FitnessTrax"))) .build(); @@ -88,14 +93,22 @@ impl AppWindow { layout.append(&header); layout.append(initial_view.widget()); - window.set_content(Some(&layout)); + overlay.set_child(Some(&layout)); + + window.set_content(Some(&overlay)); window.present(); + let gesture = gtk::GestureClick::new(); + gesture.connect_released(|_, _, _, _| println!("detected gesture")); + layout.add_controller(gesture); + let s = Self { app_tx, layout, current_view: Rc::new(RefCell::new(initial_view)), settings: gio::Settings::new(app_id), + overlay, + modal: RefCell::new(None), }; s @@ -105,6 +118,21 @@ impl AppWindow { self.swap_main(self.construct_view(view)); } + pub fn open_modal(&self, modal: gtk::Widget) { + self.close_modal(); + + self.overlay.add_overlay(&modal); + *self.modal.borrow_mut() = Some(modal); + } + + pub fn close_modal(&self) { + match *self.modal.borrow() { + Some(ref widget) => self.overlay.remove_overlay(widget), + None => {} + } + *self.modal.borrow_mut() = None; + } + pub fn process_response(&self, response: AppResponse) { match response { AppResponse::DatabaseChanged(db_path) => { @@ -148,38 +176,44 @@ impl AppWindow { .upcast(), ), ViewName::Historical => View::Historical( - HistoricalView::new(vec![ - TraxRecord::Steps(Steps { - date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(), - count: 1500, - }), - TraxRecord::Weight(Weight { - date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(), - weight: 85. * KG, - }), - TraxRecord::Weight(Weight { - date: NaiveDate::from_ymd_opt(2023, 10, 14).unwrap(), - weight: 86. * KG, - }), - TraxRecord::BikeRide(TimeDistance { - datetime: FixedOffset::west_opt(10 * 60 * 60) - .unwrap() - .with_ymd_and_hms(2019, 6, 15, 12, 0, 0) - .unwrap(), - distance: Some(1000. * M), - duration: Some(150. * S), - comments: Some("Test Comments".to_owned()), - }), - TraxRecord::BikeRide(TimeDistance { - datetime: FixedOffset::west_opt(10 * 60 * 60) - .unwrap() - .with_ymd_and_hms(2019, 6, 15, 23, 0, 0) - .unwrap(), - distance: Some(1000. * M), - duration: Some(150. * S), - comments: Some("Test Comments".to_owned()), - }), - ]) + HistoricalView::new( + vec![ + TraxRecord::Steps(Steps { + date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(), + count: 1500, + }), + TraxRecord::Weight(Weight { + date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(), + weight: 85. * KG, + }), + TraxRecord::Weight(Weight { + date: NaiveDate::from_ymd_opt(2023, 10, 14).unwrap(), + weight: 86. * KG, + }), + TraxRecord::BikeRide(TimeDistance { + datetime: FixedOffset::west_opt(10 * 60 * 60) + .unwrap() + .with_ymd_and_hms(2019, 6, 15, 12, 0, 0) + .unwrap(), + distance: Some(1000. * M), + duration: Some(150. * S), + comments: Some("Test Comments".to_owned()), + }), + TraxRecord::BikeRide(TimeDistance { + datetime: FixedOffset::west_opt(10 * 60 * 60) + .unwrap() + .with_ymd_and_hms(2019, 6, 15, 23, 0, 0) + .unwrap(), + distance: Some(1000. * M), + duration: Some(150. * S), + comments: Some("Test Comments".to_owned()), + }), + ], + { + let s = self.clone(); + Rc::new(move |date, records| s.open_modal(day_detail(date, records))) + }, + ) .upcast(), ), } diff --git a/fitnesstrax/app/src/components/day.rs b/fitnesstrax/app/src/components/day.rs index 1026a20..db6f08e 100644 --- a/fitnesstrax/app/src/components/day.rs +++ b/fitnesstrax/app/src/components/day.rs @@ -16,12 +16,12 @@ You should have received a copy of the GNU General Public License along with Fit // use chrono::NaiveDate; // use ft_core::TraxRecord; +use crate::components::Modal; use ft_core::TraxRecord; use glib::Object; use gtk::{prelude::*, subclass::prelude::*}; use std::cell::RefCell; -#[derive(Default)] pub struct DaySummaryPrivate { date: gtk::Label, weight: RefCell>, @@ -35,7 +35,7 @@ impl ObjectSubclass for DaySummaryPrivate { fn new() -> Self { let date = gtk::Label::builder() - .css_classes(["daysummary-date"]) + .css_classes(["day-summary__date"]) .halign(gtk::Align::Start) .build(); Self { @@ -59,7 +59,7 @@ impl DaySummary { pub fn new() -> Self { let s: Self = Object::builder().build(); s.set_orientation(gtk::Orientation::Vertical); - s.set_css_classes(&["daysummary"]); + s.set_css_classes(&["day-summary"]); s.append(&s.imp().date); @@ -81,10 +81,85 @@ impl DaySummary { let label = gtk::Label::builder() .halign(gtk::Align::Start) .label(&format!("{}", weight_record.weight)) - .css_classes(["daysummary-weight"]) + .css_classes(["day-summary__weight"]) .build(); self.append(&label); *self.imp().weight.borrow_mut() = Some(label); } } } + +/* +pub struct DayDetailPrivate { + date: gtk::Label, + weight: RefCell>, +} + +#[glib::object_subclass] +impl ObjectSubclass for DayDetailPrivate { + const NAME: &'static str = "DayDetail"; + type Type = DayDetail; + type ParentType = gtk::Box; + + fn new() -> Self { + let date = gtk::Label::builder() + .css_classes(["daysummary-date"]) + .halign(gtk::Align::Start) + .build(); + Self { + date, + weight: RefCell::new(None), + } + } +} + +impl ObjectImpl for DayDetailPrivate {} +impl WidgetImpl for DayDetailPrivate {} +impl BoxImpl for DayDetailPrivate {} + +glib::wrapper! { + pub struct DayDetail(ObjectSubclass) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable; +} + +impl DayDetail { + pub fn new() -> Self { + let s: Self = Object::builder().build(); + s.set_orientation(gtk::Orientation::Vertical); + s.set_css_classes(&["modal"]); + + s.append(>k::Label::new(Some("abcdefg"))); + + s + } +} +*/ + +pub fn day_detail(date: chrono::NaiveDate, records: Vec) -> gtk::Widget { + let modal = Modal::new(&date.format("%Y-%m-%d").to_string(), || {}); + + let content = gtk::Box::builder() + .orientation(gtk::Orientation::Vertical) + .build(); + + records.into_iter().for_each(|record| { + let record_view = match record { + TraxRecord::BikeRide(_) => gtk::Label::new(Some("BikeRide")), + TraxRecord::Row(_) => gtk::Label::new(Some("Row")), + TraxRecord::Run(_) => gtk::Label::new(Some("Run")), + TraxRecord::Steps(_) => gtk::Label::new(Some("Steps")), + TraxRecord::Swim(_) => gtk::Label::new(Some("Swim")), + TraxRecord::Walk(_) => gtk::Label::new(Some("Walk")), + TraxRecord::Weight(_) => gtk::Label::new(Some("Weight")), + }; + + record_view.add_css_class("day-detail"); + record_view.set_halign(gtk::Align::Start); + + content.append(&record_view); + }); + + modal.set_content(content.upcast()); + modal.set_primary_action(gtk::Button::builder().label("Save").build()); + modal.set_secondary_action(gtk::Button::builder().label("Cancel").build()); + modal.upcast() +} diff --git a/fitnesstrax/app/src/components/mod.rs b/fitnesstrax/app/src/components/mod.rs index 76b677c..528b427 100644 --- a/fitnesstrax/app/src/components/mod.rs +++ b/fitnesstrax/app/src/components/mod.rs @@ -15,13 +15,13 @@ You should have received a copy of the GNU General Public License along with Fit */ mod day; -pub use day::DaySummary; +pub use day::{day_detail, DaySummary}; mod modal; +pub use modal::{Modal, ModalImpl}; use glib::Object; use gtk::{prelude::*, subclass::prelude::*}; -pub use modal::Modal; use std::{cell::RefCell, path::PathBuf, rc::Rc}; pub struct FileChooserRowPrivate { diff --git a/fitnesstrax/app/src/components/modal.rs b/fitnesstrax/app/src/components/modal.rs index a3b83d0..c53d750 100644 --- a/fitnesstrax/app/src/components/modal.rs +++ b/fitnesstrax/app/src/components/modal.rs @@ -3,16 +3,13 @@ //! component. use glib::Object; use gtk::{prelude::*, subclass::prelude::*}; -use std::{ - cell::RefCell, - path::{Path, PathBuf}, -}; +use std::cell::RefCell; pub struct ModalPrivate { - title: gtk::Label, + header: ModalHeader, content: RefCell, primary_action: RefCell, - // secondary_action: RefCell>, + secondary_action: RefCell>, // tertiary_action: RefCell>, footer: gtk::Box, } @@ -24,21 +21,25 @@ impl ObjectSubclass for ModalPrivate { type ParentType = gtk::Box; fn new() -> Self { - let title = gtk::Label::builder().label("Modal").build(); - let content = gtk::Box::new(gtk::Orientation::Vertical, 0); + let header = ModalHeader::new("Modal"); + let content = gtk::Box::builder() + .orientation(gtk::Orientation::Vertical) + .vexpand(true) + .css_classes(["modal__content"]) + .build(); let primary_action = gtk::Button::builder().label("Primary").build(); - let footer = gtk::Box::builder() .orientation(gtk::Orientation::Horizontal) .hexpand(true) + .halign(gtk::Align::End) .build(); footer.append(&primary_action); Self { - title, + header, content: RefCell::new(content.upcast()), primary_action: RefCell::new(primary_action), - // secondary_action: RefCell::new(None), + secondary_action: RefCell::new(None), // tertiary_action: RefCell::new(None), footer, } @@ -53,40 +54,125 @@ glib::wrapper! { pub struct Modal(ObjectSubclass) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable; } +pub trait ModalImpl: BoxImpl {} + +unsafe impl IsSubclassable for Modal {} + impl Modal { - pub fn new() -> Self { + pub fn new(title: &str, on_cancel: OnCancel) -> Self + where + OnCancel: FnOnce() + 'static, + { let s: Self = Object::builder().build(); - - s.set_margin_start(100); - s.set_margin_end(100); - s.set_margin_top(100); - s.set_margin_bottom(100); + s.set_css_classes(&["modal"]); s.set_orientation(gtk::Orientation::Vertical); + s.set_hexpand(true); - s.append(&s.imp().title); + s.imp().header.set_title(title); + s.imp().header.set_on_cancel(on_cancel); + + s.append(&s.imp().header); s.append(&*s.imp().content.borrow()); s.append(&s.imp().footer); + let gesture = gtk::GestureClick::new(); + gesture.connect_released(|s, _, _, _| println!("released on {:?}", s)); + s.add_controller(gesture.clone()); + s } pub fn set_title(&self, text: &str) { - self.imp().title.set_text(text); + self.imp().header.set_title(text); } pub fn set_content(&self, content: gtk::Widget) { self.remove(&*self.imp().content.borrow()); - self.insert_child_after(&content, Some(&self.imp().title)); + content.set_halign(gtk::Align::Fill); + content.set_vexpand(true); + content.add_css_class("modal__content"); + self.insert_child_after(&content, Some(&self.imp().header)); *self.imp().content.borrow_mut() = content; } pub fn set_primary_action(&self, action: gtk::Button) { - self.imp() - .footer - .remove(&*self.imp().primary_action.borrow()); *self.imp().primary_action.borrow_mut() = action; + self.render_footer(); + } + + pub fn set_secondary_action(&self, action: gtk::Button) { + *self.imp().secondary_action.borrow_mut() = Some(action); + self.render_footer(); + } + + fn render_footer(&self) { + while let Some(ref child) = self.imp().footer.first_child() { + self.imp().footer.remove(child); + } + + if let Some(ref button) = *self.imp().secondary_action.borrow() { + self.imp().footer.append(button); + } self.imp() .footer .append(&*self.imp().primary_action.borrow()); } } + +pub struct ModalHeaderPrivate { + title: gtk::Label, + on_cancel: RefCell>, +} + +#[glib::object_subclass] +impl ObjectSubclass for ModalHeaderPrivate { + const NAME: &'static str = "ModalHeader"; + type Type = ModalHeader; + type ParentType = gtk::Box; + + fn new() -> Self { + Self { + title: gtk::Label::builder().css_classes(["modal__title"]).build(), + on_cancel: RefCell::new(Box::new(|| {})), + } + } +} + +impl ObjectImpl for ModalHeaderPrivate {} +impl WidgetImpl for ModalHeaderPrivate {} +impl BoxImpl for ModalHeaderPrivate {} + +glib::wrapper! { + pub struct ModalHeader(ObjectSubclass) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable; +} + +impl ModalHeader { + pub fn new(title: &str) -> Self { + let s: Self = Object::builder().build(); + s.add_css_class("modal__header"); + s.set_homogeneous(true); + s.imp().title.set_text(title); + + let left = gtk::Box::builder().build(); + let center = gtk::Box::builder().halign(gtk::Align::Center).build(); + let right = gtk::Box::builder().halign(gtk::Align::End).build(); + + center.append(&s.imp().title); + s.append(&left); + s.append(¢er); + s.append(&right); + + s + } + + pub fn set_title(&self, title: &str) { + self.imp().title.set_text(title); + } + + pub fn set_on_cancel(&self, on_cancel: OnCancel) + where + OnCancel: FnOnce() + 'static, + { + *self.imp().on_cancel.borrow_mut() = Box::new(on_cancel); + } +} diff --git a/fitnesstrax/app/src/views/historical_view.rs b/fitnesstrax/app/src/views/historical_view.rs index 2f14d52..2a2a96a 100644 --- a/fitnesstrax/app/src/views/historical_view.rs +++ b/fitnesstrax/app/src/views/historical_view.rs @@ -19,7 +19,7 @@ use emseries::{Recordable, Timestamp}; use ft_core::TraxRecord; use glib::Object; use gtk::{prelude::*, subclass::prelude::*}; -use std::{cell::RefCell, collections::HashMap}; +use std::{cell::RefCell, collections::HashMap, rc::Rc}; /// The historical view will show a window into the main database. It will show some version of /// daily summaries, daily details, and will provide all functions the user may need for editing @@ -46,9 +46,13 @@ glib::wrapper! { } impl HistoricalView { - pub fn new(records: Vec) -> Self { + pub fn new(records: Vec, on_select_day: Rc) -> Self + where + SelectFn: Fn(chrono::NaiveDate, Vec) + 'static, + { let s: Self = Object::builder().build(); s.set_orientation(gtk::Orientation::Vertical); + s.set_css_classes(&["historical"]); let day_records: GroupedRecords = GroupedRecords::from(records); @@ -86,13 +90,16 @@ impl HistoricalView { .factory(&factory) .single_click_activate(true) .build(); - lst.connect_activate(|s, idx| { - // This gets triggered whenever the user clicks on an item on the list. What we - // actually want to do here is to open a modal dialog that shows all of the details of - // the day and which allows the user to edit items within that dialog. - let item = s.model().unwrap().item(idx).unwrap(); - let records = item.downcast_ref::().unwrap(); - println!("list item activated: [{:?}] {:?}", idx, records.date()); + lst.connect_activate({ + let on_select_day = on_select_day.clone(); + move |s, idx| { + // This gets triggered whenever the user clicks on an item on the list. What we + // actually want to do here is to open a modal dialog that shows all of the details of + // the day and which allows the user to edit items within that dialog. + let item = s.model().unwrap().item(idx).unwrap(); + let records = item.downcast_ref::().unwrap(); + on_select_day(records.date(), records.records()); + } }); s.append(&lst); diff --git a/fitnesstrax/app/src/views/welcome_view.rs b/fitnesstrax/app/src/views/welcome_view.rs index 5156c9c..efaf2c1 100644 --- a/fitnesstrax/app/src/views/welcome_view.rs +++ b/fitnesstrax/app/src/views/welcome_view.rs @@ -55,11 +55,10 @@ impl WelcomeView { // branch. let title = gtk::Label::builder() .label("Welcome to FitnessTrax") - .css_classes(["welcome-title"]) + .css_classes(["welcome__title"]) .build(); let content = gtk::Box::builder() - .css_classes(["model-content"]) .orientation(gtk::Orientation::Vertical) .vexpand(true) .build();