From e8d8ce434ac4543884a98fd9e73d8ea9ee80f4b7 Mon Sep 17 00:00:00 2001
From: Matthias Meulien <orontee@gmail.com>
Date: Sat, 25 May 2024 12:59:15 +0200
Subject: [PATCH] Moved album and artist information from popover to left panel

Refs: #170
---
 NEWS.rst                         |   3 +
 argos/ui/album_details_box.ui    | 372 +++++++++++++++++--------------
 argos/widgets/albumdetailsbox.py |  62 ++++--
 3 files changed, 249 insertions(+), 188 deletions(-)

diff --git a/NEWS.rst b/NEWS.rst
index 62be17b..b0baba0 100644
--- a/NEWS.rst
+++ b/NEWS.rst
@@ -20,6 +20,9 @@ Added
 Changed
 -------
 
+- Moved album and artist information from popover to the left panel
+  `#170 <https://github.com/orontee/argos/issues/170>`_
+
 - Improved speed of library filter `#166
   <https://github.com/orontee/argos/issues/166>`_
 
diff --git a/argos/ui/album_details_box.ui b/argos/ui/album_details_box.ui
index 0a9710c..ab5b04a 100644
--- a/argos/ui/album_details_box.ui
+++ b/argos/ui/album_details_box.ui
@@ -1,222 +1,254 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.38.2 -->
+<!-- Generated with glade 3.40.0 -->
 <interface>
   <requires lib="gtk+" version="3.24"/>
-  <object class="GtkPopover" id="information_popover">
+  <object class="GtkImage" id="play_image">
+    <property name="visible">True</property>
+    <property name="can-focus">False</property>
+    <property name="icon-name">media-playback-start-symbolic</property>
+  </object>
+  <template class="AlbumDetailsBox" parent="GtkBox">
+    <property name="visible">True</property>
     <property name="can-focus">False</property>
-    <property name="vexpand">False</property>
-    <property name="position">right</property>
+    <property name="spacing">5</property>
+    <property name="homogeneous">True</property>
     <child>
-      <object class="GtkBox" id="information_box">
+      <object class="GtkBox" id="left_pane">
+        <property name="name">album-details-left-pane</property>
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="margin-start">5</property>
-        <property name="margin-end">5</property>
-        <property name="margin-top">5</property>
-        <property name="margin-bottom">5</property>
+        <property name="vexpand">True</property>
         <property name="orientation">vertical</property>
         <property name="spacing">5</property>
         <child>
-          <object class="GtkStackSwitcher" id="information_stack_switcher">
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="halign">center</property>
-            <property name="hexpand">False</property>
-            <property name="homogeneous">True</property>
-            <property name="stack">information_stack</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkStack" id="information_stack">
+          <object class="GtkStack" id="album_details_stack">
             <property name="visible">True</property>
             <property name="can-focus">False</property>
             <property name="vexpand">True</property>
-            <property name="transition-type">crossfade</property>
             <child>
-              <object class="GtkScrolledWindow" id="album_information_scrolled_window">
+              <object class="GtkBox" id="album_image_box">
                 <property name="visible">True</property>
-                <property name="can-focus">True</property>
-                <property name="min-content-width">150</property>
-                <property name="min-content-height">150</property>
-                <property name="max-content-width">200</property>
-                <property name="max-content-height">250</property>
-                <property name="propagate-natural-height">True</property>
+                <property name="can-focus">False</property>
+                <property name="valign">center</property>
+                <property name="vexpand">True</property>
+                <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkViewport" id="album_information_viewport">
+                  <object class="GtkImage" id="album_image">
+                    <property name="width-request">200</property>
+                    <property name="height-request">200</property>
                     <property name="visible">True</property>
                     <property name="can-focus">False</property>
