Service selector redesign: GTK+ sidebar and eye-candy

Reported by Alfredo Hernández on 2012-05-19
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Nuvola Player
Wishlist
Unassigned

Bug Description

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

Alfredo Hernández (aldomann) wrote :
tags: added: feature request
tags: added: feature-request
removed: feature request

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

summary: - Use GTK+ and webkit instead of HTML to draw the service selection screen
+ Service selector redesign: GTK+ sidebar and eye-candy
Changed in nuvola-player:
importance: Undecided → Wishlist
milestone: none → 1.1
status: New → Triaged
Changed in nuvola-player:
status: Triaged → In Progress
assignee: nobody → Jiří Janoušek (fenryxo)
Jiří Janoušek (fenryxo) wrote :

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

Changed in nuvola-player:
status: In Progress → Fix Committed
assignee: Jiří Janoušek (fenryxo) → nobody
Alfredo Hernández (aldomann) wrote :

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.

> 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) wrote :

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) wrote :

> ** 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) wrote :

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

Wouter Haine (w-haine) wrote :

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

Jiří Janoušek (fenryxo) wrote :

> 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) wrote :

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 :)

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

Jiří Janoušek (fenryxo) wrote :

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

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

Jiří Janoušek (fenryxo) wrote :

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) wrote :

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.

Changed in nuvola-player:
status: Fix Committed → In Progress

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) wrote :

Librsvg is sometimes full of surprise :-(

  status fixcommitted

Changed in nuvola-player:
status: In Progress → Fix Committed
Jiří Janoušek (fenryxo) wrote :

Fix released in Nuvola Player 1.1.0 and 2.0.0.

Changed in nuvola-player:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers