Display thumbnail of background image in button

src/preferences/BackgroundButton.js

@@ -1,7 +1,7 @@
-// SPDX-FileCopyrightText: 2021 Romain Vigier <contact AT romainvigier.fr>
+// SPDX-FileCopyrightText: 2021, 2022 Romain Vigier <contact AT romainvigier.fr>
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-const { Gdk, GLib, GObject, Gtk } = imports.gi;
+const { Gdk, GdkPixbuf, Gio, GLib, GObject, Gtk } = imports.gi;
 const { extensionUtils } = imports.misc;
 
 const Me = extensionUtils.getCurrentExtension();
@@ -10,7 +10,7 @@ const Me = extensionUtils.getCurrentExtension();
 var BackgroundButton = GObject.registerClass({
     GTypeName: 'BackgroundButton',
     Template: `file://${GLib.build_filenamev([Me.path, 'preferences', 'ui', 'BackgroundButton.ui'])}`,
-    InternalChildren: ['choose_button', 'change_button', 'clear_button', 'filechooser'],
+    InternalChildren: ['filechooser'],
     Properties: {
         path: GObject.ParamSpec.string(
             'path',
@@ -19,19 +19,24 @@ var BackgroundButton = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             null
         ),
+        width: GObject.ParamSpec.int(
+            'width',
+            'Width',
+            'Thumbnail width',
+            GObject.ParamFlags.READWRITE,
+            0, 600,
+            180
+        ),
+        height: GObject.ParamSpec.int(
+            'height',
+            'Height',
+            'Thumbnail height',
+            GObject.ParamFlags.READWRITE,
+            0, 600,
+            120
+        ),
     },
-}, class BackgroundButton extends Gtk.Stack {
+}, class BackgroundButton extends Gtk.Button {
-    vfunc_mnemonic_activate() {
-        this.activate();
-    }
-
-    activate() {
-        if (this.path)
-            return this._change_button.activate();
-        else
-            return this._choose_button.activate();
-    }
-
     openFileChooser() {
         this._filechooser.transient_for = this.get_root();
         this._filechooser.show();
@@ -43,19 +48,24 @@ var BackgroundButton = GObject.registerClass({
         this.path = fileChooser.get_file().get_uri();
     }
 
-    onPathChanged(button) {
+    onClicked(_button) {
-        button.visible_child_name = button.path ? 'edit' : 'choose';
-    }
-
-    onChooseButtonClicked(_button) {
         this.openFileChooser();
     }
 
-    onChangeButtonClicked(_button) {
+    getThumbnail(_widget, path) {
-        this.openFileChooser();
+        if (!path)
-    }
+            return null;
-
+        const pixbuf = GdkPixbuf.Pixbuf.new_from_file(Gio.File.new_for_uri(path).get_path());
-    onClearButtonClicked(_button) {
+        const scale = this.width / (pixbuf.width > pixbuf.height ? pixbuf.height : pixbuf.width);
-        this.path = '';
+        const thumbPixbuf = GdkPixbuf.Pixbuf.new(GdkPixbuf.Colorspace.GDK_COLORSPACE_RGB, false, pixbuf.bits_per_sample, this.width, this.height);
+        pixbuf.scale(
+            thumbPixbuf,
+            0, 0,
+            this.width, this.height,
+            -(pixbuf.width * scale - this.width) / 2, -(pixbuf.height * scale - this.height) / 2,
+            scale, scale,
+            GdkPixbuf.InterpType.GDK_INTERP_BILINEAR
+        );
+        return Gdk.Texture.new_for_pixbuf(thumbPixbuf);
     }
 });

src/preferences/ui/BackgroundButton.ui

@@ -4,54 +4,20 @@ SPDX-FileCopyrightText: 2021 Romain Vigier <contact AT romainvigier.fr>
 SPDX-License-Identifier: GPL-3.0-or-later
 -->
 <interface domain="nightthemeswitcher@romainvigier.fr">
-  <template class="BackgroundButton" parent="GtkStack">
+  <template class="BackgroundButton" parent="GtkButton">
-    <property name="hhomogeneous">False</property>
+    <property name="tooltip-text" translatable="yes">Change background</property>
-    <signal name="notify::path" handler="onPathChanged" swapped="no"/>
+    <signal name="clicked" handler="onClicked" swapped="no"/>
+    <style>
+      <class name="image-button"/>
+    </style>
     <child>
-      <object class="GtkStackPage">
+      <object class="GtkPicture">
-        <property name="name">choose</property>
+        <binding name="paintable">
-        <property name="child">
+          <closure function="getThumbnail" type="GdkPaintable">
-          <object class="GtkButton" id="choose_button">
+            <lookup name="path">BackgroundButton</lookup>
-            <property name="label" translatable="yes">Choose…</property>
+          </closure>
-            <signal name="clicked" handler="onChooseButtonClicked" swapped="no"/>
+        </binding>
-          </object>
+        <property name="can-shrink">False</property>
-        </property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkStackPage">
-        <property name="name">edit</property>
-        <property name="child">
-          <object class="GtkBox">
-            <property name="orientation">horizontal</property>
-            <style>
-              <class name="linked"/>
-            </style>
-            <child>
-              <object class="GtkButton" id="change_button">
-                <property name="tooltip-text" translatable="yes">Change background</property>
-                <signal name="clicked" handler="onChangeButtonClicked" swapped="no"/>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="label" bind-source="BackgroundButton" bind-property="path"/>
-                    <property name="ellipsize">middle</property>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child>
-              <object class="GtkButton" id="clear_button">
-                <property name="label" translatable="yes">Clear</property>
-                <property name="icon-name">edit-delete-symbolic</property>
-                <property name="tooltip-text" translatable="yes">Clear</property>
-                <signal name="clicked" handler="onClearButtonClicked" swapped="no"/>
-                <style>
-                  <class name="destructive-action"/>
-                </style>
-              </object>
-            </child>
-          </object>
-        </property>
       </object>
     </child>
   </template>

src/preferences/ui/BackgroundsPage.ui

@@ -16,6 +16,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
             <property name="activatable-widget">day_button</property>
             <child>
               <object class="BackgroundButton" id="day_button">
+                <property name="margin-top">12</property>
+                <property name="margin-bottom">12</property>
                 <property name="valign">center</property>
               </object>
             </child>
@@ -27,6 +29,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
             <property name="activatable-widget">night_button</property>
             <child>
               <object class="BackgroundButton" id="night_button">
+                <property name="margin-top">12</property>
+                <property name="margin-bottom">12</property>
                 <property name="valign">center</property>
               </object>
             </child>