[gnome-control-center/wip/exalm/appearance: 5/8] background: Add a light/dark style switcher




commit ecd6124b91e5a8c5f6a75bd11a9bcd800837afd0
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Dec 19 17:11:57 2021 +0500

    background: Add a light/dark style switcher

 panels/background/cc-background-panel.c    |  93 ++++++++++-
 panels/background/cc-background-panel.ui   |  64 +++++++-
 panels/background/cc-background-preview.c  | 249 ++++++++++-------------------
 panels/background/cc-background-preview.ui | 138 +++++-----------
 panels/background/preview.css              |  62 ++++---
 5 files changed, 307 insertions(+), 299 deletions(-)
---
diff --git a/panels/background/cc-background-panel.c b/panels/background/cc-background-panel.c
index efeb7fea0..d55566c55 100644
--- a/panels/background/cc-background-panel.c
+++ b/panels/background/cc-background-panel.c
@@ -43,6 +43,9 @@
 #define WP_PCOLOR_KEY "primary-color"
 #define WP_SCOLOR_KEY "secondary-color"
 
+#define INTERFACE_PATH_ID "org.gnome.desktop.interface"
+#define INTERFACE_COLOR_SCHEME_KEY "color-scheme"
+
 struct _CcBackgroundPanel
 {
   CcPanel parent_instance;
@@ -51,24 +54,85 @@ struct _CcBackgroundPanel
 
   GSettings *settings;
   GSettings *lock_settings;
+  GSettings *interface_settings;
 
   GnomeDesktopThumbnailFactory *thumb_factory;
 
   CcBackgroundItem *current_background;
 
   CcBackgroundChooser *background_chooser;
-  CcBackgroundPreview *desktop_preview;
+  CcBackgroundPreview *light_preview;
+  CcBackgroundPreview *dark_preview;
+  GtkToggleButton *light_toggle;
+  GtkToggleButton *dark_toggle;
 };
 
 CC_PANEL_REGISTER (CcBackgroundPanel, cc_background_panel)
 
+static void
+load_custom_css (CcBackgroundPanel *self)
+{
+  g_autoptr(GtkCssProvider) provider = NULL;
+
+  provider = gtk_css_provider_new ();
+  gtk_css_provider_load_from_resource (provider, "/org/gnome/control-center/background/preview.css");
+  gtk_style_context_add_provider_for_display (gdk_display_get_default (),
+                                              GTK_STYLE_PROVIDER (provider),
+                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+}
+
+static void
+reload_light_dark_toggles (CcBackgroundPanel *self)
+{
+  GDesktopColorScheme scheme;
+
+  scheme = g_settings_get_enum (self->interface_settings, INTERFACE_COLOR_SCHEME_KEY);
+
+  if (scheme == G_DESKTOP_COLOR_SCHEME_DEFAULT)
+    {
+      gtk_toggle_button_set_active (self->light_toggle, TRUE);
+    }
+  else if (scheme == G_DESKTOP_COLOR_SCHEME_PREFER_DARK)
+    {
+      gtk_toggle_button_set_active (self->dark_toggle, TRUE);
+    }
+  else
+    {
+      gtk_toggle_button_set_active (self->light_toggle, FALSE);
+      gtk_toggle_button_set_active (self->dark_toggle, FALSE);
+    }
+}
+
+static void
+set_color_scheme (CcBackgroundPanel   *self,
+                  GDesktopColorScheme  color_scheme)
+{
+  g_settings_set_enum (self->interface_settings,
+                       INTERFACE_COLOR_SCHEME_KEY,
+                       color_scheme);
+}
+
+/* Color schemes */
+
+static void
+on_light_dark_toggle_active_cb (CcBackgroundPanel *self)
+{
+  if (gtk_toggle_button_get_active (self->light_toggle))
+    set_color_scheme (self, G_DESKTOP_COLOR_SCHEME_DEFAULT);
+  else if (gtk_toggle_button_get_active (self->dark_toggle))
+    set_color_scheme (self, G_DESKTOP_COLOR_SCHEME_PREFER_DARK);
+}
+
+/* Background */
+
 static void
 update_preview (CcBackgroundPanel *panel)
 {
   CcBackgroundItem *current_background;
 
   current_background = panel->current_background;
-  cc_background_preview_set_item (panel->desktop_preview, current_background);
+  cc_background_preview_set_item (panel->light_preview, current_background);
+  cc_background_preview_set_item (panel->dark_preview, current_background);
 }
 
 static gchar *
@@ -195,10 +259,9 @@ set_background (CcBackgroundPanel *panel,
     cc_background_xml_save (panel->current_background, filename);
 }
 
-
 static void
-on_chooser_background_chosen_cb (CcBackgroundPanel          *self,
-                                 CcBackgroundItem           *item)
+on_chooser_background_chosen_cb (CcBackgroundPanel *self,
+                                 CcBackgroundItem  *item)
 {
   set_background (self, self->settings, item);
   set_background (self, self->lock_settings, item);
@@ -223,6 +286,7 @@ cc_background_panel_dispose (GObject *object)
 
   g_clear_object (&panel->settings);
   g_clear_object (&panel->lock_settings);
+  g_clear_object (&panel->interface_settings);
   g_clear_object (&panel->thumb_factory);
 
   G_OBJECT_CLASS (cc_background_panel_parent_class)->dispose (object);
@@ -256,8 +320,12 @@ cc_background_panel_class_init (CcBackgroundPanelClass *klass)
   gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/control-center/background/cc-background-panel.ui");
 
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, background_chooser);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, desktop_preview);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, light_preview);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, dark_preview);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, light_toggle);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPanel, dark_toggle);
 
