[gnome-music/wip/jfelder/new-album-design-v3: 1/7] albumwidget: Display album info above the list of songs

[Jean Felder <jfelder src gnome org>]

commit 7d857a11030fc2dc67ced21bc9b2b436ab8f9171
Author: Jean Felder <jfelder src gnome org>
Date:   Thu Jul 29 17:52:35 2021 +0200

    albumwidget: Display album info above the list of songs
    
    Closes: https://gitlab.gnome.org/GNOME/gnome-music/-/issues/13

 data/ui/AlbumWidget.ui            | 340 +++++++++++++++++++-------------------
 gnomemusic/widgets/albumwidget.py |   2 +-
 2 files changed, 169 insertions(+), 173 deletions(-)
---
diff --git a/data/ui/AlbumWidget.ui b/data/ui/AlbumWidget.ui
index cf1a153fc..98f6234ed 100644
--- a/data/ui/AlbumWidget.ui
+++ b/data/ui/AlbumWidget.ui
@@ -2,202 +2,198 @@
 <!-- Generated with glade 3.20.0 -->
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <template class="AlbumWidget" parent="GtkBox">
+  <template class="AlbumWidget" parent="GtkScrolledWindow">
     <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="hexpand">True</property>
+    <property name="vexpand">True</property>
+    <property name="hscrollbar_policy">never</property>
     <style>
       <class name="view"/>
     </style>
-    <property name="can_focus">False</property>
     <child>
-      <object class="GtkBox" id="albumInfo">
+      <object class="GtkViewport" id="_viewport">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="margin-bottom">32</property>
-        <property name="margin-end">32</property>
-        <property name="margin-start">32</property>
-        <property name="margin-top">48</property>
-        <property name="vexpand">True</property>
+        <property name="halign">fill</property>
         <property name="hexpand">True</property>
         <child>
-          <object class="GtkBox" id="albumDetails">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">center</property>
-            <property name="valign">start</property>
+          <object class="GtkBox">
             <property name="orientation">vertical</property>
-            <property name="spacing">18</property>
-            <child>
-              <object class="ArtStack" id="_art_stack">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">start</property>
-                <property name="margin-end">1</property>
-                <property name="margin-start">1</property>
-                <property name="hhomogeneous">False</property>
-                <property name="vhomogeneous">False</property>
-              </object>
-            </child>
+            <property name="visible">True</property>
+            <property name="margin-bottom">48</property>
+            <property name="margin-end">32</property>
+            <property name="margin-start">32</property>
+            <property name="margin-top">48</property>
             <child>
-              <object class="GtkBox" id="artistBox">
+              <object class="GtkBox" id="albumInfo">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">start</property>
-                <property name="orientation">vertical</property>
-                <property name="spacing">3</property>
-                <child>
-                  <object class="GtkLabel" id="_title_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="justify">center</property>
-                    <property name="ellipsize">middle</property>
-                    <style>
-                      <class name="title-artist"/>
-                    </style>
-                  </object>
-                </child>
+                <property name="halign">fill</property>
+                <property name="hexpand">True</property>
                 <child>
