Merge pull request #30 from avojak/backspace-icon

Use backspace icon instead of unicode symbol

data/com.github.avojak.warble.gresource.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+    <gresource prefix="/com/github/avojak/warble">
+        <file alias="ControlKeyOverlayIcon.css" compressed="true">styles/ControlKeyOverlayIcon.css</file>
+    </gresource>
+</gresources>

data/meson.build

@@ -278,7 +278,7 @@ i18n.merge_file(
 )
 
 # Use GResource
-# css_gresource = gnome.compile_resources(
-#     'gresource_css',
-#     meson.project_name() + '.gresource.xml'
-# )
+css_gresource = gnome.compile_resources(
+    'gresource_css',
+    meson.project_name() + '.gresource.xml'
+)

data/styles/ControlKeyOverlayIcon.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2022 Andrew Vojak (https://avojak.com)
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public
+ * License along with this program; if not, write to the
+ * Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301 USA
+ *
+ * Authored by: Andrew Vojak <andrew.vojak@gmail.com>
+ */
+
+image.control-key-overlay-icon {
+    /* Force the icon to be dark, even when the system changes to dark style
+    because the image that the icon is overlayed on is light. */
+    color: rgb(51, 51, 51);
+}

src/Widgets/ControlKey.vala

@@ -26,10 +26,10 @@ public class Warble.Widgets.ControlKey : Gtk.EventBox {
         private const int WIDTH = 48;
         private const int HEIGHT = 32;
 
-        public string text { get; construct; }
+        public string? text { get; construct; }
         public int y_offset { get; set; }
 
-        public KeyImage (string text) {
+        public KeyImage (string? text) {
             Object (
                 gicon: new ThemedIcon (Constants.APP_ID + ".control-key"),
                 text: text,
@@ -42,7 +42,9 @@ public class Warble.Widgets.ControlKey : Gtk.EventBox {
         protected override bool draw (Cairo.Context ctx) {
             base.draw (ctx);
             ctx.save ();
-            draw_text (ctx);
+            if (text != null) {
+                draw_text (ctx);
+            }
             ctx.restore ();
             return false;
         }
@@ -64,20 +66,48 @@ public class Warble.Widgets.ControlKey : Gtk.EventBox {
 
     }
 
-    public string text { get; construct; }
+    private static Gtk.CssProvider provider;
+
+    public string? text { get; construct; }
+    public string? icon_name { get; construct; }
 
     private Warble.Widgets.ControlKey.KeyImage key;
+    private Gtk.Image? overlay_icon;
     private bool is_pressed = false;
 
-    public ControlKey (string text) {
+    public ControlKey.with_text (string text) {
+        Object (
+            text: text,
+            icon_name: null
+        );
+    }
+
+    public ControlKey.with_icon (string icon_name) {
         Object (
-            text: text
+            text: null,
+            icon_name: icon_name
         );
     }
 
+    static construct {
+        provider = new Gtk.CssProvider ();
+        provider.load_from_resource ("com/github/avojak/warble/ControlKeyOverlayIcon.css");
+    }
+
     construct {
+        var overlay = new Gtk.Overlay ();
         key = new Warble.Widgets.ControlKey.KeyImage (text);
-        this.child = key;
+        overlay.add (key);
+        if (icon_name != null) {
+            overlay_icon = new Gtk.Image () {
+                gicon = new GLib.ThemedIcon (icon_name)
+            };
+            unowned Gtk.StyleContext style_context = overlay_icon.get_style_context ();
+            style_context.add_class ("control-key-overlay-icon");
+            style_context.add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+            overlay.add_overlay (overlay_icon);
+        }
+        this.child = overlay;
 
         // I *think* this will work for touchscreens, but I don't have a device to test on :(
         add_events (Gdk.EventMask.BUTTON_PRESS_MASK | Gdk.EventMask.TOUCH_MASK | Gdk.EventMask.BUTTON_RELEASE_MASK);
@@ -88,12 +118,18 @@ public class Warble.Widgets.ControlKey : Gtk.EventBox {
             }
             is_pressed = true;
             key.y_offset = 2; // Pixels in the icon are shifted down 2 pixels to simulate being pressed
+            if (overlay_icon != null) {
+                overlay_icon.margin_top = 2;
+            }
             update_icon ();
             clicked ();
         });
         this.button_release_event.connect (() => {
             is_pressed = false;
             key.y_offset = 0;
+            if (overlay_icon != null) {
+                overlay_icon.margin_top = 0;
+            }
             update_icon ();
         });
         this.touch_event.connect (() => {

src/Widgets/Keyboard.vala

@@ -54,7 +54,7 @@ public class Warble.Widgets.Keyboard : Gtk.Grid {
             hexpand = true
         };
         if (include_control_keys) {
-            Warble.Widgets.ControlKey return_key = new Warble.Widgets.ControlKey ("Enter");
+            Warble.Widgets.ControlKey return_key = new Warble.Widgets.ControlKey.with_text ("Enter");
             return_key.clicked.connect (() => {
                 return_key_clicked ();
             });
@@ -69,7 +69,7 @@ public class Warble.Widgets.Keyboard : Gtk.Grid {
             row_grid.add (key);
         }
         if (include_control_keys) {
-            Warble.Widgets.ControlKey backspace_key = new Warble.Widgets.ControlKey ("⌫");
+            Warble.Widgets.ControlKey backspace_key = new Warble.Widgets.ControlKey.with_icon ("edit-clear-symbolic");
             backspace_key.clicked.connect (() => {
                 backspace_key_clicked ();
             });

src/meson.build

@@ -43,7 +43,7 @@ executable(
     application_id,
     warble_files,
     config_header,
-    # css_gresource,
+    css_gresource,
     dependencies: [
         dependency('gtk+-3.0', version: '>= 3.6.4'),
         dependency('gee-0.8', version: '>= 0.8.5'),