1021271 - Status Bar needs refinement for 1.5x Scale and New Homescreen

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System, defect)

Description

[Patryk Adamczyk [:patryk] UX]

Attachment: Current Status Bar = Low Rent

The visual design on the status bar has regressed in v.2. Icons don't work anymore and the layout needs some love. Issues:
1. Notifications should be white, the blue icon clashes with the translucent status bar.
2. The time and notifications count font are too thick
3. The icons and fonts need to be horizontally aligned better, currently they are floating anchored to nothing, no baseline, no central horizon.
4. The "off" states of icons need to be more translucent. ie. When wifi is in its searching animation the "off" bars are very dark, which makes them look far too strong.



Not included in this bug, but blocking this bug:
* Notifications being cut off: https://bugzilla.mozilla.org/show_bug.cgi?id=1019216
* Time & AM/PM having a huge gap: https://bugzilla.mozilla.org/show_bug.cgi?id=1019200

Comment 1

[Patryk Adamczyk [:patryk] UX]

BTW Fira font bug: https://bugzilla.mozilla.org/show_bug.cgi?id=987872

Comment 2

[Patryk Adamczyk [:patryk] UX]

Attachment: Red doesn't show up well on default wallpapers

With the reduced underlay certain colours (red and blue) clash with wallpapers. The entire set of status bar icons need to be reworked:
+ reduce the amount colours - get rid of the blue, make it white, can we remove more colours, like the charging yellow? 
+ need a better solution for errors, the bright red doesn't work anymore
+ the dark grey / black looks terrible in the "off" states, we need to add more transparency to those forms.

Comment 3

[Patryk Adamczyk [:patryk] UX]

Attachment: A bunch of icons are still clipped :S

Comment 4

[Patryk Adamczyk [:patryk] UX]

Can you please provide an ETA on this fix? Thanks!

Comment 5

[Eric Pang [:epang] UX]

(In reply to Patryk Adamczyk [:patryk] UX from comment #4)
> Can you please provide an ETA on this fix? Thanks!

Hi Patryk,
I'll look into this with Pavel today (and tomorrow if needed).  We should have a fix no later then by end of this week.

Thanks! 
Eric

Comment 6

[Kevin Grandon :kgrandon]

If we're able to get these icons in, let's request approval. Moving to block bug 1017954 for now.

Comment 7

[Eric Pang [:epang] UX]

Hey Pavel,

I've updated the sprites and put them on box here:
https://mozilla.box.com/s/jcx4vwaanew1q3kk7nap

Note: We talked about this before but 2.25x (madai) is different because there are only 4 signal bars instead of 5.  I've left 5 for all other sizes

Also, the existing sprite for 2x was extremely outdated - so there's a change that more css will need to be updated for it.

I've also created a spec you can follow:
https://mozilla.box.com/s/bq6hip8zqmuz0yqjc9l4

The spec covers alignment, spacing and font style/sizes.

Note I also updated the gap between the time and am/pm from the other bug we already fixed (I felt like the gap was still too big after looking at it again).


I believe the only assets left are the aPNGs.  I'm trying to figure out how to create them, so I'll add a link to this bug when they are ready :).


Thanks Pavel, if you have any questions about what I've attached so far let me know!

Comment 8

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia/master

Hey Eric,
can you test this patch ... I'm waiting my device ... and I'm not sure how it looks like on real device

Comment 9

[Eric Pang [:epang] UX]

Hi Stephany, I think this bug should be added to the 2.0 blocking list.  It will update colours, alignment, text, etc. of the status bar.  Let me know if you agree, thanks!

Comment 10

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #9)
> Hi Stephany, I think this bug should be added to the 2.0 blocking list.  It
> will update colours, alignment, text, etc. of the status bar.  Let me know
> if you agree, thanks!

Steph, just realized that this is already blocking vertical homescreen.  Thanks!

Comment 11

[Eric Pang [:epang] UX]

Attachment: Status Bar Check.pdf

Hey Pavel,

The status bar is looking pretty good, but there's a few changes that still need to be made.  I've attached a pdf that covers the remaining changes that are needed.  Some of the items were updates to the sprites/apngs which I've done, so they just need to be replaced.  Let me know if you have any questions :).  Flag me for ui-review when ready so we can check the changes and fix anything else that might come up if needed.  Thanks!

Comment 13

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Eric,
as we talk few hours ago ... I fixed the issues based on your email :) and I think everything works now :)
PR is updated

Comment 14

[Eric Pang [:epang] UX]

Comment on attachment 8439878 [details] [review]
patch for Gaia/master

Lots of work and back and forth here!  Great work Pavel :)! R+

Comment 15

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Comment on attachment 8439878 [details] [review]
patch for Gaia/master

r+ if you remove the change in apps/settings, which seems completely unrelated to this patch :)

Comment 16

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Thanks :) 

Landed to master:
https://github.com/mozilla-b2g/gaia/commit/e0ce5d095b767af9b371d67e0f5d1bcc1a680099

Comment 17

[Ryan VanderMeulen [:RyanVM]]

v2.0: https://github.com/mozilla-b2g/gaia/commit/26bd8c07f661ff01e5995991e0158ac3326d2d0f