-                  <object class="GtkLabel" id="_artist_label">
+                  <object class="GtkBox" id="albumDetails">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="halign">center</property>
-                    <property name="justify">center</property>
-                    <property name="ellipsize">middle</property>
-                    <style>
-                      <class name="title-artist"/>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                </child>
-              </object>
-            </child>
-            <child>
-              <object class="GtkGrid" id="grid">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin-top">21</property>
-                <property name="column_spacing">32</property>
-                <property name="column_homogeneous">True</property>
-                <child>
-                  <object class="GtkLabel" id="released_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">end</property>
-                    <property name="margin-bottom">2</property>
-                    <property name="margin-top">2</property>
-                    <property name="label" translatable="yes">Released</property>
-                    <property name="use_markup">True</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="running_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">end</property>
-                    <property name="label" translatable="yes">Running Length</property>
-                    <property name="use_markup">True</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
+                    <property name="valign">start</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">18</property>
+                    <child>
+                      <object class="ArtStack" id="_art_stack">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">center</property>
+                        <property name="valign">start</property>
+                        <property name="margin-end">1</property>
+                        <property name="margin-start">1</property>
+                        <property name="hhomogeneous">False</property>
+                        <property name="vhomogeneous">False</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkBox" id="artistBox">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="halign">center</property>
+                        <property name="valign">start</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">3</property>
+                        <child>
+                          <object class="GtkLabel" id="_title_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">center</property>
+                            <property name="justify">center</property>
+                            <property name="ellipsize">middle</property>
+                            <style>
+                              <class name="title-artist"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="_artist_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">center</property>
+                            <property name="justify">center</property>
+                            <property name="ellipsize">middle</property>
+                            <style>
+                              <class name="title-artist"/>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkGrid" id="grid">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="margin-top">21</property>
+                        <property name="column_spacing">32</property>
+                        <property name="column_homogeneous">True</property>
+                        <child>
+                          <object class="GtkLabel" id="released_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">end</property>
+                            <property name="margin-bottom">2</property>
+                            <property name="margin-top">2</property>
+                            <property name="label" translatable="yes">Released</property>
+                            <property name="use_markup">True</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                          <packing>
+                            <property name="left_attach">0</property>
+                            <property name="top_attach">0</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="running_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">end</property>
+                            <property name="label" translatable="yes">Running Length</property>
+                            <property name="use_markup">True</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                          <packing>
+                            <property name="left_attach">0</property>
+                            <property name="top_attach">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="_released_info_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">start</property>
+                            <property name="margin-bottom">2</property>
+                            <property name="margin-top">2</property>
+                            <property name="label">----</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">1</property>
+                            <property name="top_attach">0</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="_running_info_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">start</property>
+                            <property name="label">--:--</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">1</property>
+                            <property name="top_attach">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="_composer_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">end</property>
+                            <property name="margin-bottom">2</property>
+                            <property name="margin-top">2</property>
+                            <property name="label" translatable="yes">Composer</property>
+                            <property name="use_markup">True</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                          <packing>
+                            <property name="left_attach">0</property>
+                            <property name="top_attach">2</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="_composer_info_label">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">start</property>
+                            <property name="margin-bottom">2</property>
+                            <property name="margin-top">2</property>
+                            <property name="ellipsize">end</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">1</property>
+                            <property name="top_attach">2</property>
+                          </packing>
+                        </child>
+                      </object>
+                    </child>
                   </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="_released_info_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">start</property>
-                    <property name="margin-bottom">2</property>
-                    <property name="margin-top">2</property>
-                    <property name="label">----</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">1</property>
-                    <property name="top_attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="_running_info_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">start</property>
-                    <property name="label">--:--</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">1</property>
-                    <property name="top_attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="_composer_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">end</property>
-                    <property name="margin-bottom">2</property>
-                    <property name="margin-top">2</property>
-                    <property name="label" translatable="yes">Composer</property>
-                    <property name="use_markup">True</property>
-                    <style>
-                      <class name="dim-label"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">2</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="_composer_info_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">start</property>
-                    <property name="margin-bottom">2</property>
-                    <property name="margin-top">2</property>
-                    <property name="ellipsize">end</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">1</property>
-                    <property name="top_attach">2</property>
-                  </packing>
                 </child>
               </object>
             </child>
-          </object>
-        </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkScrolledWindow" id="scrolledWindow">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="hexpand">True</property>
-        <property name="vexpand">True</property>
-        <property name="hscrollbar_policy">never</property>
-        <child>
-          <object class="GtkViewport" id="_viewport">
-            <property name="width_request">600</property>
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">start</property>
-            <property name="hexpand">True</property>
             <child>
               <object class="DiscListBox" id="_disc_list_box">
                 <property name="can_focus">False</property>
-                <property name="margin-bottom">48</property>
-                <property name="margin-end">32</property>
                 <property name="margin-top">48</property>
                 <property name="selection_mode">0</property>
                 <property name="visible">True</property>
diff --git a/gnomemusic/widgets/albumwidget.py b/gnomemusic/widgets/albumwidget.py
index 65f982eba..be22dad67 100644
--- a/gnomemusic/widgets/albumwidget.py
+++ b/gnomemusic/widgets/albumwidget.py
@@ -40,7 +40,7 @@ if typing.TYPE_CHECKING:
 
 
 @Gtk.Template(resource_path='/org/gnome/Music/ui/AlbumWidget.ui')
-class AlbumWidget(Gtk.Box):
+class AlbumWidget(Gtk.ScrolledWindow):
     """Album widget.
 
     The album widget consists of an image with the album art