1069521 - (Settings) Keyboard Settings is using the wrong styles & has a terrible transition

Status: RESOLVED FIXED

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

Description

[Patryk Adamczyk [:patryk] UX]

Attachment: Keyboard using the correct styles

1. Go to Settings > Keyboards
2. See screenshot, it looks to be using the refreshed styles
3. Click on "Built-in Keyboard"
4. See screenshot, it looks like its using the v.1 styles, and the status bar is black not gray.

To Do:
1. Update the "Built-in Keyboard" style to match the refreshed visuals
2. When you click back in the "Built-in Keyboard" the transition is incorrect. The screen should slide from the left edge but it slides from the right edge.

Comment 1

[Patryk Adamczyk [:patryk] UX]

Attachment: Keyboard settings using incorrect styles

Comment 2

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

Hey Carol,
can you provide me the spec for this screen?

Comment 3

[Carol Huang [:Carol]]

Helen,
Could you take a look at this one?
Thank you!

Comment 4

[Carol Huang [:Carol]]

Hi Omega,
Please take a look at this one, thank you!!

Comment 5

[Omega Feng [:Omega] [:馮於懋]]

Hi Rudy,

Please help change the status bar color of Built-in Keyboard to gray like Settings. (BTW, the header title is Built-in Keyboard, not Keyboard settings.)

And, I know we cannot fix the transition direction issue now, but could you have some comments on when we can do that? Thanks a lot!

Comment 6

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

The transition issue could be tracked by bug 1023046.
This bug could be used to track the polishing work mentioned in comment 5.

Comment 7

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Pavel, may I know if you have started working on this or need me to take over?
Thanks.

Comment 8

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

Hey Rudy,
if you have time :) feel free to get this one

Comment 9

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Sure, take it.

Comment 10

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Attachment: Patch V1

This is a simple patch to handle the following 2 issues:
     - Change the status bar color to sync with settings app.
     - Modify the title to keyboard app name.

Tim, could you please help review this?
Thanks.

Comment 11

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8495071 [details] [review]
Patch V1

Also ask for Omega's help to take a look in case any other parts need to be addressed.
Thank you.

Comment 12

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

Comment on attachment 8495071 [details] [review]
Patch V1

I don't think you need JS here, simply

  <title data-l10n-id="title">Keyboard</title>

Will do the trick.

Comment 13

[Omega Feng [:Omega] [:馮於懋]]

Comment on attachment 8495071 [details] [review]
Patch V1

LGTM, thanks!

Comment 14

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8495071 [details] [review]
Patch V1

Sorry that did not realize this should have a much easier way to achieve this.
Could you please review it again?

Comment 15

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Landed to Gaia master,
https://github.com/mozilla-b2g/gaia/commit/4bd0fdfeec6cda58c8d25ce69bc3810e8edfa0b1