-                    <property name="shadow-type">none</property>
+                    <property name="halign">center</property>
+                    <property name="valign">end</property>
+                    <property name="vexpand">False</property>
+                    <property name="stock">gtk-missing-image</property>
+                    <property name="icon_size">6</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
+                <child>
+                  <!-- n-columns=2 n-rows=3 -->
+                  <object class="GtkGrid" id="album_details_box">
+                    <property name="name">album-details-box</property>
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">start</property>
+                    <property name="margin-top">5</property>
+                    <property name="hexpand">True</property>
+                    <property name="vexpand">False</property>
+                    <child>
+                      <object class="GtkLabel" id="album_name_label">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="margin-top">5</property>
+                        <property name="margin-bottom">5</property>
+                        <property name="ellipsize">end</property>
+                        <property name="single-line-mode">True</property>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">0</property>
+                        <property name="width">2</property>
+                      </packing>
+                    </child>
                     <child>
-                      <object class="GtkLabel" id="album_information_label">
+                      <object class="GtkLabel" id="artist_name_label">
                         <property name="visible">True</property>
                         <property name="can-focus">False</property>
-                        <property name="valign">start</property>
-                        <property name="wrap">True</property>
+                        <property name="margin-bottom">5</property>
+                        <property name="ellipsize">end</property>
+                        <property name="single-line-mode">True</property>
                       </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">1</property>
+                        <property name="width">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="publication_title_label">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="halign">end</property>
+                        <property name="margin-right">5</property>
+                        <property name="margin-end">5</property>
+                        <property name="label" translatable="yes">Published</property>
+                        <attributes>
+                          <attribute name="weight" value="semilight"/>
+                        </attributes>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="publication_label">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="halign">start</property>
+                        <property name="margin-left">5</property>
+                        <property name="margin-start">5</property>
+                      </object>
+                      <packing>
+                        <property name="left-attach">1</property>
+                        <property name="top-attach">2</property>
+                      </packing>
                     </child>
                   </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
                 </child>
               </object>
               <packing>
-                <property name="name">album_information_page</property>
-                <property name="title" translatable="yes">Album</property>
+                <property name="name">album_image_page</property>
+                <property name="title" translatable="yes">Album image</property>
               </packing>
             </child>
             <child>
-              <object class="GtkScrolledWindow" id="artist_information_scrolled_window">
+              <object class="GtkBox" id="information_box">
                 <property name="visible">True</property>
-                <property name="can-focus">True</property>
-                <property name="max-content-width">200</property>
-                <property name="max-content-height">250</property>
-                <property name="propagate-natural-height">True</property>
+                <property name="can-focus">False</property>
+                <property name="margin-left">5</property>
+                <property name="margin-right">5</property>
+                <property name="margin-start">5</property>
+                <property name="margin-end">5</property>
+                <property name="margin-top">5</property>
+                <property name="margin-bottom">5</property>
+                <property name="vexpand">True</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">5</property>
+                <child>
+                  <object class="GtkStackSwitcher" id="information_stack_switcher">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="halign">center</property>
+                    <property name="valign">start</property>
+                    <property name="hexpand">False</property>
+                    <property name="vexpand">False</property>
+                    <property name="homogeneous">True</property>
+                    <property name="stack">information_stack</property>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">0</property>
+                  </packing>
+                </child>
                 <child>
-                  <object class="GtkViewport" id="artist_information_viewport">
+                  <object class="GtkStack" id="information_stack">
                     <property name="visible">True</property>
                     <property name="can-focus">False</property>
-                    <property name="shadow-type">none</property>
+                    <property name="vexpand">True</property>
+                    <property name="vhomogeneous">False</property>
+                    <property name="transition-type">crossfade</property>
                     <child>
-                      <object class="GtkLabel" id="artist_information_label">
+                      <object class="GtkScrolledWindow" id="artist_information_scrolled_window">
                         <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="valign">start</property>
