New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow to resize the playlist browser's side pane to a smaller width #2765

Closed
ptitjes opened this Issue Feb 7, 2018 · 7 comments

Comments

Projects
None yet
5 participants
@ptitjes
Collaborator

ptitjes commented Feb 7, 2018

The playlist browser's side pane (that lists the playlists) occupy a lot of space even when the playlist names are short. This is due to the fact that the 'Add' and 'Import' buttons prevent to resize to a smaller size than their cumulated minimum width. This is frustrating when you work on small screens or want to have two windows side by side.

I see two possible ways to fix this problem:

  • either shrink all the add/import buttons in a '+' sub-menu,
  • or have a 'Show icon only' option somewhere

Also maybe we could rethink the fact that there is only one item in the 'Preference' menu.

Thoughts, ideas ?

@urielz

This comment has been minimized.

Contributor

urielz commented Feb 7, 2018

Another alternative (I don't know if it's possible) would be to move the buttons down (to the right of Filters).

image

@lazka

This comment has been minimized.

Member

lazka commented Feb 7, 2018

https://lazka.github.io/pgi-docs/#Gtk-3.0/classes/FlowBox.html should also work, it should stack things vertically if there is no space.

@frestr

This comment has been minimized.

Member

frestr commented May 14, 2018

I've done some experimentation with using a flowbox for this, and have come up with a few solutions. None of them are perfect, but it would be nice to get some thoughts on them.

Alternative 1

ql_pl_1

Notes:

  • The preferences button takes up quite a bit of space.
  • The middle step with the pref button alone at the bottom is a bit ugly.
diff --git a/quodlibet/quodlibet/browsers/playlists/main.py b/quodlibet/quodlibet/browsers/playlists/main.py
index 1eceaa7..a0ed329 100644
--- a/quodlibet/quodlibet/browsers/playlists/main.py
+++ b/quodlibet/quodlibet/browsers/playlists/main.py
@@ -218,14 +218,15 @@ class PlaylistsBrowser(Browser, DisplayPatternMixin):
         import_pl = qltk.Button(_("_Import"), Icons.LIST_ADD,
                                 Gtk.IconSize.MENU)
         import_pl.connect('clicked', self.__import, library)
-        hb = Gtk.HBox(spacing=6)
-        hb.set_homogeneous(False)
-        hb.pack_start(new_pl, True, True, 0)
-        hb.pack_start(import_pl, True, True, 0)
-        hb2 = Gtk.HBox(spacing=0)
-        hb2.pack_start(hb, True, True, 0)
-        hb2.pack_start(PreferencesButton(self), False, False, 6)
-        self.pack_start(Align(hb2, left=3, bottom=3), False, False, 0)
+        fb = Gtk.FlowBox()
+        fb.set_selection_mode(Gtk.SelectionMode.NONE)
+        fb.set_homogeneous(False)
+        fb.insert(new_pl, 0)
+        fb.insert(import_pl, 1)
+        pref = PreferencesButton(self)
+        fb.insert(pref, 2)
+        fb.set_max_children_per_line(3)
+        self.pack_start(fb, False, False, 0)
 
     def __create_playlists_view(self, render):
         view = RCMHintedTreeView()

Alternative 2

ql_pl_2

This one would've been nice if wasn't for the fact that the the pref button creates a lot of empty space. I couldn't find a way to make the other other buttons expand the space like in a HBox.

diff --git a/quodlibet/quodlibet/browsers/playlists/main.py b/quodlibet/quodlibet/browsers/playlists/main.py
index 1eceaa7..c495009 100644
--- a/quodlibet/quodlibet/browsers/playlists/main.py
+++ b/quodlibet/quodlibet/browsers/playlists/main.py
@@ -218,14 +218,16 @@ class PlaylistsBrowser(Browser, DisplayPatternMixin):
         import_pl = qltk.Button(_("_Import"), Icons.LIST_ADD,
                                 Gtk.IconSize.MENU)
         import_pl.connect('clicked', self.__import, library)