+  gtk_widget_class_bind_template_callback (widget_class, on_light_dark_toggle_active_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_chooser_background_chosen_cb);
   gtk_widget_class_bind_template_callback (widget_class, on_add_picture_button_clicked_cb);
 }
@@ -286,10 +354,23 @@ cc_background_panel_init (CcBackgroundPanel *panel)
   panel->lock_settings = g_settings_new (WP_LOCK_PATH_ID);
   g_settings_delay (panel->lock_settings);
 
+  panel->interface_settings = g_settings_new (INTERFACE_PATH_ID);
+
   /* Load the background */
   reload_current_bg (panel);
   update_preview (panel);
 
   /* Background settings */
   g_signal_connect_object (panel->settings, "changed", G_CALLBACK (on_settings_changed), panel, 
G_CONNECT_SWAPPED);
+
+  /* Interface settings */
+  reload_light_dark_toggles (panel);
+
+  g_signal_connect_object (panel->interface_settings,
+                           "changed::" INTERFACE_COLOR_SCHEME_KEY,
+                           G_CALLBACK (reload_light_dark_toggles),
+                           panel,
+                           G_CONNECT_SWAPPED);
+
+  load_custom_css (panel);
 }
diff --git a/panels/background/cc-background-panel.ui b/panels/background/cc-background-panel.ui
index 6d50deb62..5e512b58f 100644
--- a/panels/background/cc-background-panel.ui
+++ b/panels/background/cc-background-panel.ui
@@ -26,26 +26,74 @@
 
                     <child>
                       <object class="AdwPreferencesGroup">
+                        <property name="title" translatable="yes">Style</property>
 
                         <child>
                           <object class="AdwPreferencesRow">
                             <property name="activatable">False</property>
+                            <property name="focusable">False</property>
                             <child>
                               <object class="AdwClamp">
-                                <property name="visible">1</property>
-                                <property name="maximum_size">300</property>
-                                <property name="tightening_threshold">200</property>
+                                <property name="maximum_size">400</property>
+                                <property name="tightening_threshold">300</property>
                                 <child>
-                                  <object class="GtkBox">
-                                    <property name="spacing">24</property>
+                                  <object class="GtkGrid">
+                                    <property name="column-spacing">24</property>
+                                    <property name="row-spacing">12</property>
                                     <property name="margin-start">12</property>
                                     <property name="margin-end">12</property>
                                     <property name="margin-top">18</property>
-                                    <property name="margin-bottom">18</property>
+                                    <property name="margin-bottom">12</property>
                                     <property name="hexpand">True</property>
                                     <child>
