savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

Open and style the day detail modal

This commit is contained in:
Savanni D'Gerinel 2023-12-25 00:36:13 -05:00
parent 55e9805975
commit aecd188151
7 changed files with 306 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
fitnesstrax/app/resources/style.css
View File

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

100
fitnesstrax/app/src/app_window.rs
View File

@ -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<RefCell<View>>,
settings: gio::Settings,
overlay: gtk::Overlay,
modal: RefCell<Option<gtk::Widget>>,
}
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(&gtk::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(),
),
}

83
fitnesstrax/app/src/components/day.rs
View File

@ -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()
}

4
fitnesstrax/app/src/components/mod.rs
View File

@ -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 {

132
fitnesstrax/app/src/components/modal.rs
View File

@ -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<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 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<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_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<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);
}
}

25
fitnesstrax/app/src/views/historical_view.rs
View File

@ -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| {
// 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::<DayRecords>().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::<DayRecords>().unwrap();
on_select_day(records.date(), records.records());
}
});
s.append(&lst);

3
fitnesstrax/app/src/views/welcome_view.rs
View File

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