more beautiful mapping table

bin/key-mapper-gtk

@@ -28,7 +28,7 @@ from argparse import ArgumentParser
 import gi
 gi.require_version('Gtk', '3.0')
 gi.require_version('GLib', '2.0')
-from gi.repository import Gtk
+from gi.repository import Gtk, Gdk
 
 from keymapper.data import get_data_path
 from keymapper.X import create_setxkbmap_config, apply_preset, create_preset
@@ -41,6 +41,9 @@ from keymapper.linux import get_devices
 window = None
 
 
+# TODO check for sudo rights
+
+
 class SingleKeyMapping:
     """A single, configurable key mapping."""
     def __init__(self, delete_callback):
@@ -54,24 +57,27 @@ class SingleKeyMapping:
 
     def put_together(self):
         """Create all GTK widgets."""
-        delete_button = Gtk.Button()
-        destroy_icon = Gtk.Image.new_from_icon_name(
+        delete_button = Gtk.EventBox()
+        delete_button.add(Gtk.Image.new_from_icon_name(
             'window-close', Gtk.IconSize.BUTTON
-        )
-        delete_button.set_image(destroy_icon)
-        delete_button.connect('clicked', self.on_delete_button_clicked)
+        ))
+        delete_button.connect('button-press-event', self.on_delete_button_clicked)
+        delete_button.set_margin_start(5)
+        delete_button.set_margin_end(5)
 
         key_code = Gtk.Entry()
         key_code.set_alignment(0.5)
         key_code.set_width_chars(4)
+        key_code.set_has_frame(False)
 
         original_key = Gtk.Entry()
         original_key.set_alignment(0.5)
         original_key.set_width_chars(4)
+        original_key.set_has_frame(False)
 
-        self.widgets = (delete_button, key_code, original_key)
+        self.widgets = (key_code, original_key, delete_button)
 
-    def on_delete_button_clicked(self, button):
+    def on_delete_button_clicked(self, *args):
         """Destroy the row and remove it from the config."""
         for widget in self.widgets:
             widget.destroy()
@@ -92,7 +98,7 @@ class Window:
         builder.connect_signals(self)
         self.builder = builder
 
-        window = builder.get_object('window')
+        window = self.get('window')
         window.show()
         self.window = window
 
@@ -100,6 +106,14 @@ class Window:
 
         self.select_newest_preset()
 
+        css_provider = Gtk.CssProvider()
+        css_provider.load_from_path(get_data_path('style.css'))
+        Gtk.StyleContext.add_provider_for_screen(
+            Gdk.Screen.get_default(),
+            css_provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+        )
+
     def get(self, name):
         """Get a widget from the window"""
         return self.builder.get_object(name)
@@ -216,23 +230,18 @@ class Window:
         self.mappings = []
 
         # TODO show all mapped keys from config
-        self.clear_mapping_table()
-
-        self.on_add_key_clicked()
-
-    def on_add_key_clicked(self, button=None):
-        """Add a mapping to the list of mappings."""
-        # TODO automatically add a line when no line is empty anymore,
-        #   making the add button obsolete
         single_key_mapping = SingleKeyMapping(self.on_row_removed)
         key_list = self.get('key_list')
-        key_list.insert_row(1)
+        row = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)
+        row.set_homogeneous(True)
         widgets = single_key_mapping.get_widgets()
-        key_list.attach(widgets[0], 0, 1, 1, 1)
-        key_list.attach(widgets[1], 1, 1, 1, 1)
-        key_list.attach(widgets[2], 2, 1, 1, 1)
+        row.pack_start(widgets[0], expand=True, fill=True, padding=0)
+        row.pack_start(widgets[1], expand=True, fill=True, padding=0)
+        row.pack_start(widgets[2], expand=True, fill=True, padding=0)
+        key_list.insert(row, -1)
         key_list.show_all()