-                        <property name="wrap">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="vexpand">True</property>
+                        <child>
+                          <object class="GtkViewport" id="artist_information_viewport">
+                            <property name="visible">True</property>
+                            <property name="can-focus">False</property>
+                            <property name="vexpand">True</property>
+                            <property name="shadow-type">none</property>
+                            <child>
+                              <object class="GtkLabel" id="artist_information_label">
+                                <property name="visible">True</property>
+                                <property name="can-focus">False</property>
+                                <property name="valign">start</property>
+                                <property name="vexpand">True</property>
+                                <property name="wrap">True</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="name">artist_information_page</property>
+                        <property name="title" translatable="yes">Artist</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkScrolledWindow" id="album_information_scrolled_window">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="vexpand">True</property>
+                        <child>
+                          <object class="GtkViewport" id="album_information_viewport">
+                            <property name="visible">True</property>
+                            <property name="can-focus">False</property>
+                            <property name="vexpand">True</property>
+                            <property name="shadow-type">none</property>
+                            <child>
+                              <object class="GtkLabel" id="album_information_label">
+                                <property name="visible">True</property>
+                                <property name="can-focus">False</property>
+                                <property name="valign">start</property>
+                                <property name="vexpand">True</property>
+                                <property name="wrap">True</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
                       </object>
+                      <packing>
+                        <property name="name">album_information_page</property>
+                        <property name="title" translatable="yes">Album</property>
+                        <property name="position">1</property>
+                      </packing>
                     </child>
                   </object>
+                  <packing>
+                    <property name="expand">True</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
                 </child>
               </object>
               <packing>
-                <property name="name">artist_information_page</property>
-                <property name="title" translatable="yes">Artist</property>
+                <property name="name">information_page</property>
+                <property name="title" translatable="yes">Information</property>
                 <property name="position">1</property>
               </packing>
             </child>
           </object>
           <packing>
-            <property name="expand">False</property>
+            <property name="expand">True</property>
             <property name="fill">True</property>
             <property name="position">1</property>
           </packing>
         </child>
       </object>
-    </child>
-  </object>
-  <object class="GtkImage" id="play_image">
-    <property name="visible">True</property>
-    <property name="can-focus">False</property>
-    <property name="icon-name">media-playback-start-symbolic</property>
-  </object>
-  <template class="AlbumDetailsBox" parent="GtkBox">
-    <property name="visible">True</property>
-    <property name="can-focus">False</property>
-    <property name="spacing">5</property>
-    <property name="homogeneous">True</property>
-    <child>
-      <object class="GtkBox" id="left_pane">
-        <property name="name">album-details-left-pane</property>
-        <property name="visible">True</property>
-        <property name="can-focus">False</property>
-        <property name="valign">center</property>
-        <property name="orientation">vertical</property>
-        <property name="spacing">5</property>
-        <child>
-          <object class="GtkImage" id="album_image">
-            <property name="width-request">200</property>
-            <property name="height-request">200</property>
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="vexpand">True</property>
-            <property name="stock">gtk-missing-image</property>
-            <property name="icon_size">6</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">False</property>
-            <property name="position">1</property>
-          </packing>
-        </child>
-        <child>
-          <!-- n-columns=2 n-rows=3 -->
-          <object class="GtkGrid" id="album_details_box">
-            <property name="name">album-details-box</property>
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="margin-top">5</property>
-            <property name="hexpand">True</property>
-            <child>
-              <object class="GtkLabel" id="album_name_label">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin-top">5</property>
-                <property name="margin-bottom">5</property>
-                <property name="ellipsize">end</property>
-                <property name="single-line-mode">True</property>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">0</property>
-                <property name="width">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="artist_name_label">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin-bottom">5</property>
-                <property name="ellipsize">end</property>
-                <property name="single-line-mode">True</property>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">1</property>
-                <property name="width">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="publication_title_label">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="halign">end</property>
-                <property name="margin-end">5</property>
-                <property name="label" translatable="yes">Published</property>
-                <attributes>
-                  <attribute name="weight" value="semilight"/>
-                </attributes>
-              </object>
-              <packing>
-                <property name="left-attach">0</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="publication_label">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="halign">start</property>
-                <property name="margin-start">5</property>
-              </object>
-              <packing>
-                <property name="left-attach">1</property>
-                <property name="top-attach">2</property>
-              </packing>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">False</property>
-            <property name="position">2</property>
-          </packing>
-        </child>
-      </object>
       <packing>
         <property name="expand">False</property>
         <property name="fill">True</property>
