fixup! Port UI to GTK 4

data/gtk.css

@@ -49,5 +49,12 @@ actionbar {
 }
 
 gridview child {
-    padding: 10px;
+    padding: 1px;
+}
+gridview.selection child {
+    opacity: 0.5;
+}
+gridview.selection child:hover,
+gridview.selection child:selected {
+    opacity: 1;
 }

data/ui/playlist-panel.ui

@@ -12,9 +12,7 @@
                 <property name="can-focus">True</property>
                 <property name="receives-default">True</property>
                 <property name="tooltip-text" translatable="yes">Select multiple albums</property>
-                <!--
                 <signal name="toggled" handler="on_select_toggled" swapped="no"/>
-                -->
                 <child>
                     <object class="GtkImage">
                         <property name="icon-name">object-select-symbolic</property>
@@ -28,9 +26,7 @@
                 <property name="can-focus">True</property>
                 <property name="receives-default">True</property>
                 <property name="tooltip-text" translatable="yes">Clear the playlist</property>
-                <!--
                 <signal name="clicked" handler="on_clear_clicked" swapped="no"/>
-                -->
                 <child>
                     <object class="GtkImage">
                         <property name="visible">True</property>
@@ -43,7 +39,7 @@
     </object>
     <template class="McgPlaylistPanel" parent="AdwBin">
         <child>
-            <object class="GtkStack">
+            <object class="GtkStack" id="playlist_stack">
                 <property name="transition-type">slide-left-right</property>
                 <child>
                     <object class="GtkBox" id="panel_normal">
@@ -54,14 +50,8 @@
                                 <child>
                                     <object class="GtkGridView" id="playlist_grid">
                                         <property name="orientation">vertical</property>
-                                        <!--
-                                        <property name="item-padding">0</property>
-                                        -->
                                         <property name="single-click-activate">true</property>
                                         <signal name="activate" handler="on_playlist_grid_clicked"/>
-                                        <!--
-                                        <signal name="selection-changed" handler="on_playlist_grid_selection_changed" swapped="no"/>
-                                        -->
                                         <style>
                                           <class name="no-bg"/>
                                         </style>
@@ -112,22 +102,18 @@
                                 <property name="transition-type">slide-up</property>
                                 <child>
                                     <object class="GtkActionBar" id="actionbar">
-                                        <child>
+                                        <child type="end">
                                             <object class="GtkButton">
                                                 <property name="label" translatable="yes">cancel</property>
                                                 <property name="receives-default">True</property>
-                                                <!--
                                                 <signal name="clicked" handler="on_selection_cancel_clicked" swapped="no"/>
-                                                -->
                                             </object>
                                         </child>
-                                        <child>
+                                        <child type="end">
                                             <object class="GtkButton">
                                                 <property name="label" translatable="yes">remove</property>
                                                 <property name="receives-default">True</property>
-                                                <!--
                                                 <signal name="clicked" handler="on_selection_remove_clicked" swapped="no"/>
-                                                -->
                                             </object>
                                         </child>
                                     </object>
@@ -141,6 +127,7 @@
                         <property name="orientation">vertical</property>
                         <child>
                             <object class="GtkStack" id="standalone_stack">
+                                <property name="vexpand">true</property>
                                 <child>
                                     <object class="GtkSpinner" id="standalone_spinner">
                                         <property name="visible">True</property>
@@ -153,9 +140,6 @@
                                         <property name="can-focus">True</property>
                                         <property name="kinetic-scrolling">False</property>
                                         <property name="overlay-scrolling">False</property>
-                                        <!--
-                                        <signal name="size-allocate" handler="on_standalone_scroll_size_allocate" swapped="no"/>
-                                        -->
                                         <child>
                                             <object class="GtkViewport">
                                                 <property name="visible">True</property>
@@ -163,9 +147,7 @@
                                                 <child>
                                                     <object class="GtkImage" id="standalone_image">
                                                         <property name="icon-name">gtk-missing-image</property>
-                                                        <!--
+                                                        <property name="icon-size">large</property>
-                                                        <property name="icon_size">6</property>
-                                                        -->
                                                     </object>
                                                 </child>
                                             </object>
@@ -176,22 +158,18 @@
                         </child>
                         <child>
                             <object class="GtkActionBar" id="actionbar_standalone">
-                                <child>
+                                <child type="end">
                                     <object class="GtkButton">
                                         <property name="label" translatable="yes">remove</property>
                                         <property name="receives-default">True</property>