-                                      <object class="CcBackgroundPreview" id="desktop_preview">
-                                        <property name="valign">center</property>
+                                      <object class="GtkToggleButton" id="light_toggle">
+                                        <signal name="notify::active" 
handler="on_light_dark_toggle_active_cb" swapped="true"/>
+                                        <child>
+                                          <object class="CcBackgroundPreview" id="light_preview"/>
+                                        </child>
+                                        <style>
+                                          <class name="background-preview-button"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">0</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Light</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">1</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkToggleButton" id="dark_toggle">
+                                        <property name="group">light_toggle</property>
+                                        <signal name="notify::active" 
handler="on_light_dark_toggle_active_cb" swapped="true"/>
+                                        <child>
+                                          <object class="CcBackgroundPreview" id="dark_preview">
+                                            <property name="is-dark">True</property>
+                                          </object>
+                                        </child>
+                                        <style>
+                                          <class name="background-preview-button"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">0</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">Dark</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">1</property>
+                                        </layout>
                                       </object>
                                     </child>
                                   </object>
diff --git a/panels/background/cc-background-preview.c b/panels/background/cc-background-preview.c
index b9985db5b..216ab78c3 100644
--- a/panels/background/cc-background-preview.c
+++ b/panels/background/cc-background-preview.c
@@ -26,24 +26,14 @@ struct _CcBackgroundPreview
 {
   GtkWidget         parent;
 
-  GtkImage         *animated_background_icon;
-  GtkLabel         *desktop_clock_label;
-  GtkFrame         *desktop_frame;
-  GtkDrawingArea   *drawing_area;
-  GtkFrame         *lock_frame;
-  GtkLabel         *lock_screen_label;
-  GtkWidget        *overlay;
-  GtkStack         *stack;
+  GtkWidget        *drawing_area;
+  GtkWidget        *light_dark_window;
+  GtkWidget        *dark_window;
 
   GnomeDesktopThumbnailFactory *thumbnail_factory;
 
+  gboolean          is_dark;
   CcBackgroundItem *item;
-  GSettings        *desktop_settings;
-
-  guint             lock_screen_time_timeout_id;
-  gboolean          is_lock_screen;
-  GDateTime        *previous_time;
-  gboolean          is_24h_format;
 };
 
 G_DEFINE_TYPE (CcBackgroundPreview, cc_background_preview, GTK_TYPE_WIDGET)
@@ -51,106 +41,13 @@ G_DEFINE_TYPE (CcBackgroundPreview, cc_background_preview, GTK_TYPE_WIDGET)
 enum
 {
   PROP_0,
-  PROP_IS_LOCK_SCREEN,
+  PROP_IS_DARK,
   PROP_ITEM,
   N_PROPS
 };
 
 static GParamSpec *properties [N_PROPS];
 
