Nicer month grid styling

blissd · Apr 6, 2024 · 955f1d0 · 955f1d0
1 parent 0ae0082
commit 955f1d0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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