-        self.rows += 1
+
+        self.clear_mapping_table()
 
     def on_row_removed(self, mapping):
         """Stuff to do when a row was removed

data/key-mapper.glade

@@ -8,6 +8,48 @@
     <property name="text" translatable="yes">asdf</property>
     <property name="xalign">0.5</property>
   </object>
+  <object class="GtkEntry">
+    <property name="visible">True</property>
+    <property name="can_focus">True</property>
+  </object>
+  <object class="GtkGrid" id="key_list2">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="border_width">2</property>
+    <child>
+      <object class="GtkLabel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="margin_top">10</property>
+        <property name="margin_bottom">5</property>
+        <property name="hexpand">True</property>
+        <property name="label" translatable="yes">Key</property>
+        <property name="width_chars">10</property>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">0</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="margin_top">10</property>
+        <property name="margin_bottom">5</property>
+        <property name="hexpand">True</property>
+        <property name="label" translatable="yes">Mapping</property>
+        <property name="width_chars">10</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">0</property>
+      </packing>
+    </child>
+    <style>
+      <class name="button"/>
+    </style>
+  </object>
   <object class="GtkWindow" id="window">
     <property name="width_request">450</property>
     <property name="can_focus">False</property>
@@ -133,18 +175,6 @@
                         <property name="position">2</property>
                       </packing>
                     </child>
-                    <child>
-                      <object class="GtkSeparator">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="opacity">0</property>
-                      </object>
-                      <packing>
-                        <property name="expand">True</property>
-                        <property name="fill">True</property>
-                        <property name="position">3</property>
-                      </packing>
-                    </child>
                     <child>
                       <object class="GtkButton" id="delete_preset">
                         <property name="label">gtk-delete</property>
@@ -272,38 +302,37 @@
         </child>
         <child>
           <object class="GtkBox">
-            <property name="width_request">200</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
             <child>
-              <object class="GtkBox" id="add_mapping">
+              <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="border_width">10</property>
+                <property name="homogeneous">True</property>
                 <child>
                   <object class="GtkLabel">
-                    <property name="width_request">50</property>
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="label" translatable="yes">Mapping</property>
-                    <property name="xalign">0</property>
+                    <property name="margin_top">5</property>
+                    <property name="margin_bottom">5</property>
+                    <property name="label" translatable="yes">Key</property>
+                    <property name="width_chars">10</property>
                   </object>
                   <packing>
-                    <property name="expand">True</property>
+                    <property name="expand">False</property>
                     <property name="fill">True</property>
                     <property name="position">0</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkButton" id="add_key">
-                    <property name="label">gtk-add</property>
-                    <property name="width_request">80</property>
+                  <object class="GtkLabel">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="use_stock">True</property>
-                    <signal name="clicked" handler="on_add_key_clicked" swapped="no"/>
+                    <property name="can_focus">False</property>
+                    <property name="margin_top">5</property>
+                    <property name="margin_bottom">5</property>
+                    <property name="label" translatable="yes">Mapping</property>
+                    <property name="width_chars">10</property>
                   </object>
                   <packing>
                     <property name="expand">False</property>
@@ -311,6 +340,17 @@
                     <property name="position">1</property>
                   </packing>
                 </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">2</property>
+                  </packing>
+                </child>
               </object>
               <packing>
                 <property name="expand">False</property>
@@ -319,48 +359,28 @@
               </packing>
             </child>
             <child>
-              <object class="GtkGrid" id="key_list">
+              <object class="GtkSeparator">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="margin_start">10</property>
-                <property name="margin_end">10</property>
-                <property name="margin_bottom">10</property>
-                <property name="row_spacing">2</property>
-                <property name="column_spacing">2</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="hexpand">True</property>
-                    <property name="label" translatable="yes">Mapping</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">2</property>
-                    <property name="top_attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="hexpand">True</property>
-                    <property name="label" translatable="yes">Key</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">1</property>
-                    <property name="top_attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
               </object>
               <packing>
-                <property name="expand">True</property>
+                <property name="expand">False</property>
                 <property name="fill">True</property>
                 <property name="position">1</property>
               </packing>
             </child>
+            <child>
+              <object class="GtkListBox" id="key_list">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="selection_mode">none</property>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
           </object>
           <packing>
             <property name="expand">False</property>

data/style.css

@@ -0,0 +1,5 @@
+list entry {
+    background-color: transparent;
+}
+
+/* @theme_bg_color, @theme_fg_color */

keymapper/X.py

@@ -220,6 +220,8 @@ def generate_symbols_file_content(device, preset, mappings):
     for code, character in mappings:
         if f'<{code}>' not in keycodes:
             logger.error(f'Unknown keycode <{code}> for "{character}"')
+            # continue, otherwise X would crash when loading
+            continue
         xkb_symbols.append(f'key <{code}> {{ [ {character} ] }};')
     if len(xkb_symbols) == 0:
         logger.error('Failed to populate xkb_symbols')