Open and style the day detail modal

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;
 }
+

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::*;
@@ -38,6 +39,8 @@ pub struct AppWindow {
     layout: gtk::Box,
     current_view: Rc<RefCell<View>>,
     settings: gio::Settings,
+    overlay: gtk::Overlay,
+    modal: RefCell<Option<gtk::Widget>>,
 }
 
 impl AppWindow {
@@ -77,6 +80,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(&gtk::Label::new(Some("FitnessTrax")))
             .build();
@@ -90,14 +95,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
@@ -107,6 +120,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) => {
@@ -150,36 +178,42 @@ impl AppWindow {
                 .upcast(),
             ),
             ViewName::Historical => View::Historical(
-                HistoricalView::new(vec![
+                HistoricalView::new(
-                    TraxRecord::Steps(Steps {
+                    vec![
-                        date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(),
+                        TraxRecord::Steps(Steps {
-                        count: 1500,
+                            date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(),
-                    }),
+                            count: 1500,
-                    TraxRecord::Weight(Weight {
+                        }),
-                        date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(),
+                        TraxRecord::Weight(Weight {
-                        weight: 85. * KG,
+                            date: NaiveDate::from_ymd_opt(2023, 10, 13).unwrap(),
-                    }),
+                            weight: 85. * KG,
-                    TraxRecord::Weight(Weight {
+                        }),
-                        date: NaiveDate::from_ymd_opt(2023, 10, 14).unwrap(),
+                        TraxRecord::Weight(Weight {
-                        weight: 86. * KG,
+                            date: NaiveDate::from_ymd_opt(2023, 10, 14).unwrap(),
-                    }),
+                            weight: 86. * KG,
-                    TraxRecord::BikeRide(TimeDistance {
+                        }),
-                        datetime: DateTimeTz(
+                        TraxRecord::BikeRide(TimeDistance {
-                            Anchorage.with_ymd_and_hms(2019, 6, 15, 12, 0, 0).unwrap(),
+                            datetime: DateTimeTz(
-                        ),
+                                Anchorage.with_ymd_and_hms(2019, 6, 15, 12, 0, 0).unwrap(),
-                        distance: Some(1000. * M),
+                            ),
-                        duration: Some(150. * S),
+                            distance: Some(1000. * M),
-                        comments: Some("Test Comments".to_owned()),
+                            duration: Some(150. * S),
-                    }),
+                            comments: Some("Test Comments".to_owned()),
-                    TraxRecord::BikeRide(TimeDistance {
+                        }),
-                        datetime: DateTimeTz(
+                        TraxRecord::BikeRide(TimeDistance {
-                            Anchorage.with_ymd_and_hms(2019, 6, 15, 23, 0, 0).unwrap(),
+                            datetime: DateTimeTz(
-                        ),
+                                Anchorage.with_ymd_and_hms(2019, 6, 15, 23, 0, 0).unwrap(),
-                        distance: Some(1000. * M),
+                            ),
-                        duration: Some(150. * S),
+                            distance: Some(1000. * M),
-                        comments: Some("Test Comments".to_owned()),
+                            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(),
             ),
         }

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<Option<gtk::Label>>,
@@ -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<Option<gtk::Label>>,
+}
+
+#[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<DayDetailPrivate>) @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(&gtk::Label::new(Some("abcdefg")));
+
+        s
+    }
+}
+*/
+
+pub fn day_detail(date: chrono::NaiveDate, records: Vec<TraxRecord>) -> 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()
+}

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 {

fitnesstrax/app/src/components/modal.rs

@@ -3,16 +3,13 @@
 //! component.
 use glib::Object;
 use gtk::{prelude::*, subclass::prelude::*};
-use std::{
+use std::cell::RefCell;
-    cell::RefCell,
-    path::{Path, PathBuf},
-};
 
 pub struct ModalPrivate {
-    title: gtk::Label,
+    header: ModalHeader,
     content: RefCell<gtk::Widget>,
     primary_action: RefCell<gtk::Button>,
-    // secondary_action: RefCell<Option<gtk::Button>>,
+    secondary_action: RefCell<Option<gtk::Button>>,
     // tertiary_action: RefCell<Option<gtk::Button>>,
     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 header = ModalHeader::new("Modal");
-        let content = gtk::Box::new(gtk::Orientation::Vertical, 0);
+        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<ModalPrivate>) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable;
 }
 
+pub trait ModalImpl: BoxImpl {}
+
+unsafe impl<T: ModalImpl> IsSubclassable<T> for Modal {}
+
 impl Modal {
-    pub fn new() -> Self {
+    pub fn new<OnCancel>(title: &str, on_cancel: OnCancel) -> Self
+    where
+        OnCancel: FnOnce() + 'static,
+    {
         let s: Self = Object::builder().build();
-
+        s.set_css_classes(&["modal"]);
-        s.set_margin_start(100);
-        s.set_margin_end(100);
-        s.set_margin_top(100);
-        s.set_margin_bottom(100);
         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<Box<dyn FnOnce()>>,
+}
+
+#[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<ModalHeaderPrivate>) @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(&center);
+        s.append(&right);
+
+        s
+    }
+
+    pub fn set_title(&self, title: &str) {
+        self.imp().title.set_text(title);
+    }
+
+    pub fn set_on_cancel<OnCancel>(&self, on_cancel: OnCancel)
+    where
+        OnCancel: FnOnce() + 'static,
+    {
+        *self.imp().on_cancel.borrow_mut() = Box::new(on_cancel);
+    }
+}

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<TraxRecord>) -> Self {
+    pub fn new<SelectFn>(records: Vec<TraxRecord>, on_select_day: Rc<SelectFn>) -> Self
+    where
+        SelectFn: Fn(chrono::NaiveDate, Vec<TraxRecord>) + '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| {
+        lst.connect_activate({
-            // This gets triggered whenever the user clicks on an item on the list. What we
+            let on_select_day = on_select_day.clone();
-            // actually want to do here is to open a modal dialog that shows all of the details of
+            move |s, idx| {
-            // the day and which allows the user to edit items within that dialog.
+                // This gets triggered whenever the user clicks on an item on the list. What we
-            let item = s.model().unwrap().item(idx).unwrap();
+                // actually want to do here is to open a modal dialog that shows all of the details of
-            let records = item.downcast_ref::<DayRecords>().unwrap();
+                // the day and which allows the user to edit items within that dialog.
-            println!("list item activated: [{:?}] {:?}", idx, records.date());
+                let item = s.model().unwrap().item(idx).unwrap();
+                let records = item.downcast_ref::<DayRecords>().unwrap();
+                on_select_day(records.date(), records.records());
+            }
         });
 
         s.append(&lst);

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();