-        hb = Gtk.HBox(spacing=6)
-        hb.set_homogeneous(False)
-        hb.pack_start(new_pl, True, True, 0)
-        hb.pack_start(import_pl, True, True, 0)
-        hb2 = Gtk.HBox(spacing=0)
-        hb2.pack_start(hb, True, True, 0)
-        hb2.pack_start(PreferencesButton(self), False, False, 6)
-        self.pack_start(Align(hb2, left=3, bottom=3), False, False, 0)
+        fb = Gtk.FlowBox()
+        fb.set_selection_mode(Gtk.SelectionMode.NONE)
+        fb.set_homogeneous(False)
+        fb.insert(new_pl, 0)
+        fb.insert(import_pl, 1)
+        pref = PreferencesButton(self)
+        pref.set_halign(Gtk.Align.START)
+        fb.insert(pref, 2)
+        fb.set_max_children_per_line(3)
+        self.pack_start(fb, False, False, 0)
 
     def __create_playlists_view(self, render):
         view = RCMHintedTreeView()

Alternative 3

ql_pl_3

Notes:

  • Identical to the current implementation before reflowing
  • I think it looks pretty good
  • The minimum size of the pane may still be too large
diff --git a/quodlibet/quodlibet/browsers/playlists/main.py b/quodlibet/quodlibet/browsers/playlists/main.py
index 1eceaa7..ffa965e 100644
--- a/quodlibet/quodlibet/browsers/playlists/main.py
+++ b/quodlibet/quodlibet/browsers/playlists/main.py
@@ -218,14 +218,18 @@ class PlaylistsBrowser(Browser, DisplayPatternMixin):
         import_pl = qltk.Button(_("_Import"), Icons.LIST_ADD,
                                 Gtk.IconSize.MENU)
         import_pl.connect('clicked', self.__import, library)
-        hb = Gtk.HBox(spacing=6)
-        hb.set_homogeneous(False)
-        hb.pack_start(new_pl, True, True, 0)
-        hb.pack_start(import_pl, True, True, 0)
-        hb2 = Gtk.HBox(spacing=0)
-        hb2.pack_start(hb, True, True, 0)
-        hb2.pack_start(PreferencesButton(self), False, False, 6)
-        self.pack_start(Align(hb2, left=3, bottom=3), False, False, 0)
+        fb = Gtk.FlowBox()
+        fb.set_selection_mode(Gtk.SelectionMode.NONE)
+        fb.set_homogeneous(False)
+        fb.insert(new_pl, 0)
+        fb.insert(import_pl, 1)
+        fb.set_max_children_per_line(2)
+
+        pref = PreferencesButton(self)
+        hb = Gtk.HBox()
+        hb.pack_start(fb, True, True, 0)
+        hb.pack_start(pref, False, False, 0)
+        self.pack_start(hb, False, False, 0)
 
     def __create_playlists_view(self, render):
         view = RCMHintedTreeView()
@urielz

This comment has been minimized.

Contributor

urielz commented May 14, 2018

I'm of the opinion of removing the labels and leaving the icons (with a floating description when mouse hovers). This would solve the problem and also be more consistent with the general look and feel of the UI. Looking at the UI, I don't see labels for many options (toggle shuffle mode, toggle repeat mode, toggle queue visibility, volume, etc). So why these should have labels?

But if the above is not a popular opinion, I would choose alternative 3. I think it's the one that looks best.

@lazka

This comment has been minimized.

Member

lazka commented May 15, 2018

I'm of the opinion of removing the labels and leaving the icons (with a floating description when mouse hovers). This would solve the problem and also be more consistent with the general look and feel of the UI. Looking at the UI, I don't see labels for many options (toggle shuffle mode, toggle repeat mode, toggle queue visibility, volume, etc). So why these should have labels?

Yeah, in older versions we had many more labels in the UI, but they have all been removed over time and it would probably be more consistent doing something similar here. But the flowbox still seems like an good improvement for now.

But if the above is not a popular opinion, I would choose alternative 3. I think it's the one that looks best.

+1

@declension

This comment has been minimized.

Member

declension commented May 15, 2018

Agree with @urielz on both points.

Especially as there's a new button (&label) in the unmerged branch for playlist folders support (note to self etc...) which makes the problem more noticeable

@frestr frestr closed this in 6640225 May 25, 2018

@frestr

This comment has been minimized.

Member

frestr commented May 25, 2018

It should now be as alternative 3, but with the labels as tooltips instead.

lazka added a commit that referenced this issue Jun 1, 2018

browsers/playlist: Make the side pane take up less space
The buttons got their labels removed and added as tooltips instead, and
the "New" and "Import" button can be reflowed.

Fixes #2765
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment