820267 - lock screen should have a different layout

Status: VERIFIED FIXED

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

Description

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

We need to implement it since visual designer decided the new design. Steve, please upload the new design for lockscreen, the original dropbox link is unavailable.

+++ This bug was initially created as a clone of Bug #817988 +++

See this bug for reference: https://bugzilla.mozilla.org/show_bug.cgi?id=817639

Comment 1

[steve]

Here is the design that we changed on request to speed up performance.

https://www.dropbox.com/sh/haz2exb5somlhln/EUeNMv1z8r

Any Questions or more assets needed contact Vicky or myself

Comment 2

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Steve, it looks like the lockscreen for dialer, I mean the normal lockscreen design which you mentioned on bug 815629 comment 38 :)

Comment 3

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

I found normal lockscreen design from https://www.dropbox.com/home/New 4.2 11DEC/unlock prompt

thank you, Steve!

Comment 4

[Joe Cheng [:jcheng] (please needinfo)]

Adding C3 milestone to BB+ so it doesn't get missed in C3 query

Comment 5

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Steve, please let me know if something I missed.

https://www.dropbox.com/s/awmw80rjv1htns9/lockscreen-1212.mp4

do I need to implement the double or triple bouncing effect for straight line?

And Victoria, I need the assert for arrow-up image, thanks!

Comment 6

[steve]

hey Yuren, looks promising. We need to work on the below points:

PROMPT:
we need the bounce on the straight line version. Bottom section should rise up then drop down faster ( than up motion, its falling), followed by a smaller bounce. one bounce should do but will need to see it.

TAP:
if arrow or bottom strip is tapped, prompt should be activated

BOTTOM SECTION:
Bottom section - can't tell from movie clip but bottom section should be transparent (looks opaque) please refer to recent designs above

BUTTON TRANSPARENCY:
it looks like we should have more transparency before the buttons are in final position. This is because they should not look tapable yet and the transparency indicates this. Suggest animation brings the icons from 10% (instead of 20%) and goes to 70% or 80%, only when in  final position are icons at 100%.

Lets get this things in and take it from there

thanks

Comment 7

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Steve,

this is the result according your comment:
https://docs.google.com/open?id=0B-FHjXny08MtcHR4OU1UbDNTWHM

and changed transparency of icon from 20% to 50%, and 100% in final. I try to use 80% but still not good enough (so changed to 50%)

Comment 8

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Hi Al,

below link is the branch for this issue:
https://github.com/yurenju/gaia/tree/issue-820267

please let me know if you have any questions :)

Comment 9

[Victoria Gerchinhoren [:vicky]]

Great work Yuren!

Regarding this prompt, the icons should have the same transparency behaviour as in the unlocking animation. This is: they should be 10% transparent when entering the screen and reach the respective opacity they have in the unlocking behaviour when reaching the same position. For example: if they are 35% opaque when showing half of the button in the unlock, they should fade in until being 35% opaque in the prompt.

Thanks! Victoria

Comment 10

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

updated video and code for transparency issue

Video: https://docs.google.com/open?id=0B-FHjXny08MtVWNVS3VYRnFBZUk
Code: https://github.com/yurenju/gaia/tree/issue-820267

Comment 11

[Al Tsai [:atsai]]

Tested with Yurenju's branch.
There is no big problems about the unlock screen with normal situation.

Comment 12

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Attachment: Pull request

Comment 13

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 692818 [details]
Pull request

r=me, looks good.

Comment 14

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Steve,

this is the final version
https://docs.google.com/open?id=0B-FHjXny08MtSDVYQ3FFemJkSGc

We will push to gaia master if you have no problem with this version.

Comment 15

[steve]

Looks great Yuren. 

Good work. 

Really need to try on the phone now, to check the interaction works correctly and all use cases are covered.

Comment 16

[Victoria Gerchinhoren [:vicky]]

Please update buttons for incomming call and normal lockscreen with the following:
https://www.dropbox.com/sh/uj7wqyqih7lvscx/4PdKZ2WEhL

Comment 17

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

please open another bug for this asset changes. it's high risk for C3 deadline because you need to provide icons without border & background, and I'm overload.

Comment 18

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Merged.

Comment 19

[Zibi Braniecki [:zbraniecki][:gandalf]]

This commit seems to be responsible for bug 822958

Comment 20

[Chris Jones [:cjones] inactive; ni?/f?/r? if you need me]

This needs to be backed out and we need to fix whatever is causing bug 822958 before relanding.

Comment 21

[Tim Taubert [:ttaubert] (inactive)]

Backed out for large performance regressions:

https://github.com/mozilla-b2g/gaia/commit/20f9c3931c8825b1692380745d9f9d5b0c59258c

Comment 22

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

Relanded in https://github.com/mozilla-b2g/gaia/commit/4e92bbce55a05e61242d46f55228c0dd2e462843

Comment 23

[Yuren [:yurenju] (AFK ~ Oct. 12) (volunteer mode)]

Sorry about that. I will be more careful when land a change of major component.

Comment 24

[Victoria Gerchinhoren [:vicky]]

PROMPT ANIMATION:

the icons have a weird fading in effect. They should have a normal constant fade in and now they are fading in a bit and then suddenly they turn almost opaque. 

Again: It should be a constant fade in.

Comment 25

[Victoria Gerchinhoren [:vicky]]

Icon sizes inside the buttons should be bigger.(already provided the icons)

Comment 26

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

(In reply to Victoria Gerchinhoren from comment #25)
> Icon sizes inside the buttons should be bigger.(already provided the icons)

The layout is different. If there are bugs in the implementation please open new bugs instead of reopening this one.

Comment 27

[Al Tsai [:atsai]]

verified with 12-23 nightly build