(UX) Add a subtle colored tint to the carousel (#758)

* (UX) Add a subtle background to the carousel based on brand colours

* Undo normalisation

* fixups

---------

Co-authored-by: Eva M <kolunmi@posteo.net>

Author: AlexanderVanhee

src/bz-full-view.blp

@@ -584,6 +584,8 @@ template $BzFullView: Adw.Bin {
                       hexpand: true;
                       visible: bind template.debounced-ui-entry as <$BzResult>.resolved as <bool>;
                       clicked => $screenshot_clicked_cb() swapped;
+                      light-accent-color: bind template.debounced-ui-entry as <$BzResult>.object as <$BzEntry>.light-accent-color;
+                      dark-accent-color: bind template.debounced-ui-entry as <$BzResult>.object as <$BzEntry>.dark-accent-color;
 
                       model: $BzLazyAsyncTextureModel {
                         model: bind template.debounced-ui-entry as <$BzResult>.object as <$BzEntry>.screenshot-paintables;

src/bz-screenshots-carousel.blp

@@ -8,8 +8,8 @@ template $BzScreenshotsCarousel: Gtk.Widget {
 
   styles [
     "screenshot-carousel",
-    "view",
     "frame",
+    "carousel-box",
   ]
 
   layout-manager: Gtk.BinLayout {};
@@ -23,10 +23,6 @@ template $BzScreenshotsCarousel: Gtk.Widget {
       halign: fill;
       valign: fill;
 
-      styles [
-        "carousel-box",
-      ]
-
       Adw.Carousel carousel {
         vexpand: true;
         hexpand: true;

src/bz-screenshots-carousel.c

@@ -26,10 +26,16 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-#include "bz-screenshots-carousel.h"
-#include "bz-decorated-screenshot.h"
 #include <adwaita.h>
 
+#include "bz-decorated-screenshot.h"
+#include "bz-screenshots-carousel.h"
+
+#define LIGHT_CLASS          "screenshot-carousel-light"
+#define DARK_CLASS           "screenshot-carousel-dark"
+#define LIGHT_MIX_PERCENTAGE 25
+#define DARK_MIX_PERCENTAGE  4
+
 struct _BzScreenshotsCarousel
 {
   GtkWidget parent_instance;
@@ -41,9 +47,12 @@ struct _BzScreenshotsCarousel
   GtkButton   *next_button;
   GtkWidget   *next_button_revealer;
 
-  GListModel *model;
-  gboolean    compact;
-  gulong      items_changed_id;
+  GListModel     *model;
+  gboolean        compact;
+  char           *light_accent_color;
+  char           *dark_accent_color;
+  GtkCssProvider *css;
+  gulong          items_changed_id;
 };
 
 G_DEFINE_FINAL_TYPE (BzScreenshotsCarousel, bz_screenshots_carousel, GTK_TYPE_WIDGET)
@@ -53,6 +62,8 @@ enum
   PROP_0,
   PROP_MODEL,
   PROP_COMPACT,
+  PROP_LIGHT_ACCENT_COLOR,
+  PROP_DARK_ACCENT_COLOR,
   N_PROPS
 };
 
@@ -66,6 +77,9 @@ enum
 
 static guint signals[N_SIGNALS];
 
+static void refresh_css (BzScreenshotsCarousel *self);
+static void clear_css (BzScreenshotsCarousel *self);
+
 static void
 update_button_visibility (BzScreenshotsCarousel *self)
 {
@@ -270,6 +284,24 @@ on_model_items_changed (GListModel            *model,
   populate_carousel (self);
 }
 
+static void
+dark_changed (BzScreenshotsCarousel *self,
+              GParamSpec            *pspec,
+              AdwStyleManager       *mgr)
+{
+  gboolean is_dark;
+
+  if (self->css == NULL)
+    return;
+
+  is_dark = adw_style_manager_get_dark (adw_style_manager_get_default ());
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self), LIGHT_CLASS);
+  gtk_widget_remove_css_class (GTK_WIDGET (self), DARK_CLASS);
+
+  gtk_widget_add_css_class (GTK_WIDGET (self), is_dark ? DARK_CLASS : LIGHT_CLASS);
+}
+
 static void
 bz_screenshots_carousel_dispose (GObject *object)
 {
@@ -284,6 +316,11 @@ bz_screenshots_carousel_dispose (GObject *object)
 
   g_clear_object (&self->model);
 
+  clear_css (self);
+
+  g_clear_pointer (&self->light_accent_color, g_free);
+  g_clear_pointer (&self->dark_accent_color, g_free);
+
   if (root_child != NULL)
     gtk_widget_unparent (root_child);
 
@@ -308,6 +345,12 @@ bz_screenshots_carousel_get_property (GObject    *object,
     case PROP_COMPACT:
       g_value_set_boolean (value, self->compact);
       break;
+    case PROP_LIGHT_ACCENT_COLOR:
+      g_value_set_string (value, self->light_accent_color);
+      break;
+    case PROP_DARK_ACCENT_COLOR:
+      g_value_set_string (value, self->dark_accent_color);
+      break;
     default:
       G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
     }
@@ -329,6 +372,12 @@ bz_screenshots_carousel_set_property (GObject      *object,
     case PROP_COMPACT:
       bz_screenshots_carousel_set_compact (self, g_value_get_boolean (value));
       break;
+    case PROP_LIGHT_ACCENT_COLOR:
+      bz_screenshots_carousel_set_light_accent_color (self, g_value_get_string (value));
+      break;
+    case PROP_DARK_ACCENT_COLOR:
+      bz_screenshots_carousel_set_dark_accent_color (self, g_value_get_string (value));
+      break;
     default:
       G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
     }
@@ -358,6 +407,20 @@ bz_screenshots_carousel_class_init (BzScreenshotsCarouselClass *klass)
                             FALSE,
                             G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
 
+  properties[PROP_LIGHT_ACCENT_COLOR] =
+      g_param_spec_string ("light-accent-color",
+                           NULL,
+                           NULL,
+                           NULL,
+                           G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
+
+  properties[PROP_DARK_ACCENT_COLOR] =
+      g_param_spec_string ("dark-accent-color",
+                           NULL,
+                           NULL,
+                           NULL,
+                           G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
+
   g_object_class_install_properties (object_class, N_PROPS, properties);
 
   signals[SIGNAL_CLICKED] =
@@ -396,6 +459,13 @@ bz_screenshots_carousel_init (BzScreenshotsCarousel *self)
 
   if (self->carousel)
     adw_carousel_set_allow_scroll_wheel (self->carousel, FALSE);
+
+  g_signal_connect_object (
+      adw_style_manager_get_default (),
+      "notify::dark",
+      G_CALLBACK (dark_changed),
+      self,
+      G_CONNECT_SWAPPED);
 }
 
 GtkWidget *
@@ -455,3 +525,120 @@ bz_screenshots_carousel_get_compact (BzScreenshotsCarousel *self)
   g_return_val_if_fail (BZ_IS_SCREENSHOTS_CAROUSEL (self), FALSE);
   return self->compact;
 }
+
+void
+bz_screenshots_carousel_set_light_accent_color (BzScreenshotsCarousel *self,
+                                                const char            *color)
+{
+  g_return_if_fail (BZ_IS_SCREENSHOTS_CAROUSEL (self));
+
+  if (color == self->light_accent_color ||
+      (color != NULL &&
+       g_strcmp0 (self->light_accent_color, color) == 0))
+    return;
+
+  g_clear_pointer (&self->light_accent_color, g_free);
+  if (color != NULL)
+    self->light_accent_color = g_strdup (color);
+
+  refresh_css (self);
+
+  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_LIGHT_ACCENT_COLOR]);
+}
+
+const char *
+bz_screenshots_carousel_get_light_accent_color (BzScreenshotsCarousel *self)
+{
+  g_return_val_if_fail (BZ_IS_SCREENSHOTS_CAROUSEL (self), NULL);
+  return self->light_accent_color;
+}
+
+void
+bz_screenshots_carousel_set_dark_accent_color (BzScreenshotsCarousel *self,
+                                               const char            *color)
+{
+  g_return_if_fail (BZ_IS_SCREENSHOTS_CAROUSEL (self));
+
+  if (color == self->dark_accent_color ||
+      (color != NULL &&
+       g_strcmp0 (self->dark_accent_color, color) == 0))
+    return;
+
+  g_clear_pointer (&self->dark_accent_color, g_free);
+  if (color != NULL)
+    self->dark_accent_color = g_strdup (color);
+
+  refresh_css (self);
+
+  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_DARK_ACCENT_COLOR]);
+}
+
+const char *
+bz_screenshots_carousel_get_dark_accent_color (BzScreenshotsCarousel *self)
+{
+  g_return_val_if_fail (BZ_IS_SCREENSHOTS_CAROUSEL (self), NULL);
+  return self->dark_accent_color;
+}
+
+static void
+refresh_css (BzScreenshotsCarousel *self)
+{
+  g_autofree char *css_string = NULL;
+  g_autofree char *light_bg   = NULL;
+  g_autofree char *dark_bg    = NULL;
+  gboolean         is_dark;
+
+  clear_css (self);
+
+  if (self->light_accent_color == NULL &&
+      self->dark_accent_color == NULL)
+    return;
+
+  if (self->light_accent_color != NULL && self->dark_accent_color != NULL)
+    light_bg = g_strdup_printf ("color-mix(in srgb, %s %d%%, rgb(255,255,255))",
+                                self->light_accent_color, LIGHT_MIX_PERCENTAGE);
+  else if (self->light_accent_color != NULL)
+    light_bg = g_strdup (self->light_accent_color);
+  else if (self->dark_accent_color != NULL)
+    light_bg = g_strdup_printf ("color-mix(in srgb, %s %d%%, rgb(255,255,255))",
+                                self->dark_accent_color, LIGHT_MIX_PERCENTAGE);
+
+  if (self->light_accent_color != NULL && self->dark_accent_color != NULL)
+    dark_bg = g_strdup_printf ("color-mix(in srgb, %s %d%%, rgb(29,29,32))",
+                               self->dark_accent_color, DARK_MIX_PERCENTAGE);
+  else if (self->dark_accent_color != NULL)
+    dark_bg = g_strdup (self->dark_accent_color);
+  else if (self->light_accent_color != NULL)
+    dark_bg = g_strdup_printf ("color-mix(in srgb, %s %d%%, rgb(29,29,32))",
+                               self->light_accent_color, DARK_MIX_PERCENTAGE);
+
+  css_string = g_strdup_printf (
+      ".%s{background-color:%s;}\n"
+      ".%s{background-color:%s;}",
+      LIGHT_CLASS, light_bg,
+      DARK_CLASS, dark_bg);
+
+  self->css = gtk_css_provider_new ();
+  gtk_css_provider_load_from_string (self->css, css_string);
+  gtk_style_context_add_provider_for_display (
+      gdk_display_get_default (),
+      GTK_STYLE_PROVIDER (self->css),
+      GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+  is_dark = adw_style_manager_get_dark (adw_style_manager_get_default ());
+
+  gtk_widget_add_css_class (GTK_WIDGET (self), is_dark ? DARK_CLASS : LIGHT_CLASS);
+}
+
+static void
+clear_css (BzScreenshotsCarousel *self)
+{
+  gtk_widget_remove_css_class (GTK_WIDGET (self), LIGHT_CLASS);
+  gtk_widget_remove_css_class (GTK_WIDGET (self), DARK_CLASS);
+
+  if (self->css != NULL)
+    gtk_style_context_remove_provider_for_display (
+        gdk_display_get_default (),
+        GTK_STYLE_PROVIDER (self->css));
+  g_clear_pointer (&self->css, g_object_unref);
+}

src/bz-screenshots-carousel.h

@@ -44,4 +44,16 @@ bz_screenshots_carousel_set_compact (BzScreenshotsCarousel *self,
 gboolean
 bz_screenshots_carousel_get_compact (BzScreenshotsCarousel *self);
 
+void
+bz_screenshots_carousel_set_light_accent_color (BzScreenshotsCarousel *self,
+                                                const char            *color);
+const char *
+bz_screenshots_carousel_get_light_accent_color (BzScreenshotsCarousel *self);
+
+void
+bz_screenshots_carousel_set_dark_accent_color (BzScreenshotsCarousel *self,
+                                               const char            *color);
+const char *
+bz_screenshots_carousel_get_dark_accent_color (BzScreenshotsCarousel *self);
+
 G_END_DECLS