863710 - Turn the status bar to a transparent status bar when the device is locked

Status: RESOLVED FIXED

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

Description

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

Attachment: Patch without icons.

The patch needs some love, mostly about transparent icons.

In addition the patch will solve an usability issue where there is no clock on the statusbar while you're doing a phone call.

Josh feel free to have someone taking this patch to add the missing icons if that can help to go faster.

Comment 1

[Josh Carpenter [:jcarpenter]]

Eric, we'll need transparent versions of our status bar icons for this patch, which makes the status bar transparent on the Lock screen (a nice little win for visual design attractiveness).

Comment 2

[Josh Carpenter [:jcarpenter]]

(In reply to Vivien Nicolas (:vingtetun) (:21) from comment #0)
> Created attachment 739592 [details] [diff] [review]
> Patch without icons.
> 
> The patch needs some love, mostly about transparent icons.
> 
> In addition the patch will solve an usability issue where there is no clock
> on the statusbar while you're doing a phone call.
> 
> Josh feel free to have someone taking this patch to add the missing icons if
> that can help to go faster.

I'm embarassed to admit I don't know how to apply and review patches to Gaia (was supposed to go over it with Casey in Madrid, but we ran out of time), so I'll need a screenshot.

Comment 3

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

Attachment: Transparent statusbar

(In reply to Josh Carpenter [:jcarpenter] from comment #2)
> (In reply to Vivien Nicolas (:vingtetun) (:21) from comment #0)
> > Created attachment 739592 [details] [diff] [review]
> > Patch without icons.
> > 
> > The patch needs some love, mostly about transparent icons.
> > 
> > In addition the patch will solve an usability issue where there is no clock
> > on the statusbar while you're doing a phone call.
> > 
> > Josh feel free to have someone taking this patch to add the missing icons if
> > that can help to go faster.
> 
> I'm embarassed to admit I don't know how to apply and review patches to Gaia
> (was supposed to go over it with Casey in Madrid, but we ran out of time),
> so I'll need a screenshot.

No worries. I have mostly have you a feedback? to get your attention on this bug since we discussed it quickly.

Let me attach 2 screenshots.

Comment 4

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

Attachment: Transparent statusbar with an attention screen (not transparent then).

Comment 5

[Josh Carpenter [:jcarpenter]]

Comment on attachment 740233 [details]
Transparent statusbar

I suspect we'll want to make the bar partly visible. eg: Black, but at 20% opacity or some such. I'll cc the visual team for input.

Comment 6

[Josh Carpenter [:jcarpenter]]

Comment on attachment 740234 [details]
Transparent statusbar with an attention screen (not transparent then).

Moving approval for this bug to Patryk

Comment 7

[Eric Pang [:epang] UX]

Attachment: Status Bar Icons with Tranparent Background

Static Status Bar Icons.

Comment 8

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 740234 [details]
Transparent statusbar with an attention screen (not transparent then).

Josh, do we even need the status bar in these dialogs... feels unnecessary since the user HAS to act on it.

If it needs to be there due to technical limitations. I'd prefer I translucent black bar... maybe 40%, so make the status bar look less heavy / distracting.

Comment 9

[Josh Carpenter [:jcarpenter]]

(In reply to Patryk Adamczyk [:patryk] UX from comment #8)
> Comment on attachment 740234 [details]
> Transparent statusbar with an attention screen (not transparent then).
> 
> Josh, do we even need the status bar in these dialogs... feels unnecessary
> since the user HAS to act on it.

I think there's merit in displaying the status bar for the incoming call and active alarm screens. In both instances you're looking at a phone after a period of inactivity (potentially several hours, in the case of a night's sleep), and the battery life, pending notifications and signal strength indicators are valuable contextual information even before the user acts on the alert. Particularly in case of phone call.

Re: translucency, I'd say let's mock it up and then see if we can implement it either with this bug, or separately.

Comment 10

[Eric Pang [:epang] UX]

(In reply to Josh Carpenter [:jcarpenter] from comment #9)
> (In reply to Patryk Adamczyk [:patryk] UX from comment #8)
> > Comment on attachment 740234 [details]
> > Transparent statusbar with an attention screen (not transparent then).
> > 
> > Josh, do we even need the status bar in these dialogs... feels unnecessary
> > since the user HAS to act on it.
> 
> I think there's merit in displaying the status bar for the incoming call and
> active alarm screens. In both instances you're looking at a phone after a
> period of inactivity (potentially several hours, in the case of a night's
> sleep), and the battery life, pending notifications and signal strength
> indicators are valuable contextual information even before the user acts on
> the alert. Particularly in case of phone call.
> 
> Re: translucency, I'd say let's mock it up and then see if we can implement
> it either with this bug, or separately.

Hi Josh, I'll create mock ups once Vivien gets back to us about the transparent animated icons.  If we can use sprites we'll be able to do either option :) (transparent or translucent). Thanks!

Comment 11

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

Attachment: lockscreen 20% opacity.

Comment 12

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

Attachment: lockscreen 40% opacity.

Comment 13

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

Attachment: attention 20% opacity.

Comment 14

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

Attachment: attention 40% opacity.

Comment 15

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

Attachment: attention 100% opacity.

Comment 16

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

Attachment: Patch without transparent animated icons.

Comment 17

[Eric Pang [:epang] UX]

Attachment: Animated Status Bar Icons

Created animated status bar icons as APNGs.

Comment 18

[Eric Pang [:epang] UX]

Attachment: Radial Gradient Overlay

Hi Vivien,  I've attached the radial gradient overlay for the lock screen - with this the status bar can be completely transparent.  Thanks!

Comment 19

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

Attachment: Pull Request

Comment 20

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

https://github.com/vingtetun/gaia/commit/44b7b559c9cf85a588400e5ff981d6f02d3b5620

Comment 21

[(inactive after 6/18) Alive Kuo [:alive]]

I think the image miss a vibration icon and that makes me very confused when I am testing my multi-channel silent mode patch....*sad* *Why my vibration icon never appears!?* *uh...no image....*

Comment 22

[:gerard-majax]

(In reply to Alive Kuo [:alive] from comment #21)
> I think the image miss a vibration icon and that makes me very confused when
> I am testing my multi-channel silent mode patch....*sad* *Why my vibration
> icon never appears!?* *uh...no image....*

Looks like you're right, it misses :)

Comment 23

[Eric Pang [:epang] UX]

Peter, do we have a status bar icon for vibration?  If so, should it be added? Thanks!

Comment 24

[Peter La]

Hey Eric,

We don't have such an icon currently.  We've never been asked to do one.  If they need it, yes please add it.

Thanks,
Peter.

Comment 25

[Eric Pang [:epang] UX]

Attachment: Status Bar Icons with Tranparent Background - with vibration icon

Hi, I've added the vibration icon back into the status bar sprite.

Comment 26

[(inactive after 6/18) Alive Kuo [:alive]]

Done at 870316.