-/* Auxiliary methods */
-
-static void
-update_lock_screen_label (CcBackgroundPreview *self,
-                          gboolean             force)
-{
-  g_autoptr(GDateTime) now = NULL;
-  g_autofree gchar *label = NULL;
-
-  now = g_date_time_new_now_local ();
-
-  /* Don't update the label if the hour:minute pair did not change */
-  if (!force && self->previous_time &&
-      g_date_time_get_hour (now) == g_date_time_get_hour (self->previous_time) &&
-      g_date_time_get_minute (now) == g_date_time_get_minute (self->previous_time))
-    {
-      return;
-    }
-
-  if (self->is_24h_format)
-    label = g_date_time_format (now, "%R");
-  else
-    label = g_date_time_format (now, "%I:%M %p");
-
-  gtk_label_set_label (self->lock_screen_label, label);
-  gtk_label_set_label (self->desktop_clock_label, label);
-
-  g_clear_pointer (&self->previous_time, g_date_time_unref);
-  self->previous_time = g_steal_pointer (&now);
-}
-
-static void
-update_clock_format (CcBackgroundPreview *self)
-{
-  g_autofree gchar *clock_format = NULL;
-  gboolean is_24h_format;
-
-  clock_format = g_settings_get_string (self->desktop_settings, "clock-format");
-  is_24h_format = g_strcmp0 (clock_format, "24h") == 0;
-
-  if (is_24h_format != self->is_24h_format)
-    {
-      self->is_24h_format = is_24h_format;
-      update_lock_screen_label (self, TRUE);
-    }
-}
-
-static void
-load_custom_css (CcBackgroundPreview *self)
-{
-  g_autoptr(GtkCssProvider) provider = NULL;
-
-  /* use custom CSS */
-  provider = gtk_css_provider_new ();
-  gtk_css_provider_load_from_resource (provider, "/org/gnome/control-center/background/preview.css");
-  gtk_style_context_add_provider_for_display (gdk_display_get_default (),
-                                              GTK_STYLE_PROVIDER (provider),
-                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
-
-}
-
-static gboolean
-update_clock_cb (gpointer data)
-{
-  CcBackgroundPreview *self = data;
-
-  update_lock_screen_label (self, FALSE);
-
-  return G_SOURCE_CONTINUE;
-}
-
-static void
-start_monitor_time (CcBackgroundPreview *self)
-{
-  if (self->lock_screen_time_timeout_id > 0)
-    return;
-
-  self->lock_screen_time_timeout_id = g_timeout_add_seconds (1,
-                                                             update_clock_cb,
-                                                             self);
-}
-
-static void
-stop_monitor_time (CcBackgroundPreview *self)
-{
-  if (self->lock_screen_time_timeout_id > 0)
-    {
-      g_source_remove (self->lock_screen_time_timeout_id);
-      self->lock_screen_time_timeout_id = 0;
-    }
-}
-
-
 /* Callbacks */
 
 static void
@@ -188,7 +85,9 @@ cc_background_preview_dispose (GObject *object)
 {
   CcBackgroundPreview *self = (CcBackgroundPreview *)object;
 
-  g_clear_pointer (&self->overlay, gtk_widget_unparent);
+  g_clear_pointer (&self->drawing_area, gtk_widget_unparent);
+  g_clear_pointer (&self->light_dark_window, gtk_widget_unparent);
+  g_clear_pointer (&self->dark_window, gtk_widget_unparent);
 
   G_OBJECT_CLASS (cc_background_preview_parent_class)->dispose (object);
 }
@@ -198,15 +97,28 @@ cc_background_preview_finalize (GObject *object)
 {
   CcBackgroundPreview *self = (CcBackgroundPreview *)object;
 
-  g_clear_object (&self->desktop_settings);
   g_clear_object (&self->item);
   g_clear_object (&self->thumbnail_factory);
 
-  g_clear_pointer (&self->previous_time, g_date_time_unref);
+  G_OBJECT_CLASS (cc_background_preview_parent_class)->finalize (object);
+}
 
-  stop_monitor_time (self);
+static void
+set_is_dark (CcBackgroundPreview *self,
+             gboolean             is_dark)
+{
+  self->is_dark = is_dark;
 
-  G_OBJECT_CLASS (cc_background_preview_parent_class)->finalize (object);
+  if (self->is_dark)
+    {
+      gtk_widget_add_css_class (self->light_dark_window, "dark");
+      gtk_widget_remove_css_class (self->light_dark_window, "light");
+    }
+  else
+    {
+      gtk_widget_add_css_class (self->light_dark_window, "light");
+      gtk_widget_remove_css_class (self->light_dark_window, "dark");
+    }
 }
 
 static void
@@ -219,9 +131,8 @@ cc_background_preview_get_property (GObject    *object,
 
   switch (prop_id)
     {
-    case PROP_IS_LOCK_SCREEN:
-      g_value_set_boolean (value, self->is_lock_screen);
-      break;
+    case PROP_IS_DARK:
+      g_value_set_boolean (value, self->is_dark);
 
     case PROP_ITEM:
       g_value_set_object (value, self->item);
@@ -242,10 +153,8 @@ cc_background_preview_set_property (GObject      *object,
 
   switch (prop_id)
     {
-    case PROP_IS_LOCK_SCREEN:
-      self->is_lock_screen = g_value_get_boolean (value);
-      gtk_stack_set_visible_child (self->stack,
-                                   self->is_lock_screen ? GTK_WIDGET (self->lock_frame) : GTK_WIDGET 
(self->desktop_frame));
+    case PROP_IS_DARK:
+      set_is_dark (self, g_value_get_boolean (value));
       break;
 
     case PROP_ITEM:
@@ -302,32 +211,35 @@ cc_background_preview_measure (GtkWidget      *widget,
                                gint           *minimum_baseline,
                                gint           *natural_baseline)
 {
-  CcBackgroundPreview *self = (CcBackgroundPreview *)widget;
-  int child_min, child_nat;
-  int width, height;
+  GtkWidget *child;
+  int width;
 
-  get_primary_monitor_geometry (&width, &height);
-
-  gtk_widget_measure (self->overlay,
-                      orientation,
-                      for_size,
-                      &child_min,
-                      &child_nat,
-                      NULL, NULL);
+  get_primary_monitor_geometry (&width, NULL);
 
   if (orientation == GTK_ORIENTATION_HORIZONTAL)
     *natural = width;
   else if (for_size < 0)
-    *natural = height;
+    *natural = 0;
   else
-    *natural = floor ((double) MIN (for_size, width) / width * height);
-
-  *natural = MAX (*natural, child_nat);
+    *natural = floor ((double) for_size * 0.75); /* 4:3 aspect ratio */
 
   if (orientation == GTK_ORIENTATION_VERTICAL)
     *minimum = *natural;
   else
     *minimum = 0;
+
+  for (child = gtk_widget_get_first_child (widget);
+       child;
+       child = gtk_widget_get_next_sibling (child))
+    {
+      int child_min, child_nat;
+
+      gtk_widget_measure (child, orientation, for_size,
+                          &child_min, &child_nat, NULL, NULL);
+
+      *minimum = MAX (*minimum, child_min);
+      *natural = MAX (*natural, child_nat);
+    }
 }
 
 static void
@@ -337,8 +249,31 @@ cc_background_preview_size_allocate (GtkWidget *widget,
                                      gint       baseline)
 {
   CcBackgroundPreview *self = CC_BACKGROUND_PREVIEW (widget);
-
-  gtk_widget_allocate (self->overlay, width, height, baseline, NULL);
+  int window_width, window_height, margin_x, margin_y;
+  int opposite_margin_x, opposite_margin_y;
+  GskTransform *front_transform, *back_transform;
+  gboolean is_rtl;
+
+  window_width = ceil (width * 0.5);
+  window_height = ceil (height * 0.5);
+  margin_x = floor (width * 0.15);
+  margin_y = floor (height * 0.15);
+  opposite_margin_x = width - window_width - margin_x;
+  opposite_margin_y = height - window_height - margin_y;
+  is_rtl = gtk_widget_get_direction (widget) == GTK_TEXT_DIR_RTL;
+
+  front_transform =
+    gsk_transform_translate (NULL, &GRAPHENE_POINT_INIT (is_rtl ? opposite_margin_x : margin_x,
+                                                         opposite_margin_y));
+  back_transform =
+    gsk_transform_translate (NULL, &GRAPHENE_POINT_INIT (is_rtl ? margin_x : opposite_margin_x,
+                                                         margin_y));
+
+  gtk_widget_allocate (self->drawing_area, width, height, baseline, NULL);
+  gtk_widget_allocate (self->dark_window, window_width, window_height,
+                       baseline, back_transform);
+  gtk_widget_allocate (self->light_dark_window, window_width, window_height,
+                       baseline, front_transform);
 }
 
 static void
@@ -356,11 +291,11 @@ cc_background_preview_class_init (CcBackgroundPreviewClass *klass)
   widget_class->measure = cc_background_preview_measure;
   widget_class->size_allocate = cc_background_preview_size_allocate;
 
-  properties[PROP_IS_LOCK_SCREEN] = g_param_spec_boolean ("is-lock-screen",
-                                                          "Lock screen",
-                                                          "Whether the preview is of the lock screen",
-                                                          FALSE,
-                                                          G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
+  properties[PROP_IS_DARK] = g_param_spec_boolean ("is-dark",
+                                                   "Is dark",
+                                                   "Whether the preview is dark",
+                                                   FALSE,
+                                                   G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS);
 
   properties[PROP_ITEM] = g_param_spec_object ("item",
                                                "Item",
@@ -372,14 +307,11 @@ cc_background_preview_class_init (CcBackgroundPreviewClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/control-center/background/cc-background-preview.ui");
 
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, animated_background_icon);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, desktop_clock_label);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, desktop_frame);
   gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, drawing_area);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, lock_frame);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, lock_screen_label);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, overlay);
-  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, stack);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, light_dark_window);
+  gtk_widget_class_bind_template_child (widget_class, CcBackgroundPreview, dark_window);
+
+  gtk_widget_class_set_css_name (widget_class, "background-preview");
 }
 
 static void