@@ -355,7 +387,7 @@
                     <property name="valign">center</property>
                     <property name="image">play_image</property>
                     <property name="always-show-image">True</property>
-                    <signal name="clicked" handler="on_button_clicked" swapped="no"/>
+                    <signal name="clicked" handler="on_play_button_clicked" swapped="no"/>
                     <style>
                       <class name="pill"/>
                     </style>
@@ -378,7 +410,7 @@
               </packing>
             </child>
             <child>
-              <object class="GtkMenuButton" id="information_button">
+              <object class="GtkToggleButton" id="information_button">
                 <property name="name">album-details-information-button</property>
                 <property name="visible">True</property>
                 <property name="can-focus">True</property>
@@ -387,7 +419,7 @@
                 <property name="tooltip-text" translatable="yes">Information on album</property>
                 <property name="halign">end</property>
                 <property name="valign">center</property>
-                <property name="popover">information_popover</property>
+                <signal name="toggled" handler="on_information_button_toggled" swapped="no"/>
                 <child>
                   <object class="GtkImage" id="information_image">
                     <property name="width-request">20</property>
diff --git a/argos/widgets/albumdetailsbox.py b/argos/widgets/albumdetailsbox.py
index 81ef217..87591ff 100644
--- a/argos/widgets/albumdetailsbox.py
+++ b/argos/widgets/albumdetailsbox.py
@@ -24,6 +24,7 @@
 
 _MISSING_INFO_MSG = _("Information not available")
 _MISSING_INFO_MSG_WITH_MARKUP = f"""<span style="italic">{_MISSING_INFO_MSG}</span>"""
+_INFO_TITLE_WITH_MARKUP = """<span size="x-large" weight="bold">{title}</span>"""
 
 
 @Gtk.Template(resource_path="/io/github/orontee/Argos/ui/album_details_box.ui")
