UI 3

inputremapper/gui/components.py

@@ -73,70 +73,159 @@
 ]
 
 
-class DeviceSelection:
-    """the dropdown menu to select the active_group"""
+class DeviceGroupEntry(Gtk.ToggleButton):
+    """A device that can be selected in the GUI.
+
+    For example a keyboard or a mouse.
+    """
+
+    __gtype_name__ = "DeviceGroupEntry"
 
     def __init__(
         self,
         message_broker: MessageBroker,
         controller: Controller,
-        combobox: Gtk.ComboBox,
+        icon_name: Optional[str],
+        group_key: str,
     ):
-        self._message_broker = message_broker
+        super().__init__()
+        self.icon_name = icon_name
+        self.group_key = group_key
         self._controller = controller
-        self._device_store = Gtk.ListStore(str, str, str)
-        self._gui = combobox
 
-        # https://python-gtk-3-tutorial.readthedocs.io/en/latest/treeview.html#the-view
-        combobox.set_model(self._device_store)
-        renderer_icon = Gtk.CellRendererPixbuf()
-        renderer_text = Gtk.CellRendererText()
-        renderer_text.set_padding(5, 0)
-        combobox.pack_start(renderer_icon, False)
-        combobox.pack_start(renderer_text, False)
-        combobox.add_attribute(renderer_icon, "icon-name", 1)
-        combobox.add_attribute(renderer_text, "text", 2)
-        combobox.set_id_column(0)
+        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+
+        if icon_name:
+            icon = Gtk.Image.new_from_icon_name(icon_name, Gtk.IconSize.DND)
+            box.add(icon)
+
+        label = Gtk.Label()
+        label.set_label(group_key)
+        box.add(label)
+
+        box.set_margin_top(18)
+        box.set_margin_bottom(18)
+        box.set_homogeneous(True)
+        box.set_spacing(12)
+
+        self.add(box)
+
+        self.show_all()
+
+        self.connect("toggled", self._on_gtk_select_device)
+
+    def _on_gtk_select_device(self, *_, **__):
+        logger.debug('Selecting device "%s"', self.group_key)
+        self._controller.load_group(self.group_key)
+
+    def show_active(self, active):
+        """Show the active state without triggering anything."""
+        with HandlerDisabled(self, self._on_gtk_select_device):
+            self.set_active(active)
+
+
+class DeviceGroupSelection:
+    """A wrapper for the container with our groups.
+
+    A group is a collection of devices.
+    """
+
+    def __init__(
+        self,
+        message_broker: MessageBroker,
+        controller: Controller,
+        flowbox: Gtk.FlowBox,
+    ):
+        self._message_broker = message_broker
+        self._controller = controller
+        self._gui = flowbox
 
         self._message_broker.subscribe(MessageType.groups, self._on_groups_changed)
         self._message_broker.subscribe(MessageType.group, self._on_group_changed)
-        combobox.connect("changed", self._on_gtk_select_device)
 
     def _on_groups_changed(self, data: GroupsData):
-        with HandlerDisabled(self._gui, self._on_gtk_select_device):
-            self._device_store.clear()
-            for group_key, types in data.groups.items():
-                if len(types) > 0:
-                    device_type = sorted(types, key=ICON_PRIORITIES.index)[0]
-                    icon_name = ICON_NAMES[device_type]
-                else:
-                    icon_name = None
-
-                logger.debug(f"adding {group_key} to device dropdown ")
-                self._device_store.append([group_key, icon_name, group_key])
+        self._gui.foreach(lambda group: self._gui.remove(group))
+
+        for group_key, types in data.groups.items():
+            if len(types) > 0:
+                device_type = sorted(types, key=ICON_PRIORITIES.index)[0]
+                icon_name = ICON_NAMES[device_type]
+            else:
+                icon_name = None
+
+            logger.debug(f"adding {group_key} to device selection")
+            device_group_entry = DeviceGroupEntry(
+                self._message_broker,
+                self._controller,
+                icon_name,
+                group_key,
+            )
+            self._gui.insert(device_group_entry, -1)
 
     def _on_group_changed(self, data: GroupData):
-        with HandlerDisabled(self._gui, self._on_gtk_select_device):
-            self._gui.set_active_id(data.group_key)
+        self.show_active_group_key(data.group_key)
 