@@ -388,17 +320,6 @@ cc_background_preview_init (CcBackgroundPreview *self)
   gtk_widget_init_template (GTK_WIDGET (self));
 
   self->thumbnail_factory = gnome_desktop_thumbnail_factory_new (GNOME_DESKTOP_THUMBNAIL_SIZE_LARGE);
-  self->desktop_settings = g_settings_new ("org.gnome.desktop.interface");
-
-  g_signal_connect_object (self->desktop_settings,
-                           "changed::clock-format",
-                           G_CALLBACK (update_clock_format),
-                           self,
-                           G_CONNECT_SWAPPED);
-
-  update_clock_format (self);
-  load_custom_css (self);
-  start_monitor_time (self);
 }
 
 CcBackgroundItem*
@@ -419,11 +340,9 @@ cc_background_preview_set_item (CcBackgroundPreview *self,
   if (!g_set_object (&self->item, item))
     return;
 
-  gtk_widget_set_visible (GTK_WIDGET (self->animated_background_icon),
-                          cc_background_item_changes_with_time (item));
-
-  gtk_drawing_area_set_draw_func (self->drawing_area, draw_preview_func, self, NULL);
-  gtk_widget_queue_draw (GTK_WIDGET (self->drawing_area));
+  gtk_drawing_area_set_draw_func (GTK_DRAWING_AREA (self->drawing_area),
+                                  draw_preview_func, self, NULL);
+  gtk_widget_queue_draw (self->drawing_area);
 
   g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_ITEM]);
 }
