Set up CSS styles around the date range picker

fitnesstrax/app/resources/style.css

@@ -11,13 +11,52 @@
     padding: 8px;
 }
 
-.welcome__footer {}
-
 .historical {
     margin: 32px;
     border-radius: 8px;
 }
 
+.date-range-picker {
+    margin-bottom: 16px;
+}
+
+/*
+.date-range-picker > box:not(:last-child) {
+    margin-bottom: 8px;
+}
+*/
+
+.date-range-picker__date-field {
+    margin: 8px;
+    font-size: x-large;
+}
+
+.date-range-picker__search-button {
+    margin: 8px;
+    font-size: x-large;
+}
+
+.date-range-picker__range-button {
+    margin: 8px;
+    font-size: x-large;
+}
+
+.date-field > label {
+    font-size: x-large;
+}
+
+.date-field__year {
+    margin: 0px 4px 0px 0px;
+}
+
+.date-field__month {
+    margin: 0px 4px 0px 4px;
+}
+
+.date-field__day {
+    margin: 0px 0px 0px 4px;
+}
+
 .day-summary {
     padding: 8px;
 }

fitnesstrax/app/src/components/date_field.rs

@@ -113,11 +113,12 @@ glib::wrapper! {
 impl DateField {
     pub fn new(date: chrono::NaiveDate) -> Self {
         let s: Self = Object::builder().build();
-
+        s.add_css_class("date-field");
-        println!("{}", date);
 
         s.append(&s.imp().year.widget());
+        s.append(&gtk::Label::new(Some("-")));
         s.append(&s.imp().month.widget());
+        s.append(&gtk::Label::new(Some("-")));
         s.append(&s.imp().day.widget());
 
         s.set_date(date);
@@ -146,7 +147,7 @@ impl DateField {
 #[cfg(test)]
 mod test {
     use super::*;
-    use crate::gtk_init::gtk_init;
+    // use crate::gtk_init::gtk_init;
 
     // Enabling this test pushes tests on the TextField into an infinite loop. That likely indicates a bad interaction within the TextField itself, and that is going to need to be fixed.
     #[test]

fitnesstrax/app/src/components/date_range.rs

@@ -14,14 +14,11 @@ General Public License for more details.
 You should have received a copy of the GNU General Public License along with FitnessTrax. If not, see <https://www.gnu.org/licenses/>.
 */
 
-use crate::{
+use crate::{components::DateField, types::DayInterval};
-    components::{DateField},
-    types::DayInterval,
-};
 use chrono::{Duration, Local, Months};
 use glib::Object;
 use gtk::{prelude::*, subclass::prelude::*};
-use std::{cell::RefCell};
+use std::cell::RefCell;
 
 type OnSearch = dyn Fn(DayInterval) + 'static;
 
@@ -40,9 +37,14 @@ impl ObjectSubclass for DateRangePickerPrivate {
 
     fn new() -> Self {
         let default_date = Local::now().date_naive();
+        let start = DateField::new(default_date);
+        start.add_css_class("date-range-picker__date-field");
+        let end = DateField::new(default_date);
+        end.add_css_class("date-range-picker__date-field");
+
         Self {
-            start: DateField::new(default_date),
+            start,
-            end: DateField::new(default_date),
+            end,
             on_search: RefCell::new(Box::new(|_| {})),
         }
     }
@@ -56,7 +58,6 @@ glib::wrapper! {
     pub struct DateRangePicker(ObjectSubclass<DateRangePickerPrivate>) @extends gtk::Box, gtk::Widget, @implements gtk::Orientable;
 }
 
-
 impl DateRangePicker {
     pub fn connect_on_search<OnSearch>(&self, f: OnSearch)
     where
@@ -78,19 +79,25 @@ impl DateRangePicker {
     }
 }
 
-
 impl Default for DateRangePicker {
     fn default() -> Self {
         let s: Self = Object::builder().build();
         s.set_orientation(gtk::Orientation::Vertical);
+        s.add_css_class("date-range-picker");
 
-        let search_button = gtk::Button::with_label("Search");
+        let search_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__search-button"])
+            .label("Search")
+            .build();
         search_button.connect_clicked({
             let s = s.clone();
             move |_| (s.imp().on_search.borrow())(s.interval())
         });
 
-        let last_week_button = gtk::Button::builder().label("last week").build();
+        let last_week_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__range-button"])
+            .label("week")
+            .build();
         last_week_button.connect_clicked({
             let s = s.clone();
             move |_| {
@@ -101,7 +108,10 @@ impl Default for DateRangePicker {
             }
         });
 
-        let two_weeks_button = gtk::Button::builder().label("last two weeks").build();
+        let two_weeks_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__range-button"])
+            .label("two weeks")
+            .build();
         two_weeks_button.connect_clicked({
             let s = s.clone();
             move |_| {
@@ -112,7 +122,10 @@ impl Default for DateRangePicker {
             }
         });
 
-        let last_month_button = gtk::Button::builder().label("last month").build();
+        let last_month_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__range-button"])
+            .label("month")
+            .build();
         last_month_button.connect_clicked({
             let s = s.clone();
             move |_| {
@@ -123,7 +136,10 @@ impl Default for DateRangePicker {
             }
         });
 
-        let six_months_button = gtk::Button::builder().label("last six months").build();
+        let six_months_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__range-button"])
+            .label("six months")
+            .build();
         six_months_button.connect_clicked({
             let s = s.clone();
             move |_| {
@@ -134,7 +150,10 @@ impl Default for DateRangePicker {
             }
         });
 
-        let last_year_button = gtk::Button::builder().label("last year").build();
+        let last_year_button = gtk::Button::builder()
+            .css_classes(["date-range-picker__range-button"])
+            .label("year")
+            .build();
         last_year_button.connect_clicked({
             let s = s.clone();
             move |_| {

fitnesstrax/app/src/views/historical_view.rs

@@ -141,7 +141,10 @@ impl HistoricalView {
 
     pub fn set_interval(&self, interval: DayInterval) {
         let mut model = gio::ListStore::new::<Date>();
-        model.extend(interval.days().map(Date::new));
+        let mut days = interval.days().map(Date::new).collect::<Vec<Date>>();
+        days.reverse();
+        model.extend(days.into_iter());
+        // model.extend(interval.days().map(Date::new));
         self.imp()
             .list_view
             .set_model(Some(&gtk::NoSelection::new(Some(model))));