[gnome-control-center/wip/exalm/appearance: 82/82] background: Polish wallpaper thumbnails

[Alexander Mikhaylenko <alexm src gnome org>]

commit 66f4e5ab990236d8f232b6c24b2a4e37d1c6bbde
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Dec 19 21:08:45 2021 +0500

    background: Polish wallpaper thumbnails
    
    Make corners rounded.
    
    Replace selected style with an overlay check, make the close button
    smaller to match. Move slideshow indicator to the lower left corner.
    
    Set margins in css.

 panels/background/background-selected-symbolic.svg | 49 ++++++++++++++++++++++
 panels/background/background.gresource.xml         |  1 +
 panels/background/cc-background-chooser.c          | 20 +++++----
 panels/background/cc-background-chooser.ui         |  6 +++
 panels/background/preview.css                      | 33 ++++++++++++---
 5 files changed, 95 insertions(+), 14 deletions(-)
---
diff --git a/panels/background/background-selected-symbolic.svg 
b/panels/background/background-selected-symbolic.svg
new file mode 100644
index 000000000..4e7cab117
--- /dev/null
+++ b/panels/background/background-selected-symbolic.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333333 4.2333334"
+   version="1.1"
+   id="svg814"
+   sodipodi:docname="theme-check-symbolic.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:svg="http://www.w3.org/2000/svg";>
+  <sodipodi:namedview
+     id="namedview816"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     objecttolerance="10.0"
+     gridtolerance="10.0"
+     guidetolerance="10.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="true"
+     units="px"
+     inkscape:zoom="15.827255"
+     inkscape:cx="-2.8747878"
+     inkscape:cy="23.851261"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid973" />
+  </sodipodi:namedview>
+  <defs
+     id="defs811" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="color:#000000;fill:#3d3846;-inkscape-stroke:none"
+       d="M 3.4041416,1.0427229 1.8709385,2.3708479 1.1834385,1.6931135 0.62679792,2.2575666 
1.8338291,3.450926 3.9236729,1.6442854 Z"
+       id="path5387-7" />
+  </g>
+</svg>
diff --git a/panels/background/background.gresource.xml b/panels/background/background.gresource.xml
index 5f2dc6e7b..bb932a30f 100644
--- a/panels/background/background.gresource.xml
+++ b/panels/background/background.gresource.xml
@@ -8,6 +8,7 @@
   </gresource>
 
   <gresource prefix="/org/gnome/ControlCenter/icons/scalable/actions">
+    <file preprocess="xml-stripblanks">background-selected-symbolic.svg</file>
     <file preprocess="xml-stripblanks">slideshow-symbolic.svg</file>
   </gresource>
 </gresources>