diff --git a/panels/background/cc-background-preview.ui b/panels/background/cc-background-preview.ui
index f2bc9f97b..4c4f5739b 100644
--- a/panels/background/cc-background-preview.ui
+++ b/panels/background/cc-background-preview.ui
@@ -2,120 +2,54 @@
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
   <template class="CcBackgroundPreview" parent="GtkWidget">
-    <property name="hexpand">True</property>
-    <property name="vexpand">False</property>
-    <style>
-      <class name="frame" />
-    </style>
+    <property name="overflow">hidden</property>
+    <property name="width-request">2</property>
+    <property name="height-request">2</property>
 
+    <!-- Wallpaper -->
     <child>
-      <object class="GtkOverlay" id="overlay">
-       <property name="hexpand">True</property>
+      <object class="GtkDrawingArea" id="drawing_area"/>
+    </child>
 
-        <!-- Wallpaper -->
+    <!-- Always dark window -->
+    <child>
+      <object class="AdwBin" id="dark_window">
+        <property name="overflow">hidden</property>
+        <style>
+          <class name="window"/>
+          <class name="back"/>
+          <class name="dark"/>
+        </style>
         <child>
-          <object class="GtkDrawingArea" id="drawing_area">
-            <property name="hexpand">True</property>
-            <property name="vexpand">True</property>
-            <property name="width-request">2</property>
-            <property name="height-request">2</property>
-          </object>
-        </child>
-
-        <!-- Desktop / Lock Screen widgets -->
-        <child type="overlay">
-          <object class="GtkStack" id="stack">
-            <property name="hexpand">True</property>
-            <property name="vexpand">True</property>
-
-            <child>
-              <object class="GtkFrame" id="desktop_frame">
-                <property name="valign">start</property>
-                <style>
-                  <class name="desktop-preview" />
-                </style>
-
-                <child>
-                  <object class="GtkCenterBox">
-
-                    <child type="start">
-                      <object class="GtkLabel">
-                       <property name="label" translatable="yes">Activities</property>
-                      </object>
-                    </child>
-
-                    <child type="center">
-                      <object class="GtkLabel" id="desktop_clock_label">
-                     </object>
-                    </child>
-
-                    <child type="end">
-                      <object class="GtkBox">
-                       <property name="spacing">4</property>
-
-                        <child>
-                          <object class="GtkImage">
-                           <property name="icon-name">network-wireless-symbolic</property>
-                            <property name="pixel-size">6</property>
-                          </object>
-                        </child>
-
-                        <child>
-                          <object class="GtkImage">
-                           <property name="icon-name">audio-volume-high-symbolic</property>
-                            <property name="pixel-size">6</property>
-                          </object>
-                        </child>
-
-                        <child>
-                          <object class="GtkImage">
-                           <property name="icon-name">battery-low-symbolic</property>
-                            <property name="pixel-size">6</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-
-              </object>
-            </child>
-
-
-            <child>
-              <object class="GtkFrame" id="lock_frame">
-                <child>
-                  <object class="GtkLabel" id="lock_screen_label">
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">True</property>
-                    <property name="xalign">0.5</property>
-                    <property name="yalign">0.5</property>
-                  </object>
-                </child>
-                <style>
-                  <class name="lock-screen-preview" />
-                </style>
-              </object>
-            </child>
+          <object class="AdwBin">
+            <style>
+              <class name="header-bar"/>
+            </style>
+            <property name="valign">start</property>
           </object>
         </child>