-    def _on_gtk_select_device(self, *_, **__):
-        group_key = self._gui.get_active_id()
-        logger.debug('Selecting device "%s"', group_key)
-        self._controller.load_group(group_key)
+    def get_active_device_group_entry(self) -> DeviceGroupEntry:
+        """Find the currently selected DeviceGroupEntry."""
+        # TODO only used in tests, move there
+        for child in self._gui.get_children():
+            device_group_entry = child.get_children()[0]
+
+            if device_group_entry.get_active():
+                return device_group_entry
+
+        # I dunno if this can happen
+        raise Exception("Expected one device group to be selected.")
+
+    def set_active_group_key(self, group_key: str):
+        """Change the currently selected group."""
+        # TODO only used in tests
+        for child in self._gui.get_children():
+            device_group_entry: DeviceGroupEntry = child.get_children()[0]
+            device_group_entry.set_active(device_group_entry.group_key == group_key)
+
+    def show_active_group_key(self, group_key: str):
+        """Highlight the button of the given group."""
+        for child in self._gui.get_children():
+            device_group_entry: DeviceGroupEntry = child.get_children()[0]
+            device_group_entry.show_active(device_group_entry.group_key == group_key)
+
+
+# TODO test
+class Stack:
+    """Wraps the Stack ("Devices", "Presets", "Editor")."""
+    def __init__(
+        self,
+        message_broker: MessageBroker,
+        controller: Controller,
+        stack: Gtk.Stack,
+    ):
+        self._message_broker = message_broker
+        self._controller = controller
+        self._gui = stack
+
+        self._message_broker.subscribe(MessageType.group, self._on_group_changed)
+
+    def _on_group_changed(self, _):
+        # switch to the preset selection
+        self._gui.set_visible_child(self._gui.get_children()[1])
 
 
 class TargetSelection:
-    """the dropdown menu to select the targe_uinput of the active_mapping"""
+    """The dropdown menu to select the targe_uinput of the active_mapping,
+
+    For example "keyboard" or "gamepad".
+    """
 
     def __init__(
         self,
         message_broker: MessageBroker,
         controller: Controller,
-        combobox: Gtk.ComboBox,
+        listbox: Gtk.listbox,
     ):
         self._message_broker = message_broker
         self._controller = controller
-        self._gui = combobox
+        self._gui = listbox
 
         self._message_broker.subscribe(MessageType.uinputs, self._on_uinputs_changed)
         self._message_broker.subscribe(MessageType.mapping, self._on_mapping_loaded)
@@ -175,40 +264,150 @@ def _on_gtk_target_selected(self, *_):
         self._controller.update_mapping(target_uinput=target)
 
 
-class PresetSelection:
-    """the dropdown menu to select the active_preset"""
+class PresetEntry(Gtk.ToggleButton):
+    """A preset that can be selected in the GUI."""
+
+    __gtype_name__ = "PresetEntry"
+
+    def __init__(
+        self,
+        message_broker: MessageBroker,
+        controller: Controller,
+        preset_name: str,
+    ):
+        super().__init__()
+        self.preset_name = preset_name
+        self._controller = controller
+
+        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+
+        label = Gtk.Label()
+        label.set_label(preset_name)
+        box.add(label)
+
+        box.set_margin_top(18)
+        box.set_margin_bottom(18)
+        box.set_homogeneous(True)
+        box.set_spacing(12)
+
+        self.add(box)
+
+        self.show_all()
+
+        self.connect("toggled", self._on_gtk_select_preset)
+
+    def _on_gtk_select_preset(self, *_, **__):
+        logger.debug('Selecting preset "%s"', self.preset_name)
+        self._controller.load_preset(self.preset_name)
+
+    def show_active(self, active):
+        """Show the active state without triggering anything."""
+        with HandlerDisabled(self, self._on_gtk_select_preset):
+            self.set_active(active)
+
+
+# TODO test
+class PresetSelectionTitle:
+    """The title of the preset selection, which is the device name."""
 
     def __init__(
         self,
         message_broker: MessageBroker,
         controller: Controller,
-        combobox: Gtk.ComboBoxText,
+        label: Gtk.Label,
     ):
         self._message_broker = message_broker
         self._controller = controller
