Merge pull request #2195 from freakboy3742/web-header

Correct the creation of menubars in the web backend.

changes/2194.bugfix.rst

@@ -0,0 +1 @@
+The web backend no longer generates a duplicate titlebar.

changes/2195.bugfix.rst

@@ -0,0 +1 @@
+An issue with the display of the About dialog on the web backend was corrected.

gtk/src/toga_gtk/app.py

@@ -14,15 +14,6 @@
 from .window import Window
 
 
-def gtk_menu_item_activate(cmd):
-    """Convert a GTK menu item activation into a command invocation."""
-
-    def _handler(action, data):
-        cmd.action()
-
-    return _handler
-
-
 class MainWindow(Window):
     def create(self):
         self.native = Gtk.ApplicationWindow()
@@ -151,7 +142,7 @@ def create_menus(self):
 
                 cmd_id = "command-%s" % id(cmd)
                 action = Gio.SimpleAction.new(cmd_id, None)
-                action.connect("activate", gtk_menu_item_activate(cmd))
+                action.connect("activate", cmd._impl.gtk_activate)
 
                 cmd._impl.native.append(action)
                 cmd._impl.set_enabled(cmd.enabled)

gtk/src/toga_gtk/command.py

@@ -9,6 +9,12 @@ def __init__(self, interface):
         self.interface = interface
         self.native = []
 
+    def gtk_activate(self, action, data):
+        self.interface.action()
+
+    def gtk_clicked(self, action):
+        self.interface.action()
+
     def set_enabled(self, value):
         enabled = self.interface.enabled
         for widget in self.native:

gtk/src/toga_gtk/window.py

@@ -4,15 +4,6 @@
 from .libs import Gdk, Gtk
 
 
-def gtk_toolbar_item_clicked(cmd):
-    """Convert a GTK toolbar item click into a command invocation."""
-
-    def _handler(widget):
-        cmd.action()
-
-    return _handler
-
-
 class Window:
     def __init__(self, interface, title, position, size):
         self.interface = interface
@@ -100,7 +91,7 @@ def create_toolbar(self):
                 item_impl.set_label(cmd.text)
                 if cmd.tooltip:
                     item_impl.set_tooltip_text(cmd.tooltip)
-                item_impl.connect("clicked", gtk_toolbar_item_clicked(cmd))
+                item_impl.connect("clicked", cmd._impl.gtk_clicked)
                 cmd._impl.native.append(item_impl)
             self.toolbar_items[cmd] = item_impl
             self.native_toolbar.insert(item_impl, -1)

web/src/toga_web/app.py

@@ -23,7 +23,7 @@ def create(self):
         self.interface.commands.add(
             # ---- Help menu ----------------------------------
             toga.Command(
-                lambda _: self.interface.about(),
+                self._menu_about,
                 "About " + formal_name,
                 group=toga.Group.HELP,
             ),
@@ -34,7 +34,9 @@ def create(self):
             ),
         )
 
-        # Create the menus.
+        # Create the menus. This is done before main window content to ensure
+        # the <header> for the menubar is inserted before the <main> for the
+        # main window.
         self.create_menus()
 
         # Call user code to populate the main window
@@ -79,7 +81,7 @@ def create_menus(self):
                     content=cmd.text,
                     disabled=not cmd.enabled,
                 )
-                menu_item.onclick = cmd.action
+                menu_item.onclick = cmd._impl.dom_click
 
                 submenu.append(menu_item)
 
@@ -103,8 +105,10 @@ def create_menus(self):
             else:
                 help_menu_container.appendChild(submenu)
 
+        menubar_id = f"{self.interface.app_id}-header"
         self.menubar = create_element(
             "header",
+            id=menubar_id,
             classes=["toga"],
             children=[
                 create_element(
@@ -124,8 +128,15 @@ def create_menus(self):
             ],
         )
 
-        # Menubar exists at the app level.
-        self.native.appendChild(self.menubar)
+        # If there's an existing menubar, replace it.
+        old_menubar = js.document.getElementById(menubar_id)
+        if old_menubar:
+            old_menubar.replaceWith(self.menubar)
+        else:
+            self.native.append(self.menubar)
+
+    def _menu_about(self, widget, **kwargs):
+        self.interface.about()
 
     def main_loop(self):
         self.create()

web/src/toga_web/command.py

@@ -6,6 +6,9 @@ def __init__(self, interface):
         self.interface = interface
         self.native = []
 
+    def dom_click(self, event):
+        self.interface.action()
+
     def set_enabled(self, value):
         pass
         # enabled = self.interface.enabled

winforms/src/toga_winforms/app.py

@@ -146,7 +146,7 @@ def create_menus(self):
             else:
                 submenu = self._submenu(cmd.group, menubar)
                 item = WinForms.ToolStripMenuItem(cmd.text)
-                item.Click += WeakrefCallable(cmd._impl.winforms_handler)
+                item.Click += WeakrefCallable(cmd._impl.winforms_Click)
                 if cmd.shortcut is not None:
                     try:
                         item.ShortcutKeys = toga_to_winforms_key(cmd.shortcut)

winforms/src/toga_winforms/command.py

@@ -3,10 +3,10 @@ def __init__(self, interface):
         self.interface = interface
         self.native = []
 
+    def winforms_Click(self, sender, event):
+        return self.interface.action()
+
     def set_enabled(self, value):
         if self.native:
             for widget in self.native:
                 widget.Enabled = self.interface.enabled
-
-    def winforms_handler(self, sender, event):
-        return self.interface.action()

winforms/src/toga_winforms/window.py

@@ -63,7 +63,7 @@ def create_toolbar(self):
                     if cmd.icon is not None:
                         item.Image = cmd.icon._impl.native.ToBitmap()
                     item.Enabled = cmd.enabled
-                    item.Click += WeakrefCallable(cmd._impl.winforms_handler)
+                    item.Click += WeakrefCallable(cmd._impl.winforms_Click)
                     cmd._impl.native.append(item)
                 self.toolbar_native.Items.Add(item)