From 955f1d0ff3fadf73edf142e07abd41a88b2cad44 Mon Sep 17 00:00:00 2001
From: David Bliss <vivid.map6767@davidbliss.me>
Date: Sat, 6 Apr 2024 15:32:08 +0100
Subject: [PATCH] Nicer month grid styling

---
 data/resources/style.css           | 12 +++++++++++
 src/app/components/month_photos.rs | 33 ++++++++++++++++++++----------
 src/app/components/year_photos.rs  |  5 -----
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/data/resources/style.css b/data/resources/style.css
index 416d39bd..e3e6fab6 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -20,3 +20,15 @@
   font-weight: bold;
   font-size: 18px;
 }
+
+/* Month photo grid frame around year labels */
+.photo-grid-month-frame{
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+/* Month photo grid frame label */
+.photo-grid-month-label{
+  color: rgba(255,255,255,0.8);
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/src/app/components/month_photos.rs b/src/app/components/month_photos.rs
index 9449482d..47ae0eb5 100644
--- a/src/app/components/month_photos.rs
+++ b/src/app/components/month_photos.rs
@@ -8,9 +8,11 @@ use photos_core;
 use itertools::Itertools;
 use relm4::gtk;
 use relm4::gtk::prelude::WidgetExt;
+use relm4::gtk::prelude::FrameExt;
 use relm4::typed_view::grid::{RelmGridItem, TypedGridView};
 use relm4::*;
 use relm4::prelude::*;
+
 use std::path;
 use std::sync::{Arc, Mutex};
 use photos_core::YearMonth;
@@ -43,22 +45,31 @@ pub enum MonthPhotosOutput {
 }
 
 impl RelmGridItem for PhotoGridItem {
-    type Root = gtk::Box;
+    type Root = gtk::Overlay;
     type Widgets = Widgets;
 
-    fn setup(_item: &gtk::ListItem) -> (gtk::Box, Widgets) {
+    fn setup(_item: &gtk::ListItem) -> (Self::Root, Self::Widgets) {
         relm4::view! {
-           my_box = gtk::Box {
-                set_orientation: gtk::Orientation::Vertical,
-                set_margin_top: 12,
-
-                #[name(label)]
-                gtk::Label {
-                    add_css_class: "caption-heading",
-                    set_margin_bottom: 4,
+           my_box = gtk::Overlay {
+               // set_orientation: gtk::Orientation::Vertical,
+               // set_margin_top: 12,
+
+                add_overlay =  &gtk::Frame {
+                    set_halign: gtk::Align::Start,
+                    set_valign: gtk::Align::Start,
+                    set_margin_start: 12,
+                    set_margin_top: 8,
+                    add_css_class: "photo-grid-month-frame",
+
+                    #[wrap(Some)]
+                    #[name(label)]
+                    set_child = &gtk::Label{
+                        add_css_class: "photo-grid-month-label",
+                    },
                 },
 
-                adw::Clamp {
+                #[wrap(Some)]
+                set_child = &adw::Clamp {
                     set_maximum_size: 200,
 
                     gtk::Frame {
diff --git a/src/app/components/year_photos.rs b/src/app/components/year_photos.rs
index 0e678e14..c25754f9 100644
--- a/src/app/components/year_photos.rs
+++ b/src/app/components/year_photos.rs
@@ -90,11 +90,6 @@ impl RelmGridItem for PhotoGridItem {
         widgets
             .label
             .set_text(format!("{}", self.picture.year()).as_str());
-            //.set_markup(format!("<span foreground='white' alpha='100%' size='large' weight='bold'>{}</span>", self.picture.year()).as_str());
-
-       // widgets
-         //   .under_label
-           // .set_markup(format!("<span foreground='black' alpha='100%' size='large' weight='bold'>{}</span>", self.picture.year()).as_str());
 
         if self.picture.square_preview_path.as_ref().is_some_and(|f|f.exists()) {
             widgets