-        self._gui = combobox
+        self._gui = label
+        self._connect_message_listener()
+
+    def _connect_message_listener(self):
+        self._message_broker.subscribe(MessageType.group, self._on_group_changed)
+
+    def _on_group_changed(self, data: GroupData):
+        self._gui.set_label(data.group_key)
+
 
+# TODO test
+class EditorTitle:
+    """The title of the editor, which is the device and preset name."""
+
+    def __init__(
+        self,
+        message_broker: MessageBroker,
+        controller: Controller,
+        label: Gtk.Label,
+    ):
+        self._message_broker = message_broker
+        self._controller = controller
+        self._gui = label
         self._connect_message_listener()
-        combobox.connect("changed", self._on_gtk_select_preset)
+
+        self._group_key = ""
+        self._preset_name = ""
 
     def _connect_message_listener(self):
         self._message_broker.subscribe(MessageType.group, self._on_group_changed)
         self._message_broker.subscribe(MessageType.preset, self._on_preset_changed)
 
+    def _on_preset_changed(self, data: PresetData):
+        self._preset_name = data.name
+        self._render()
+
     def _on_group_changed(self, data: GroupData):
-        with HandlerDisabled(self._gui, self._on_gtk_select_preset):
-            self._gui.remove_all()
-            for preset in data.presets:
-                self._gui.append(preset, preset)
+        self._group_key = data.group_key
+        self._render()
+
+    def _render(self):
+        self._gui.set_label(f"{self._group_key} / {self._preset_name}")
+
+
+class PresetSelection:
+    """A wrapper for the container with our presets.
+
+    Selectes the active_preset.
+    """
+
+    def __init__(
+        self,
+        message_broker: MessageBroker,
+        controller: Controller,
+        flowbox: Gtk.FlowBox,
+    ):
+        self._message_broker = message_broker
+        self._controller = controller
+        self._gui = flowbox
+        self._connect_message_listener()
+
+    def _connect_message_listener(self):
+        self._message_broker.subscribe(MessageType.group, self._on_group_changed)
+        self._message_broker.subscribe(MessageType.preset, self._on_preset_changed)
+
+    def _on_group_changed(self, data: GroupData):
+        self._gui.foreach(lambda preset: self._gui.remove(preset))
+        for preset in data.presets:
+            preset_entry = PresetEntry(
+                self._message_broker,
+                self._controller,
+                preset,
+            )
+            self._gui.insert(preset_entry, -1)
 
     def _on_preset_changed(self, data: PresetData):
-        with HandlerDisabled(self._gui, self._on_gtk_select_preset):
-            self._gui.set_active_id(data.name)
+        self.show_active_preset(data.name)
 
-    def _on_gtk_select_preset(self, *_, **__):
-        name = self._gui.get_active_id()
-        logger.debug('Selecting preset "%s"', name)
-        self._controller.load_preset(name)
+    def set_active_preset(self, preset_name: str):
+        """Change the currently selected preset."""
+        # TODO might only be needed in tests
+        for child in self._gui.get_children():
+            preset_entry: PresetEntry = child.get_children()[0]
+            preset_entry.set_active(preset_entry.preset_name == preset_name)
+
+    def show_active_preset(self, preset_name: str):
+        """Highlight the button of the given preset."""
+        for child in self._gui.get_children():
+            preset_entry: PresetEntry = child.get_children()[0]
+            preset_entry.show_active(preset_entry.preset_name == preset_name)
 
 
 class MappingListBox:
@@ -246,7 +445,10 @@ def _on_preset_changed(self, data: PresetData):
 
         for name, combination in data.mappings:
             selection_label = SelectionLabel(
-                self._message_broker, self._controller, name, combination
+                self._message_broker,
+                self._controller,
+                name,
+                combination,
             )
             self._gui.insert(selection_label, -1)
         self._gui.invalidate_sort()
@@ -931,7 +1133,7 @@ def __init__(
         self,
         message_broker: MessageBroker,
         controller: Controller,
-        gui: Gtk.ComboBox,
+        gui: Gtk.listbox,
     ):
         self._message_broker = message_broker
         self._controller = controller