@@ -31,11 +32,9 @@ class AlbumDetailsBox(Gtk.Box):
     """Box gathering details on an album.
 
     The box has horizontal orientation, is homogeneous and has two
-    children boxes: The left pane displays the album image and the
-    album details; The right pane displays the album tracks view and a
-    button box.
-
-    """
+    children boxes: The left pane displays some album details and
+    through a stack the album image or album and artist information;
+    The right pane displays the album tracks view and a button box."""
 
     __gtype_name__ = "AlbumDetailsBox"
 
@@ -46,6 +45,7 @@ class AlbumDetailsBox(Gtk.Box):
     play_button: Gtk.Button = Gtk.Template.Child()
     track_selection_button: Gtk.MenuButton = Gtk.Template.Child()
 
+    album_details_stack: Gtk.Stack = Gtk.Template.Child()
     album_image: Gtk.Image = Gtk.Template.Child()
 
     album_name_label: Gtk.Label = Gtk.Template.Child()
@@ -56,7 +56,8 @@ class AlbumDetailsBox(Gtk.Box):
 
     tracks_box: Gtk.ListBox = Gtk.Template.Child()
 
-    information_button: Gtk.MenuButton = Gtk.Template.Child()
+    information_button: Gtk.ToggleButton = Gtk.Template.Child()
+    information_stack: Gtk.Stack = Gtk.Template.Child()
     album_information_label: Gtk.Label = Gtk.Template.Child()
     album_information_viewport: Gtk.Viewport = Gtk.Template.Child()
     artist_information_label: Gtk.Label = Gtk.Template.Child()
@@ -97,6 +98,7 @@ def __init__(self, application: Gtk.Application):
         self.set_sensitive(self._model.network_available and self._model.connected)
 
         for widget in (
+            self.information_button,
             self.play_button,
             self.track_selection_button,
             self.tracks_box,
@@ -142,7 +144,7 @@ def _on_uri_changed(
             self._update_track_count_label(None)
             self._update_album_image(None)
             self._update_track_view(None)
-            self._update_information_popup(None)
+            self._update_information_box(None)
         else:
             self._update_album_name_label(album.name)
             self._update_artist_name_label(album.artist_name)
@@ -153,7 +155,9 @@ def _on_uri_changed(
                 Path(album.image_path) if album.image_path else None
             )
             self._update_track_view(album)
-            self._update_information_popup(album)
+            self._update_information_box(album)
+
+        self.information_button.set_active(False)
 
         self._app.activate_action(
             "collect-album-information", GLib.Variant("s", self.props.uri)
@@ -182,7 +186,7 @@ def _on_album_information_collected(self, model: Model, uri: str) -> None:
         if album is None:
             return
 
-        self._update_information_popup(album)
+        self._update_information_box(album)
 
     def _update_album_name_label(self, album_name: Optional[str]) -> None:
         if album_name:
@@ -272,30 +276,42 @@ def _update_track_view(self, album: Optional[AlbumModel]) -> None:
 
         self._clear_tracks_box_selection = True
 
-    def _update_information_popup(self, album: Optional[AlbumModel]) -> None:
-        information = album.information if album is not None else None
-        self.album_information_label.set_markup(
-            information.album_abstract
-            if information and information.album_abstract
+    def _update_information_box(self, album: Optional[AlbumModel]) -> None:
+        album_information = (
+            _INFO_TITLE_WITH_MARKUP.format(title=album.name)
+            + "\n\n"
+            + album.information.album_abstract
+            if album is not None
+            and album.information is not None
+            and album.information.album_abstract is not None
             else _MISSING_INFO_MSG_WITH_MARKUP
         )
+        self.album_information_label.set_markup(album_information)
+
         if self.album_information_viewport.props.hadjustment is not None:
             self.album_information_viewport.props.hadjustment.set_value(0)
 
         if self.album_information_viewport.props.vadjustment is not None:
             self.album_information_viewport.props.vadjustment.set_value(0)
 
-        self.artist_information_label.set_markup(
-            information.artist_abstract
-            if information and information.artist_abstract
+        artist_information = (
+            _INFO_TITLE_WITH_MARKUP.format(title=album.artist_name)
+            + "\n\n"
+            + album.information.artist_abstract
+            if album is not None
+            and album.information is not None
+            and album.information.artist_abstract
             else _MISSING_INFO_MSG_WITH_MARKUP
         )
+        self.artist_information_label.set_markup(artist_information)
         if self.artist_information_viewport.props.hadjustment is not None:
             self.artist_information_viewport.props.hadjustment.set_value(0)
 
         if self.artist_information_viewport.props.vadjustment is not None:
             self.artist_information_viewport.props.vadjustment.set_value(0)
 
+        self.information_stack.set_visible_child_name("artist_information_page")
+
     def _create_track_box(self, track: TrackModel, album: AlbumModel) -> Gtk.Widget:
         widget = TrackBox(self._app, album=album, track=track)
         return widget
@@ -334,7 +350,7 @@ def on_information_service_changed(
             )
 
     @Gtk.Template.Callback()
-    def on_button_clicked(self, button: Gtk.Button) -> None:
+    def on_play_button_clicked(self, button: Gtk.Button) -> None:
         if self._app.window is None:
             return
 
@@ -348,6 +364,16 @@ def on_button_clicked(self, button: Gtk.Button) -> None:
             target = GLib.Variant("s", "album-details-box")
             self._app.window.activate_action(action_name, target)
 
+    @Gtk.Template.Callback()
+    def on_information_button_toggled(self, button: Gtk.ToggleButton) -> None:
+        display_information_box = button.get_active()
+        expected_page_name = (
+            "information_page" if display_information_box else "album_image_page"
+        )
+        displayed_page_name = self.album_details_stack.get_visible_child_name()
+        if expected_page_name != displayed_page_name:
+            self.album_details_stack.set_visible_child_name(expected_page_name)
+
     def on_disc_separator_clicked(
         self,
         label: Gtk.Button,