-                                        <!--
                                         <signal name="clicked" handler="on_standalone_remove_clicked" swapped="no"/>
-                                        -->
                                     </object>
                                 </child>
-                                <child>
+                                <child type="end">
                                     <object class="GtkButton">
                                         <property name="label" translatable="yes">play</property>
                                         <property name="receives-default">True</property>
-                                        <!--
                                         <signal name="clicked" handler="on_standalone_play_clicked" swapped="no"/>
-                                        -->
                                     </object>
                                 </child>
                             </object>

data/ui/window.ui

@@ -4,9 +4,8 @@
     <requires lib="adw" version="1.2" />
     <template class="McgAppWindow" parent="AdwApplicationWindow">
         <property name="content">
-            <object class="GtkBox">
+            <object class="AdwToolbarView" id="toolbar_view">
-                <property name="orientation">vertical</property>
+                <child type="top">
-                <child>
                     <object class="AdwHeaderBar" id="headerbar">
                         <property name="centering-policy">strict</property>
                         <property name="show_end_title_buttons">true</property>
@@ -44,30 +43,35 @@
                         </child>
                     </object>
                 </child>
-                <child>
+                <property name="content">
-                    <object class="AdwToastOverlay" id="info_toast">
+                    <object class="GtkBox" id="content_box">
+                        <property name="orientation">vertical</property>
                         <child>
-                            <object class="GtkStack" id="content_stack">
+                            <object class="AdwToastOverlay" id="info_toast">
-                                <property name="name">content_stack</property>
-                                <property name="vexpand">true</property>
                                 <child>
-                                    <object class="AdwViewStack" id="panel_stack">
+                                    <object class="GtkStack" id="content_stack">
+                                        <property name="name">content_stack</property>
                                         <property name="vexpand">true</property>
-                                        <signal name="notify::visible-child" handler="on_stack_switched" swapped="no"/>
+                                        <child>
+                                            <object class="AdwViewStack" id="panel_stack">
+                                                <property name="vexpand">true</property>
+                                                <signal name="notify::visible-child" handler="on_stack_switched" swapped="no"/>
+                                            </object>
+                                        </child>
                                     </object>
                                 </child>
                             </object>
                         </child>
+                        <child>
+                            <object class="AdwViewSwitcherBar">
+                                <property name="stack">panel_stack</property>
+                                <binding name="reveal">
+                                    <lookup name="title-visible">headerbar_panel_switcher</lookup>
+                                </binding>
+                            </object>
+                        </child>
                     </object>
-                </child>
+                </property>
-                <child>
-                    <object class="AdwViewSwitcherBar">
-                        <property name="stack">panel_stack</property>
-                        <binding name="reveal">
-                            <lookup name="title-visible">headerbar_panel_switcher</lookup>
-                        </binding>
-                    </object>
-                </child>
             </object>
         </property>
     </template>

src/application.py

@@ -111,6 +111,7 @@ class Application(Gtk.Application):
 
     def _setup_adw(self):
         Adw.HeaderBar()
+        Adw.ToolbarView()
         Adw.ViewSwitcherTitle()
         Adw.ViewSwitcherBar()
         Adw.ViewStackPage()

src/playlistpanel.py

@@ -29,13 +29,12 @@ class PlaylistPanel(Adw.Bin):
         'remove-multiple-albums': (GObject.SIGNAL_RUN_FIRST, None, (GObject.TYPE_PYOBJECT,)),
         'play': (GObject.SIGNAL_RUN_FIRST, None, (GObject.TYPE_PYOBJECT,)),
         'albumart': (GObject.SIGNAL_RUN_FIRST, None, (str,)),
-
-        'select': (GObject.SIGNAL_RUN_FIRST, None, (bool,)),
-        'clear-playlist': (GObject.SIGNAL_RUN_FIRST, None, ())
     }
 
 
     # Widgets
+    playlist_stack = Gtk.Template.Child()
+    panel_normal = Gtk.Template.Child()
     panel_standalone = Gtk.Template.Child()
     actionbar_revealer = Gtk.Template.Child()
     # Toolbar
@@ -69,17 +68,15 @@ class PlaylistPanel(Adw.Bin):
         self._is_selected = False
 
         # Widgets
-        # FIXME Toolbar signals
-        #self._toolbar.connect('select', self.on_toolbar_select)
-        #self._toolbar.connect('clear-playlist', self.on_toolbar_clear)
         # Header bar
         self._headerbar_standalone = AlbumHeaderbar()
         self._headerbar_standalone.connect('close', self.on_headerbar_close_clicked)
         # Playlist Grid: Model
         self._playlist_grid_model = Gio.ListStore()
