add custom buttons for text alignment

keyboard.py

@@ -1,13 +1,13 @@
 import sys
 from os import path
-import html
 
 import gi
 
 gi.require_version("Gtk", "4.0")
 from gi.repository import GLib, Gtk, Gdk, Gio
 
 from characters import CHARS, find_mapped_char, char_location, BACKSPACE, ENTER, SHIFT, SPACE
+from keybutton import KeyButtonSingleText, KeyButtonDualText
 
 
 class KeyboardApp(Gtk.Application):
@@ -111,30 +111,25 @@ def generate_grid_buttons(self, language: str):
                 if widget is not None:
                     self.grid.remove(widget)
 
-                char = default_chars[i][j]
-                markup = f"<span foreground='grey' size='125%'>{html.escape(char)}</span>"
-                mapped_char = CHARS[language][i][j]
-                ACTIONABLE_CHARS = [BACKSPACE, ENTER, SHIFT, SPACE]
-                if mapped_char not in ACTIONABLE_CHARS:
-                    # rather than using double tabs, use keybutton.py to set left text and right text
-                    markup += f"\t\t<span foreground='#E0115F' size='250%'>{html.escape(mapped_char)}</span>"
-
-                label: Gtk.Label = Gtk.Label()
-                label.set_markup(markup)
-                label.add_css_class("key")
-                if mapped_char not in ACTIONABLE_CHARS:
-                    label.set_halign(Gtk.Align.START)
-                keybutton: Gtk.Button = Gtk.Button()
-                keybutton.set_child(label)
-                keybutton.set_can_focus(False)
-                keybutton.connect("clicked", self.on_keybutton_clicked, mapped_char)
+                char, mapped_char = default_chars[i][j], CHARS[language][i][j]
+                actionable_chars = [BACKSPACE, ENTER, SHIFT, SPACE]
+                btn: Gtk.Button = KeyButtonDualText(char, mapped_char)
+                if mapped_char in actionable_chars:
+                    btn: Gtk.Button = KeyButtonSingleText(mapped_char)
+                btn.connect("clicked", self.on_keybutton_clicked, mapped_char)
+
                 if mapped_char == ENTER:
-                    self.grid.attach(keybutton, j, i, 2, 1)
+                    # enlarge the "enter" button
+                    self.grid.attach(btn, j, i, 2, 1)
                     continue
                 elif mapped_char == SHIFT:
-                    if self.enabled_shift and not keybutton.has_css_class("keyboard-activating"):
-                        keybutton.add_css_class("keyboard-activating")
-                self.grid.attach(keybutton, j, i, 1, 1)
+                    # adjust the style of "shift" button
+                    if self.enabled_shift and not btn.has_css_class("keyboard-activating"):
+                        btn.add_css_class("keyboard-activating")
+                    if self.current_langauge.lstrip("_") != language.lstrip("_"):
+                        # switching between languages should toggle off "shift" button
+                        btn.remove_css_class("keyboard-activating")
+                self.grid.attach(btn, j, i, 1, 1)
 
     def change_language(self, action: Gio.SimpleAction, param: GLib.VariantType):
         action_name: str = action.get_name()
@@ -214,10 +209,12 @@ def do_activate(self):
         hamburger_button.set_popover(popover)
         hamburger_button.set_icon_name("open-menu-symbolic")
 
+        # Quick copy button
         quick_copy_button = Gtk.Button(focusable=False)
         quick_copy_button.connect("clicked", self.on_quick_copy_button_clicked)
         quick_copy_button.set_icon_name("edit-copy")
 
+        # Quick delete button
         quick_delete_button = Gtk.Button(focusable=False)
         quick_delete_button.connect("clicked", self.on_quick_delete_button_clicked)
         quick_delete_button.set_icon_name("edit-delete")

keybutton.py

@@ -1,24 +1,55 @@
 import gi
+import html
 
 gi.require_version("Gtk", "4.0")
 from gi.repository import Gtk
 
+small_markup = "<span foreground='grey' size='125%'>{text}</span>"
+large_markup = "<span foreground='#E0115F' size='250%'>{text}</span>"
+
+
+class KeyButtonDualText(Gtk.Button):
+    left_label: Gtk.Label
+    right_label: Gtk.Label
 
-class KeyButton(Gtk.Button):
     def __init__(self, left_text, right_text):
         super().__init__()
 
-        hbox = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, spacing=10)
+        self.left_label = Gtk.Label(label=left_text)
+        self.left_label.set_halign(Gtk.Align.START)
+        self.left_label.set_hexpand(True)
+        self.left_label.add_css_class("key")
+        markup = small_markup.format(text=html.escape(left_text))
+        self.left_label.set_markup(markup)
+
+        self.right_label = Gtk.Label(label=right_text)
+        self.right_label.set_halign(Gtk.Align.END)
+        self.right_label.set_hexpand(True)
+        self.right_label.add_css_class("key")
+        markup = large_markup.format(text=html.escape(right_text))
+        self.right_label.set_markup(markup)
+
+        hbox = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)
+        hbox.append(self.left_label)
+        hbox.append(self.right_label)
+        self.set_child(hbox)
+        self.set_can_focus(False)
 
-        left_label = Gtk.Label(label=left_text)
-        left_label.set_halign(Gtk.Align.START)
-        left_label.set_hexpand(True)
 
-        right_label = Gtk.Label(label=right_text)
-        right_label.set_halign(Gtk.Align.END)
-        right_label.set_hexpand(True)
+class KeyButtonSingleText(Gtk.Button):
+    center_text: Gtk.Label
+
+    def __init__(self, center_text):
+        super().__init__()
 
-        hbox.append(left_label)
-        hbox.append(right_label)
+        self.center_text = Gtk.Label(label=center_text)
+        self.center_text.set_halign(Gtk.Align.CENTER)
+        self.center_text.set_hexpand(True)
+        self.center_text.add_css_class("key")
+        markup = small_markup.format(text=html.escape(center_text))
+        self.center_text.set_markup(markup)
 
+        hbox = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)
+        hbox.append(self.center_text)
         self.set_child(hbox)
+        self.set_can_focus(False)