search

dweymouth / supersonic

A lightweight and full-featured cross-platform desktop client for self-hosted music servers
GNU General Public License v3.0
680 stars 27 forks source link

Highlight button of current page #218

Closed natilou closed 5 months ago

natilou commented 11 months ago

I think it would be nice to have a different button color or a different button highlight type to distinguish which page I'm currently on.

Screenshot from 2023-07-12 11-16-38

I would like to work on this. I was thinking that one option is to use the primary color, but I don't know if it would be overwhelming. Another option is to change the color a bit, perhaps lighter. I am open to suggestions

dweymouth commented 11 months ago

I thought about doing this once but I'm not sure it will really work out well. First, the way to set the color of a button in Fyne is to set its Importance, to HighImportance (which uses primary color) or DangerImportance (which uses the danger color - usually red). Those are the two options.

But why I think it might not work out well is there are more pages than there are buttons (e.g. the page for a single album, artist, or playlist, as opposed to the Albums, Artists, Playlists pages). One option, the Artists button could stay highlighted when viewing a single artist page, but that would kind of imply that you can't click on the artists button right now since you're already "on" that page (like how the view switcher buttons in the Favorites page work), where in reality clicking on it would return you to the page listing all artists.

The other option is to have the button only highlight when you're on that actual page, which means when navigating back/forward through history, some pages will highlight buttons and others won't, which I think might be a bit confusing.

What are your thoughts?

dweymouth commented 11 months ago

On further thoughts I think this could work in the future once I move away from buttons (with the button background and border) to interactive icon-only buttons in the future. Some other apps do seem to have this pattern where the lit up icon could be for related pages as well (eg albums vs single album page). I'll have to make a custom IconButton widget, and it's currently also blocked by a Fyne issue where some SVGs fail to update colors correctly.

natilou commented 11 months ago

Sorry for the delay, I've seen in Navidrome that when you are in a specific page the icon is filled, in the screenshot the difference is in "Top Rated" page: image Screenshot from 2023-07-15 20-50-54 But if you click on "Artists", the icon is filled and if you go to a specific artist, the icon stays the same, but you can click the button "Artists" again and it redirects you to the Artists Page: Screenshot from 2023-07-15 21-10-20 Screenshot from 2023-07-15 21-10-30

In Spotify, the icon is filled when you are in the specific page, but then the filled is removed when you go to other page. Screenshot from 2023-07-15 20-50-20 Screenshot from 2023-07-15 20-50-03

For now, I was thinking about something similar to Spotify, just highlighting the button or the icon of the "Home", "Now Playing", "Favorites", "Albums", "Artists", "Genres", "Playlists" and "All Tracks" pages, not the specific Artist or Album.

dweymouth commented 11 months ago

I think highlighting the button would look a little harsh. I do eventually want to switch to just icons in the top row (and bottom player controls) instead of showing the button background/border around them, but to do that I need to move from using PNG icons to SVGs that can be themed, so they can change color on hover, press, etc. and that is currently blocked by https://github.com/fyne-io/fyne/issues/3900 since some of the SVG versions of the icons are affected by that bug. So if you felt like debugging the Fyne issue that would be a good place to start. I might get around to looking into it myself too but I do kind of want to get to Jellyfin API support next, which I've kept putting off

natilou commented 11 months ago

Yeah I think highlighting the button would be overwhelming, I agree with the idea of using icons. So, I'll start looking at the fyne issue, thanks!

natilou commented 7 months ago

Hi @dweymouth , the issue was fixed in the the fyne new version. When you have the SVG icons with a compatible license, let me know and I will start working on this!

dweymouth commented 7 months ago

Unfortunately I had to reopen the Fyne issue as when going through replacing all the PNG icons with SVG ones, I found one that still doesn't theme - and it's the heart icon which is tough because I need to find two (one filled and one outlined) that have otherwise the exact same shape. I only found one suitable pair of heart SVGs so far and they don't theme correctly. I'll push my progress to a branch so you can try it out or see if you can find a different heart icon pair that works, and also is a compatible license (Public Domain, CC0, or a free license that requires attribution - and then we have to add the attribution)

natilou commented 7 months ago

I'll work on your branch to highlight the icons you changed and see if I can find another SVG heart icon that works.Thanks!!