+      </object>
+    </child>
 
-        <!-- Wallpaper -->
-        <child type="overlay">
-          <object class="GtkImage" id="animated_background_icon">
-           <property name="halign">end</property>
-            <property name="valign">end</property>
-            <property name="margin-end">8</property>
-            <property name="margin-bottom">8</property>
-            <property name="pixel-size">16</property>
-            <property name="icon-name">slideshow-emblem</property>
+    <!-- Light/dark window -->
+    <child>
+      <object class="AdwBin" id="light_dark_window">
+        <property name="overflow">hidden</property>
+        <style>
+          <class name="window"/>
+          <class name="front"/>
+          <class name="light"/>
+        </style>
+        <child>
+          <object class="AdwBin">
             <style>
-              <class name="slideshow-icon" />
+              <class name="header-bar"/>
             </style>
+            <property name="valign">start</property>
           </object>
         </child>
-
       </object>
     </child>
+
   </template>
 </interface>
diff --git a/panels/background/preview.css b/panels/background/preview.css
index 2c9022f28..fe990cd2a 100644
--- a/panels/background/preview.css
+++ b/panels/background/preview.css
@@ -1,30 +1,56 @@
-frame.desktop-preview {
-  min-height: 10px;
-  padding: 0 4px;
-  background-color: black;
-  border-radius: 0;
+background-preview {
+  border-radius: 6px;
 }
 
-frame.desktop-preview image {
-  color: white;
+background-preview .window {
+  border-radius: 6px;
+  box-shadow: 0 1px 4px 1px alpha(black, 0.13),
+              0 1px 10px 5px alpha(black, 0.09),
+              0 3px 16px 8px alpha(black, 0.04),
+              0 0 0 1px alpha(black, .05);
 }
 
-frame.desktop-preview label {
-  color: white;
-  font-weight: bold;
-  font-size: 6px;
+background-preview .window .header-bar {
+  min-height: 15px;
+  box-shadow: inset 0 -1px @borders;
+}
+
+background-preview .window.light {
+  background-color: #fafafa;
+  color: alpha(black, .8);
 }
 
-frame.lock-screen-preview {
-  border: solid rgba(0, 0, 0, 0.33);
-  border-width: 10px 0 0 0;
+background-preview .window.front.light .header-bar {
+  background-color: #ebebeb;
 }
 
-frame.lock-screen-preview label {
+background-preview .window.dark {
+  background-color: #242424;
   color: white;
-  font-weight: bold;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  font-size: 1.2em;
+}
+
+background-preview .window.front.dark .header-bar {
+  background-color: #303030;
+}
+
+.background-preview-button {
+  background: none;
+  border-radius: 9px;
+  padding: 3px;
+  box-shadow: none;
+  outline: none;
+}
+
+.background-preview-button:checked {
+  box-shadow: 0 0 0 3px @accent_color;
+}
+
+.background-preview-button:focus:focus-visible {
+  box-shadow: 0 0 0 3px alpha(@accent_color, .3);
+}
+
+.background-preview-button:checked:focus:focus-visible {
+  box-shadow: 0 0 0 3px @accent_color, 0 0 0 6px alpha(@accent_color, .3);
 }
 
 image.slideshow-icon {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]