[gnome-music/wip/jfelder/albumwidget-full-scrollarea: 1/4] albumwidget: Widen scroll area



commit b7e51911a10fbc74a843cef1c34b0afe119ae28d
Author: Jean Felder <jfelder src gnome org>
Date:   Tue Jan 8 18:08:05 2019 +0100

    albumwidget: Widen scroll area
    
    The AlbumWidget is made of two boxes: album details on the left and
    the playlist on the right. The scrolled window is only associated with
    the playlist. This allows to have a fixed album details box when a
    scroll operations happens. However, the mouse pointer needs to be
    located inside the list to make a scroll operation.
    
    Move the ScrolledWindow directly below the AlbumWidget to make the
    whole area scrollable. Update album details box's margin each time a
    scroll operation happens to give the impression that this box does not
    move. Finally, compute album details box's minimal height to prevent
    an infinite scrolling.
    
    Closes: #13

 data/ui/AlbumWidget.ui            | 372 +++++++++++++++++++-------------------
 gnomemusic/widgets/albumwidget.py |  24 +++
 2 files changed, 207 insertions(+), 189 deletions(-)
---
diff --git a/data/ui/AlbumWidget.ui b/data/ui/AlbumWidget.ui
index 9dd7253d..9909ac74 100644
--- a/data/ui/AlbumWidget.ui
+++ b/data/ui/AlbumWidget.ui
@@ -9,60 +9,44 @@
       <class name="content-view"/>
     </style>
     <child>
-      <object class="GtkBox">
+      <object class="GtkScrolledWindow" id="_scrolled_window">
         <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="GtkBox" id="albumInfo">
+          <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="margin_start">32</property>
-            <property name="margin_end">32</property>
-            <property name="margin_top">64</property>
-            <property name="margin_bottom">32</property>
-            <property name="vexpand">True</property>
             <child>
-              <object class="GtkBox" id="albumDetails">
+              <object class="GtkBox" id="_album_info">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">center</property>
+                <property name="halign">end</property>
+                <property name="margin_start">32</property>
+                <property name="margin_end">32</property>
+                <property name="margin_top">64</property>
+                <property name="margin_bottom">32</property>
                 <property name="valign">start</property>
-                <property name="orientation">vertical</property>
-                <property name="spacing">18</property>
-                <child>
-                  <object class="CoverStack" id="_cover_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_start">1</property>
-                    <property name="margin_end">1</property>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
+                <property name="vexpand">True</property>
+                <signal name="size-allocate" handler="_on_album_info_size_changed" swapped="no"/>
                 <child>
-                  <object class="GtkBox" id="artistBox">
+                  <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>
                     <property name="orientation">vertical</property>
-                    <property name="spacing">3</property>
+                    <property name="spacing">18</property>
                     <child>
-                      <object class="GtkLabel" id="_title_label">
+                      <object class="CoverStack" id="_cover_stack">
                         <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>
+                        <property name="valign">start</property>
+                        <property name="margin_start">1</property>
+                        <property name="margin_end">1</property>
                       </object>
                       <packing>
                         <property name="expand">False</property>
@@ -71,16 +55,48 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkLabel" id="_artist_label">
+                      <object class="GtkBox" id="artistBox">
                         <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>
+                        <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>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">False</property>
+                            <property name="position">0</property>
+                          </packing>
+                        </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>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">False</property>
+                            <property name="position">1</property>
+                          </packing>
+                        </child>
                       </object>
                       <packing>
                         <property name="expand">False</property>
@@ -88,174 +104,152 @@
                         <property name="position">1</property>
                       </packing>
                     </child>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">1</property>
-                  </packing>
-                </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_top">2</property>
-                        <property name="margin_bottom">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_top">2</property>
-                        <property name="margin_bottom">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="no_show_all">True</property>
-                        <property name="halign">end</property>
-                        <property name="margin_top">2</property>
-                        <property name="margin_bottom">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">
+                      <object class="GtkGrid" id="grid">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="no_show_all">True</property>
-                        <property name="halign">start</property>
-                        <property name="margin_top">2</property>
-                        <property name="margin_bottom">2</property>
-                        <property name="ellipsize">end</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_top">2</property>
+                            <property name="margin_bottom">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_top">2</property>
+                            <property name="margin_bottom">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="no_show_all">True</property>
+                            <property name="halign">end</property>
+                            <property name="margin_top">2</property>
+                            <property name="margin_bottom">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="no_show_all">True</property>
+                            <property name="halign">start</property>
+                            <property name="margin_top">2</property>
+                            <property name="margin_bottom">2</property>
+                            <property name="ellipsize">end</property>
+                          </object>
+                          <packing>
+                            <property name="left_attach">1</property>
+                            <property name="top_attach">2</property>
+                          </packing>
+                        </child>
                       </object>
                       <packing>
