WIP

sublime_music/ui/albums.py

@@ -18,6 +18,9 @@ from ..ui import util
 from ..ui.common import AlbumWithSongs, IconButton, LoadError, SpinnerImage, Sizer
 
 
+COVER_ART_WIDTH = 150
+
+
 def _to_type(query_type: AlbumSearchQuery.Type) -> str:
     return {
         AlbumSearchQuery.Type.RANDOM: "random",
@@ -442,24 +445,27 @@ class AlbumsPanel(Handy.Leaflet):
             label=text,
             tooltip_text=text,
             ellipsize=Pango.EllipsizeMode.END,
-            max_width_chars=22,
+            single_line_mode=True,
             halign=Gtk.Align.START,
         )
 
     def _create_cover_art_widget(self, album) -> Gtk.Box:
-        widget_box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+        sizer = Sizer(natural_width=COVER_ART_WIDTH)
+
+        widget_box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, width_request=COVER_ART_WIDTH)
 
         # Cover art image
         artwork = SpinnerImage(
             loading=False,
             image_name="grid-artwork",
             spinner_name="grid-artwork-spinner",
-            image_size=200,
+            image_size=COVER_ART_WIDTH,
         )
-        widget_box.pack_start(artwork, False, False, 0)
+        widget_box.pack_start(artwork, True, False, 0)
 
         # Header for the widget
         header_label = self._make_label(album.name, "grid-header-label")
+        header_label.set_size_request(COVER_ART_WIDTH, -1)
         widget_box.pack_start(header_label, False, False, 0)
 
         # Extra info for the widget
@@ -468,6 +474,7 @@ class AlbumsPanel(Handy.Leaflet):
         )
         if info_text:
             info_label = self._make_label(info_text, "grid-info-label")
+            info_label.set_size_request(COVER_ART_WIDTH, -1)
             widget_box.pack_start(info_label, False, False, 0)
 
         # Download the cover art.
@@ -486,8 +493,10 @@ class AlbumsPanel(Handy.Leaflet):
                 lambda f: GLib.idle_add(on_artwork_downloaded, f)
             )
 
-        widget_box.show_all()
-        return widget_box
+        sizer.add(widget_box)
+
+        sizer.show_all()
+        return sizer
 
     def _get_opposite_sort_dir(self, sort_dir: str) -> str:
         return ("ascending", "descending")[0 if sort_dir == "descending" else 1]
@@ -1003,7 +1012,7 @@ class AlbumsGrid(Gtk.Overlay):
             loading=False,
             image_name="grid-artwork",
             spinner_name="grid-artwork-spinner",
-            image_size=200,
+            image_size=150,
         )
         widget_box.pack_start(artwork, False, False, 0)
 

sublime_music/ui/app_styles.css

@@ -277,34 +277,12 @@ entry.invalid {
 }
 
 /* ********** Artists & Albums ********** */
-#grid-artwork-spinner, #album-list-song-list-spinner {
-  min-height: 35px;
-  min-width: 35px;
-}
-
-#grid-artwork {
-  min-height: 200px;
-  min-width: 200px;
-  margin: 10px;
-}
-
-#grid-spinner {
-  min-height: 50px;
-  min-width: 50px;
-  margin: 20px;
-}
-
 #grid-header-label {
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-bottom: 3px;
+  margin-top: 5px;
   font-weight: bold;
 }
 
 #grid-info-label {
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
 }
 
 #artist-album-artwork {

sublime_music/ui/main.py

@@ -93,7 +93,12 @@ class MainWindow(Handy.ApplicationWindow):
         self.titlebar = self._create_headerbar(self.stack)
         box.add(self.titlebar)
 
-        drawer = Handy.Flap(orientation=Gtk.Orientation.VERTICAL, fold_policy=Handy.FlapFoldPolicy.ALWAYS, flap_position=Gtk.PackType.END, modal=False)
+        drawer = Handy.Flap(
+            orientation=Gtk.Orientation.VERTICAL,
+            fold_policy=Handy.FlapFoldPolicy.ALWAYS,
+            flap_position=Gtk.PackType.END,
+            transition_type=Handy.FlapTransitionType.SLIDE,
+            modal=False)
         notification_container = Gtk.Overlay()
 
         notification_container.add(self.stack)

sublime_music/ui/player_controls/mobile.py

@@ -132,9 +132,10 @@ class MobileHandle(Gtk.ActionBar):
         self.cover_art.set_loading(loading)
 
 
-class MobileFlap(Handy.Flap):
+class MobileFlap(Gtk.Stack):
     def __init__(self, state):
-        super().__init__(orientation=Gtk.Orientation.VERTICAL, fold_policy=Handy.FlapFoldPolicy.ALWAYS, vexpand=True, swipe_to_open=False)
+        super().__init__(
+            transition_type=Gtk.StackTransitionType.OVER_DOWN_UP, vexpand=True)
 
         self.state = state
         self.state.add_control(self)
@@ -244,7 +245,7 @@ class MobileFlap(Handy.Flap):
 
         box.pack_start(Gtk.Box(), False, False, 5)
 
-        self.set_content(box)
+        self.add(box)
 
         play_queue_scrollbox = Gtk.ScrolledWindow(vexpand=True)
 
@@ -298,14 +299,14 @@ class MobileFlap(Handy.Flap):
         play_queue_list.connect("button-press-event", on_play_queue_button_press)
 
         play_queue_scrollbox.add(play_queue_list)
-        self.set_flap(play_queue_scrollbox)
+        self.add(play_queue_scrollbox)
 
         def on_play_queue_open(*_):
-            if not self.get_child_visible():
-                self.set_reveal_flap(False)
-                return
-
-            self.set_reveal_flap(self.state.play_queue_open)
+            if self.state.play_queue_open:
+                self.set_visible_child(play_queue_scrollbox)
+            else:
+                self.set_visible_child(box)
+        on_play_queue_open()
         self.state.connect("notify::play-queue-open", on_play_queue_open)