After an evaluation, GNOME has moved from Bugzilla to GitLab. Learn more about GitLab.
No new issues can be reported in GNOME Bugzilla anymore.
To report an issue in a GNOME project, go to GNOME GitLab.
Do not go to GNOME Gitlab for: Bluefish, Doxygen, GnuCash, GStreamer, java-gnome, LDTP, NetworkManager, Tomboy.
Bug 723829 - OSD playback controls don't look great
OSD playback controls don't look great
Status: RESOLVED FIXED
Product: gnome-themes-standard
Classification: Core
Component: Adwaita GTK3 theme
unspecified
Other Linux
: Normal normal
: ---
Assigned To: gnome-themes-standard-maint
gnome-themes-standard-maint
Depends on:
Blocks:
 
 
Reported: 2014-02-07 10:31 UTC by Allan Day
Modified: 2014-05-05 12:29 UTC
See Also:
GNOME target: ---
GNOME version: 3.11/3.12


Attachments
screenshot & mockup (1.54 MB, image/png)
2014-02-07 10:31 UTC, Allan Day
  Details
osd: flatter troughs for OSD (1.94 KB, patch)
2014-02-07 13:07 UTC, Jakub Steiner
none Details | Review
osd: flatter troughs for OSD (2.03 KB, patch)
2014-02-07 13:17 UTC, Jakub Steiner
committed Details | Review
osd: fix insensitive buttons (2.43 KB, patch)
2014-02-07 13:23 UTC, Jakub Steiner
committed Details | Review
screenshot: before (949.33 KB, image/png)
2014-02-07 13:46 UTC, Jakub Steiner
  Details
screenshot: after (968.71 KB, image/png)
2014-02-07 13:46 UTC, Jakub Steiner
  Details
screenshot - pressed button (35.30 KB, image/png)
2014-02-10 11:02 UTC, Allan Day
  Details

Description Allan Day 2014-02-07 10:31:10 UTC
Created attachment 268390 [details]
screenshot & mockup

The new floating OSD playback toolbar in Videos doesn't look great. Most obvious issues:

 * Insensitive buttons are far too prominent and look a bit broken.
 * Icon buttons aren't always square.
 * The slider looks awkward - the trough has a visual complexity that doesn't really work in this context.
 * Buttons don't always have a raised look.

I've attached an image with a screenshot and a mockup for how it could look. Changes include:

 * Darker & more transparent background colour for insensitive buttons.
 * Darker button borders.
 * Icons in buttons are lighter.
 * Icon buttons are always square (even when joined) - 34px by 34px.
 * Slider trough has a single flat colour.
 * Slider trough border is much darker.
 * All buttons have a raised appearance.
Comment 1 Bastien Nocera 2014-02-07 11:56:20 UTC
(In reply to comment #0)
<snip>
>  * Icon buttons are always square (even when joined) - 34px by 34px.

Note that for the play/pause button, we just adding left/right margins right now. It would be great if there was a class for it rather than hardcoding spacing in totem's sources.
Comment 2 Jakub Steiner 2014-02-07 13:07:39 UTC
Created attachment 268403 [details] [review]
osd: flatter troughs for OSD
Comment 3 Jakub Steiner 2014-02-07 13:17:01 UTC
Created attachment 268405 [details] [review]
osd: flatter troughs for OSD
Comment 4 Jakub Steiner 2014-02-07 13:23:50 UTC
Created attachment 268406 [details] [review]
osd: fix insensitive buttons
Comment 5 Jakub Steiner 2014-02-07 13:46:29 UTC
Created attachment 268410 [details]
screenshot: before
Comment 6 Jakub Steiner 2014-02-07 13:46:47 UTC
Created attachment 268411 [details]
screenshot: after
Comment 7 Allan Day 2014-02-07 14:25:01 UTC
Looks great!

It would be good to find out why some of the buttons don't have a raised appearance (maybe that's an issue for another bug though).
Comment 8 Jakub Steiner 2014-02-09 17:05:14 UTC
(In reply to comment #7)
> Looks great!
> 
> It would be good to find out why some of the buttons don't have a raised
> appearance (maybe that's an issue for another bug though).

You mean the volume and the 'more' buttons on the right of the floating bar? Or the fact that the seek buttons really don't need to be in the view, rather than being insensitive?
Comment 9 Jakub Steiner 2014-02-09 17:09:24 UTC
One thing missing is styling of the 'buffered' trough. Not closing yet.

Attachment 268405 [details] pushed as 5c72b4f - osd: flatter troughs for OSD
Attachment 268406 [details] pushed as 0562d04 - osd: fix insensitive buttons
Comment 10 Allan Day 2014-02-10 10:03:18 UTC
(In reply to comment #8)
> (In reply to comment #7)
> > Looks great!
> > 
> > It would be good to find out why some of the buttons don't have a raised
> > appearance (maybe that's an issue for another bug though).
> 
> You mean the volume and the 'more' buttons on the right of the floating bar?

Yes. It looks odd having them flat; they don't look sensitive.
Comment 11 Allan Day 2014-02-10 10:03:18 UTC
(In reply to comment #8)
> (In reply to comment #7)
> > Looks great!
> > 
> > It would be good to find out why some of the buttons don't have a raised
> > appearance (maybe that's an issue for another bug though).
> 
> You mean the volume and the 'more' buttons on the right of the floating bar?

Yes. It looks odd having them flat; they don't look sensitive.
Comment 12 Allan Day 2014-02-10 11:02:11 UTC
Created attachment 268654 [details]
screenshot - pressed button

Another issue that I just noticed - button borders get brighter when pressed. The play button also loses its right-hand border.
Comment 13 Allan Day 2014-05-05 12:29:00 UTC
A lot of these issues were fixed for 3.12. Let's tackle any remaining issues with individual bug reports.