Service selector redesign: GTK+ sidebar and eye-candy

[Alfredo Hernández]

For a further integration of Nuvola Player with the desktop, I think that it could respect the GTK+ theme. A good way to accomplish this would be using GTK for a sidebar showing the available services and WebKit to show more info about each service.

Since I'm not a programmer, I don't know how do it, but it seems to exist a project that integrates WebKit rendering in GTK+.
http://webkitgtk.org/
https://live.gnome.org/WebKitGtk

[Jiří Janoušek (fenryxo)]

Actually, Nuvola Player already uses WebKitGtk - for both service
selector and service's web interface.

Notes:
* Sidebar will use GtkIconView
* We need an icon for each service - it is not possible just download
and modify logo (copyright). Alexander King could create the icons.
* Screenshots will be under CC0 license (public domain).
* "Use this service" button will be outside WebView and implemented as
regular GtkButton.
* "Cancel" button will be also available (if there is already running service).
* Service information page must be created by someone with sense for
design (i.e. not me) and experiences with HTML & CSS. Volunteers are
welcome.

  summary "Service selector redesign: GTK+ sidebar and eye-candy
service information"
  status triaged
  importance wishlist
  milestone 1.1

[Jiří Janoušek (fenryxo)]

Fix committed to lp:nuvola-player r361. Feedback with patches welcome.

[Alfredo Hernández (aldomann)]

I'm tweaking the HTML code to make it more similar to the mockup: the images have border and shadow, the text is a little bit smaller and easier to read, I'm adding some popular fonts in addition to Ubuntu Font family, and the sources (i.e. Wikipedia and Official page links) are always on the bottom.

Additionaly, I think that we could use Fancybox to make the image gallery sexier. http://fancybox.net/ (I haven't implemented it yet, but as I remember, it's just a couple of code lines and maybe an additional javascript file).

PS. I think that I can make the icons too.

[Jiří Janoušek (fenryxo)]

> PS. I think that I can make the icons too.

I've already written to Alexander King who created also the original
Nuvola Player icon. You can be a backup :-)

> ** Attachment added: "Service-pick page tweak."
> https://bugs.launchpad.net/nuvola-player/+bug/1001671/+attachment/3212305/+files/Captura%20de%20pantalla%20de%202012-07-03%2018%3A37%3A02.png

Looks great!

[Alfredo Hernández (aldomann)]

I've packed some fixes that make Nuvola Player sexier:
     A border is shown in the thumbnails, it currently looks odd, but it's because of the screenshots.
     The thumbnails have a subtle shadow.
     More typefaces are used (I added roboto, droidsans and cantarell, both very popular).
     The text looks smaller and the sources are on the bottom.
     The canvas for the maximised screenshots looks similar to any javascript powered lightbox/fancybox, pure CSS is used.

[Jiří Janoušek (fenryxo)]

> ** Attachment added: "sexy-nuvola.tar.gz"
> https://bugs.launchpad.net/nuvola-player/+bug/1001671/+attachment/3212678/+files/sexy-nuvola.tar.gz

Could you please upload your changes as a Bazaar branch to Launchpad
and submit it for code review? See
http://nuvolaplayer.fenryxo.cz/Contribute/Development.html for help,
especially section Code Review. Thanks.

[Alfredo Hernández (aldomann)]

Ok, no problem. I'll take some service screenshots and I'll upload a new branch with all the changes.

[Wouter Haine (w-haine)]

I could help out making the icons. Just tell me what you need.
<email address hidden>

[Jiří Janoušek (fenryxo)]

> I could help out making the icons. Just tell me what you need.
> <email address hidden>

Thanks. I've already written to Alexander King who created also the original
Nuvola Player icon. In case he won't have enough time to create the
icons, I'll let yout know.

[alecive (alecive)]

If you want some sort of monochrome style for the icons, I'd be glad to create them for you! I'm the creator of AwOken icon theme, so monochrome and minimalism are my faiths :)

[Alexander King (alexanderddking)]

I have attached the icons and im happy to licence my artwork under BSD 2-Clause license

[Jiří Janoušek (fenryxo)]

Thanks, Alex, but the tarball contains only icon for Pandora. Where are other icons?

[Alexander King (alexanderddking)]

They on different layers, I can export out individual svgs if you would like?

[Jiří Janoušek (fenryxo)]

I feel shamed I didn't know SVG images have layers. I created separate SVG files, but there is an issue with the Pandora icon: Librsvg doesn't render it correctly (see attached image). Do you have any idea what is a cause of this issue? Could you try to redraw the Pandora icon to satisfy librsvg? You can use Eye of GNOME (eog) to see how the icon is renderred by librsvg.

[Jiří Janoušek (fenryxo)]

I feel shamed I didn't know SVG images have layers. I created separate SVG files, but there is an issue with the Pandora icon: Librsvg doesn't render it correctly (see attached image). Do you have any idea what is a cause of this issue? Could you try to redraw the Pandora icon to satisfy librsvg? You can use Eye of GNOME (eog) to see how the icon is renderred by librsvg.

[Alexander King (alexanderddking)]

well that's super odd, i cant find anything on that layer to account for that black square, so i moved it into another document and it renders fine

[Jiří Janoušek (fenryxo)]

Librsvg is sometimes full of surprise :-(

  status fixcommitted

[Jiří Janoušek (fenryxo)]

Fix released in Nuvola Player 1.1.0 and 2.0.0.