-                        <property name="left_attach">1</property>
-                        <property name="top_attach">2</property>
+                        <property name="expand">True</property>
+                        <property name="fill">True</property>
+                        <property name="position">3</property>
                       </packing>
                     </child>
                   </object>
                   <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">True</property>
-                    <property name="position">3</property>
+                    <property name="expand">False</property>
+                    <property name="fill">False</property>
+                    <property name="position">0</property>
                   </packing>
                 </child>
               </object>
               <packing>
-                <property name="expand">False</property>
-                <property name="fill">False</property>
-                <property name="position">0</property>
+                <property name="expand">True</property>
+                <property name="fill">True</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>
-        <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>
+              <!-- TODO: The top of the coverart is the same vertical -->
+              <!-- position as the top of the album songs, however -->
+              <!-- since we set a top margins for the discbox -->
+              <!-- subtract that margin here. A cleaner solution is appreciated. -->
+              <object class="DiscListBox" id="_disc_listbox">
                 <property name="can_focus">False</property>
+                <property name="margin_top">48</property>
+                <property name="margin_bottom">64</property>
+                <property name="margin_end">32</property>
                 <property name="halign">start</property>
-                <property name="hexpand">True</property>
-                <property name="shadow_type">none</property>
-                <child>
-                  <!-- TODO: The top of the coverart is the same vertical -->
-                  <!-- position as the top of the album songs, however -->
-                  <!-- since we set a top margins for the discbox -->
-                  <!-- subtract that margin here. A cleaner solution is appreciated. -->
-                  <object class="DiscListBox" id="_disc_listbox">
-                    <property name="can_focus">False</property>
-                    <property name="margin_top">48</property>
-                    <property name="margin_bottom">64</property>
-                    <property name="margin_end">32</property>
-                    <property name="orientation">vertical</property>
-                    <property name="selection_mode_allowed">True</property>
-                    <property name="visible">True</property>
-                    <signal name="selection-changed" handler="_on_selection_changed" swapped="no"/>
-                  </object>
-                </child>
+                <property name="orientation">vertical</property>
+                <property name="selection_mode_allowed">True</property>
+                <property name="visible">True</property>
+                <property name="width_request">600</property>
+                <signal name="selection-changed" handler="_on_selection_changed" swapped="no"/>
               </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/gnomemusic/widgets/albumwidget.py b/gnomemusic/widgets/albumwidget.py
index ecdc2c93..1a0f66ab 100644
--- a/gnomemusic/widgets/albumwidget.py
+++ b/gnomemusic/widgets/albumwidget.py
@@ -45,6 +45,7 @@ class AlbumWidget(Gtk.EventBox):
 
     __gtype_name__ = 'AlbumWidget'
 
+    _album_info = Gtk.Template.Child()
     _artist_label = Gtk.Template.Child()
     _composer_label = Gtk.Template.Child()
     _composer_info_label = Gtk.Template.Child()
@@ -52,6 +53,7 @@ class AlbumWidget(Gtk.EventBox):
     _disc_listbox = Gtk.Template.Child()
     _released_info_label = Gtk.Template.Child()
     _running_info_label = Gtk.Template.Child()
+    _scrolled_window = Gtk.Template.Child()
     _title_label = Gtk.Template.Child()
 
     selected_items_count = GObject.Property(type=int, default=0, minimum=0)
@@ -72,6 +74,8 @@ class AlbumWidget(Gtk.EventBox):
         super().__init__()
 
         self._songs = []
+        self._initial_margin_top = self._album_info.props.margin_top
+        self._album_info_height = 0
 
         self._cover_stack.props.size = Art.Size.LARGE
         self._parent_view = parent_view
@@ -93,6 +97,9 @@ class AlbumWidget(Gtk.EventBox):
         self.bind_property(
             'selected-items-count', self._parent_view, 'selected-items-count')
 
+        self._scrolled_window.props.vadjustment.connect(
+            "value-changed", self._on_scroll_value_changed)
+
     @log
     def _create_model(self):
         """Create the ListStore model for this widget."""
@@ -143,6 +150,8 @@ class AlbumWidget(Gtk.EventBox):
 
         self._set_composer_label(album)
 
+        self._album_info.props.margin_top = self._initial_margin_top
+
         self._player.connect('song-changed', self._update_model)
 
         grilo.populate_album_songs(album, self.add_item)
@@ -280,3 +289,18 @@ class AlbumWidget(Gtk.EventBox):
         :rtype: list
         """
         return self._disc_listbox.get_selected_items()
+
+    @log
+    def _on_scroll_value_changed(self, adjustment):
+        self._album_info.props.margin_top = (adjustment.props.value
+                                             + self._initial_margin_top)
+
+    @Gtk.Template.Callback()
+    @log
+    def _on_album_info_size_changed(self, widget, allocation):
+        if allocation.height != self._album_info_height:
+            self._album_info_height = allocation.height
+            min_height = (allocation.height
+                          + self._initial_margin_top
+                          + self._album_info.props.margin_bottom)
+            self._scrolled_window.props.min_content_height = min_height


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]