-        self._playlist_grid_selection = Gtk.MultiSelection.new(self._playlist_grid_model)
+        self._playlist_grid_selection_multi = Gtk.MultiSelection.new(self._playlist_grid_model)
+        self._playlist_grid_selection_single = Gtk.SingleSelection.new(self._playlist_grid_model)
         # Playlist Grid
-        self.playlist_grid.set_model(self._playlist_grid_selection)
+        self.playlist_grid.set_model(self._playlist_grid_selection_single)
 
 
     def get_headerbar_standalone(self):
@@ -94,32 +91,23 @@ class PlaylistPanel(Adw.Bin):
         self._is_selected = selected
 
 
-    def on_toolbar_select(self, widget, active):
+    @Gtk.Template.Callback()
-        if active:
+    def on_select_toggled(self, widget):
+        if self.select_button.get_active():
             self.actionbar_revealer.set_reveal_child(True)
-            self.playlist_grid.set_selection_mode(Gtk.SelectionMode.MULTIPLE)
+            self.playlist_grid.set_model(self._playlist_grid_selection_multi)
+            self.playlist_grid.set_single_click_activate(False)
             self.playlist_grid.get_style_context().add_class(Utils.CSS_SELECTION)
         else:
             self.actionbar_revealer.set_reveal_child(False)
-            self.playlist_grid.set_selection_mode(Gtk.SelectionMode.SINGLE)
+            self.playlist_grid.set_model(self._playlist_grid_selection_single)
+            self.playlist_grid.set_single_click_activate(True)
             self.playlist_grid.get_style_context().remove_class(Utils.CSS_SELECTION)
 
 
-    def on_toolbar_clear(self, widget):
+    @Gtk.Template.Callback()
-        self.emit('clear-playlist')
-
-
-    # FIXME on_select_toggled()
-    #@Gtk.Template.Callback()
-    def on_select_toggled(self, widget):
-        self.emit('select', widget.get_active())
-
-
-    # FIXME on_clear_clicked()
-    #@Gtk.Template.Callback()
     def on_clear_clicked(self, widget):
-        if widget is self.playlist_clear_button:
+        self.emit('clear-playlist')
-            self.emit('clear-playlist')
 
 
     @Gtk.Template.Callback()
@@ -131,9 +119,8 @@ class PlaylistPanel(Adw.Bin):
         self._selected_albums = [album]
         self.emit('albumart', id)
 
-        # FIXME Show standalone album
+        # Show standalone album
-        return
+        if widget.get_model() == self._playlist_grid_selection_single:
-        if widget.get_selection_mode() == Gtk.SelectionMode.SINGLE:
             # Set labels
             self._headerbar_standalone.set_album(album)
 
@@ -145,46 +132,30 @@ class PlaylistPanel(Adw.Bin):
             self.standalone_spinner.start()
 
 
-    # FIXME on_playlist_grid_selection_changed()
+    @Gtk.Template.Callback()
-    #@Gtk.Template.Callback()
-    def on_playlist_grid_selection_changed(self, widget):
-        self._selected_albums = []
-        for path in widget.get_selected_items():
-            iter = self._playlist_grid_model.get_iter(path)
-            hash = self._playlist_grid_model.get_value(iter, 2)
-            self._selected_albums.append(self._playlist_albums[hash])
-
-
-    #@Gtk.Template.Callback()
     def on_selection_cancel_clicked(self, widget):
         self.select_button.set_active(False)
 
 
-    #@Gtk.Template.Callback()
+    @Gtk.Template.Callback()
     def on_selection_remove_clicked(self, widget):
-        self.emit('remove-multiple-albums', self._selected_albums)
+        self.emit('remove-multiple-albums', self._get_selected_albums())
         self.select_button.set_active(False)
 
 
-    # FIXME on_standalone_scroll_size_allocate()
-    #@Gtk.Template.Callback()
-    def on_standalone_scroll_size_allocate(self, widget, allocation):
-        self._resize_standalone_image()
-
-
     def on_headerbar_close_clicked(self, widget):
         self._close_standalone()
 
 
-    #@Gtk.Template.Callback()
+    @Gtk.Template.Callback()
     def on_standalone_remove_clicked(self, widget):