diff --git a/panels/background/cc-background-chooser.c b/panels/background/cc-background-chooser.c
index 7eb9aa0f1..587bbad1f 100644
--- a/panels/background/cc-background-chooser.c
+++ b/panels/background/cc-background-chooser.c
@@ -94,6 +94,7 @@ create_widget_func (gpointer model_item,
   GtkWidget *child;
   GtkWidget *picture;
   GtkWidget *icon;
+  GtkWidget *check;
   GtkWidget *button = NULL;
   BgSource *source;
 
@@ -108,26 +109,24 @@ create_widget_func (gpointer model_item,
   gtk_picture_set_can_shrink (GTK_PICTURE (picture), FALSE);
 
   icon = gtk_image_new_from_icon_name ("slideshow-symbolic");
-  gtk_widget_set_margin_start (icon, 8);
-  gtk_widget_set_margin_end (icon, 8);
-  gtk_widget_set_margin_top (icon, 8);
-  gtk_widget_set_margin_bottom (icon, 8);
-  gtk_widget_set_halign (icon, GTK_ALIGN_END);
+  gtk_widget_set_halign (icon, GTK_ALIGN_START);
   gtk_widget_set_valign (icon, GTK_ALIGN_END);
   gtk_widget_set_visible (icon, cc_background_item_changes_with_time (item));
   gtk_widget_add_css_class (icon, "slideshow-icon");
 
+  check = gtk_image_new_from_icon_name ("background-selected-symbolic");
+  gtk_widget_set_halign (check, GTK_ALIGN_END);
+  gtk_widget_set_valign (check, GTK_ALIGN_END);
+  gtk_widget_add_css_class (check, "selected-check");
+
   if (BG_IS_RECENT_SOURCE (source))
     {
       button = gtk_button_new_from_icon_name ("window-close-symbolic");
       gtk_widget_set_halign (button, GTK_ALIGN_END);
       gtk_widget_set_valign (button, GTK_ALIGN_START);
-      gtk_widget_set_margin_start (button, 6);
-      gtk_widget_set_margin_end (button, 6);
-      gtk_widget_set_margin_top (button, 6);
-      gtk_widget_set_margin_bottom (button, 6);
 
       gtk_widget_add_css_class (button, "osd");
+      gtk_widget_add_css_class (button, "circular");
       gtk_widget_add_css_class (button, "remove-button");
 
       g_signal_connect (button,
@@ -137,8 +136,11 @@ create_widget_func (gpointer model_item,
     }
 
   overlay = gtk_overlay_new ();
+  gtk_widget_set_overflow (overlay, GTK_OVERFLOW_HIDDEN);
+  gtk_widget_add_css_class (overlay, "background-thumbnail");
   gtk_overlay_set_child (GTK_OVERLAY (overlay), picture);
   gtk_overlay_add_overlay (GTK_OVERLAY (overlay), icon);
+  gtk_overlay_add_overlay (GTK_OVERLAY (overlay), check);
   if (button)
     gtk_overlay_add_overlay (GTK_OVERLAY (overlay), button);
 
diff --git a/panels/background/cc-background-chooser.ui b/panels/background/cc-background-chooser.ui
index 204e7176c..509ed53ed 100644
--- a/panels/background/cc-background-chooser.ui
+++ b/panels/background/cc-background-chooser.ui
@@ -22,6 +22,9 @@
             <property name="activate-on-single-click">True</property>
             <property name="selection-mode">single</property>
             <signal name="child-activated" handler="on_item_activated_cb" object="CcBackgroundChooser" 
swapped="no" />
+            <style>
+              <class name="background-flowbox"/>
+            </style>
           </object>
         </child>
 
@@ -47,6 +50,9 @@
         <property name="activate-on-single-click">True</property>
         <property name="selection-mode">single</property>
         <signal name="child-activated" handler="on_item_activated_cb" object="CcBackgroundChooser" 
swapped="no" />
+        <style>
+          <class name="background-flowbox"/>
+        </style>
       </object>
     </child>
 
diff --git a/panels/background/preview.css b/panels/background/preview.css
index 21552ef94..654231932 100644
--- a/panels/background/preview.css
+++ b/panels/background/preview.css
@@ -53,14 +53,37 @@ background-preview .window.front.dark .header-bar {
   box-shadow: 0 0 0 3px @accent_color, 0 0 0 6px alpha(@accent_color, .3);
 }
 
+.background-flowbox > flowboxchild {
+  background: none;
+  border-radius: 9px;
+}
+
+.background-thumbnail {
+  border-radius: 6px;
+}
+
 .slideshow-icon {
   color: white;
   -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
+  margin: 8px;
+}
+
+.selected-check {
+  color: @accent_fg_color;
+  background: @accent_bg_color;
+  border-radius: 100px;
+  padding: 2px;
+  opacity: 0;
+  margin: 6px;
+}
+
+flowboxchild:selected .selected-check {
+  opacity: 1;
 }
 
-button.remove-button {
-  border-radius: 9999px;
-  padding: 1px 0px; /* circles instead of ellipses */
-  background-origin: padding-box, border-box;
-  background-clip: padding-box, border-box;
+.remove-button {
+  padding: 2px;
+  min-width: 0;
+  min-height: 0;
+  margin: 6px;
 }