-        self.emit('remove-album', self._selected_albums[0])
+        self.emit('remove-album', self._get_selected_albums()[0])
         self._close_standalone()
 
 
-    #@Gtk.Template.Callback()
+    @Gtk.Template.Callback()
     def on_standalone_play_clicked(self, widget):
-        self.emit('play', self._selected_albums[0])
+        self.emit('play', self._get_selected_albums()[0])
         self._close_standalone()
 
 
@@ -240,8 +211,6 @@ class PlaylistPanel(Adw.Bin):
         for album in playlist:
             self._playlist_albums[album.get_id()] = album
         self._playlist_grid_model.remove_all()
-        # FIXME Set item padding dynamically?
-        #GObject.idle_add(self.playlist_grid.set_item_padding, size / 100)
 
         cache = client.MCGCache(host, size)
         for album in playlist:
@@ -270,7 +239,7 @@ class PlaylistPanel(Adw.Bin):
                 self._playlist_lock.release()
                 return
 
-        self.playlist_grid.set_model(self._playlist_grid_selection)
+        self.playlist_grid.set_model(self._playlist_grid_selection_single)
         self._playlist_lock.release()
 
 
@@ -286,12 +255,12 @@ class PlaylistPanel(Adw.Bin):
 
 
     def _open_standalone(self):
-        self.set_visible_child(self.panel_standalone)
+        self.playlist_stack.set_visible_child(self.panel_standalone)
         self.emit('open-standalone')
 
 
     def _close_standalone(self):
-        self.set_visible_child(self.get_children()[0])
+        self.playlist_stack.set_visible_child(self.panel_normal)
         self.emit('close-standalone')
 
 
@@ -317,7 +286,6 @@ class PlaylistPanel(Adw.Bin):
         if width <= 0 or height <= 0:
             return
         # Pixelpuffer auf Oberfläche zeichnen
-        self.standalone_image.set_allocation(self.standalone_scroll.get_allocation())
         self.standalone_image.set_from_pixbuf(pixbuf.scale_simple(width, height, GdkPixbuf.InterpType.HYPER))
         self.standalone_image.show()
 
@@ -331,3 +299,11 @@ class PlaylistPanel(Adw.Bin):
             Gtk.TextDirection.LTR,
             Gtk.IconLookupFlags.FORCE_SYMBOLIC
         )
+
+
+    def _get_selected_albums(self):
+        albums = []
+        for i in range(self.playlist_grid.get_model().get_n_items()):
+            if self.playlist_grid.get_model().is_selected(i):
+                albums.append(self.playlist_grid.get_model().get_item(i).get_album())
+        return albums

src/window.py

@@ -59,6 +59,7 @@ class Window(Adw.ApplicationWindow):
     _CUSTOM_STARTUP_COMPLETE = 'startup-complete'
 
     # Widgets
+    toolbar_view = Gtk.Template.Child()
     content_stack = Gtk.Template.Child()
     panel_stack = Gtk.Template.Child()
     toolbar_stack = Gtk.Template.Child()
@@ -99,8 +100,8 @@ class Window(Adw.ApplicationWindow):
         self._panels.append(self._cover_panel)
         # Playlist panel
         self._playlist_panel = PlaylistPanel(self._mcg)
-        #self._playlist_panel.connect('open-standalone', self.on_panel_open_standalone)
+        self._playlist_panel.connect('open-standalone', self.on_panel_open_standalone)
-        #self._playlist_panel.connect('close-standalone', self.on_panel_close_standalone)
+        self._playlist_panel.connect('close-standalone', self.on_panel_close_standalone)
         self._panels.append(self._playlist_panel)
         # Library panel
         self._library_panel = LibraryPanel(self._mcg)
@@ -298,12 +299,15 @@ class Window(Adw.ApplicationWindow):
         #    False
         #)
 
+
     def on_panel_open_standalone(self, panel):
-        self.set_titlebar(panel.get_headerbar_standalone())
+        self.toolbar_view.add_top_bar(panel.get_headerbar_standalone())
+        self.toolbar_view.remove(self.headerbar)
 
 
-    def on_panel_close_standalone(self, headerbar):
+    def on_panel_close_standalone(self, panel):
-        self.set_titlebar(self.headerbar)
+        self.toolbar_view.add_top_bar(self.headerbar)
+        self.toolbar_view.remove(panel.get_headerbar_standalone())
 
     def on_connection_panel_connection_changed(self, widget, host, port, password):
         self._settings.set_string(Window.SETTING_HOST, host)