837089 - [System][Value Selector] Incorrect layout and visuals used in Time+Date

Status: RESOLVED WONTFIX

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

Description

[Sergi]

Attachment: Current + Recommended layout for Date+Time Pickers

The layout for some elements used in time and date value selectors is not correct.

- The header is totally different.
- The blue selection bar should be thinner.
- The shadow used for the blue selection bar is too strong.
- The outline of the box containing the numbers is black with a subtle white outline. 
- The button tray at the bottom of the screen should use a darker divider.

Please, refer to the visuals provided for further reference.

Comment 1

[Sergi]

One more for the time picker ...

- The blue overlay should go from side to side of the container box. Right now there's a divider between minutes and AM/PM

Comment 2

[Patryk Adamczyk [:patryk] UX]

Pavel can you please take this, I believe the spinner in the time selection of the clock functions as desired. Please reference that.

Also the title of the spinner should be 19px font weight 500.

Comment 3

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

Attachment: Before-After

[✓] - The header is totally different.
[✓] The blue selection bar should be thinner.
[✓] The shadow used for the blue selection bar is too strong.
[✓] The outline of the box containing the numbers is black with a subtle white outline. 
[✓] The button tray at the bottom of the screen should use a darker divider.
[✓] The blue overlay should go from side to side of the container box. Right now there's a divider between minutes and AM/PM

There are few things who I can't do:
[1] - bigger text in blue overlay. I saw the http://buildingfirefoxos.com version of this. On FFnightly works but on device we have scrollbar on each spin holder like in settings app (in )
[2] - I'm not sure how/whether to set the full height of the [System][Value Selector]


Can you provide me some psd or just info for the right color of borders, because some of them have transparency :).

Thanks.

Comment 4

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

Attachment: patch for Gaia repo

Refactored version of [System][value_selector] - Time, Date
Maybe we can make further improvements but I think this changes are enough for this PR.

Comment 5

[Sergi]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #3)
> Created attachment 717491 [details]
> Before-After
> 
> Can you provide me some psd or just info for the right color of borders,
> because some of them have transparency :).
> 
> Thanks.

Pavel, do you mean the border color of the main box containing the Time+Date? if that's the case the outline should be black.

Comment 6

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

I mean for the separator(white,black lines) between hours and minutes for example?

Comment 7

[Sergi]

Separators are created using two lines of 1px. One of them is bright gray (#4a4a4a), the other one dark grey (#1d1d1d). You can access to the PSDs for the value selectors here: https://www.dropbox.com/s/r4g5q60dmam58k3/01_OWD_ValueSelector.psd

I've also realized that there're a couple of things that still need to be updated. One of them is the size of the selected date, which need to be bigger. Let me check with Arnau just in case we can come out with a solution.

We should also break the data that appears on top and bottom of the time+date box, so it's cut on the middle and it's possible for the user to know he can scroll. You can check the visuals attached. Maybe we can give more space to each line?

Comment 8

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 10

[Sam Joch [:samjoch]]

Any news on this bug ?

The commit https://github.com/pivanov/gaia/commit/1decf437ce86c61a54c63a0190becc4f6fc151c5 doesn't seem to pass the test. Does it match the last before/after attachment screenshot ?

Comment 11

[Eric Pang [:epang] UX]

Hi Pavel, have you received the info you need to move forward on this bug?

Comment 12

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

In reply to Sam Joch [:samjoch] from comment #10)
> Any news on this bug ?
> 
> The commit
> https://github.com/pivanov/gaia/commit/
> 1decf437ce86c61a54c63a0190becc4f6fc151c5 doesn't seem to pass the test. Does
> it match the last before/after attachment screenshot ?

Yep, I think so

Comment 13

[Sam Joch [:samjoch]]

Please feedback here ?

Comment 14

[Eric Pang [:epang] UX]

(In reply to Sam Joch [:samjoch] from comment #13)
> Please feedback here ?

Pavel, can you attached updated screen shots? Thanks!

Comment 15

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

I saw a problem with my patch and you need to fix a lot of things ... hopefully soon

Comment 16

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

I'm done now :)

Comment 17

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #16)
> I'm done now :)

Hey Pavel, can you attach a screenshot of the after? Thanks!

Comment 18

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

Attachment: After patch

Sure :)

Comment 19

[Eric Pang [:epang] UX]

Comment on attachment 739481 [details]
After patch

Hi Sergi,
 
Seeing as many changes were made, can you review the after patch screenshots and let Pavel know if they are good or if any changes need to be made? Thanks!

Comment 20

[Sergi]

(In reply to Eric Pang [:epang] from comment #19)
> Comment on attachment 739481 [details]
> After patch
> 
> Hi Sergi,
>  
> Seeing as many changes were made, can you review the after patch screenshots
> and let Pavel know if they are good or if any changes need to be made?
> Thanks!

Think both look fine. Just a couple of small things:

- Date picker: The characters on top and bottom of the central box don't look well aligned. February (on top) should go a little bit down, while June (at the bottom) should go up. The font size for the currently selected date over the blue bar should look bigger. I think Pavel said it's not possible to make it bigger while leaving the rest at the same size they have right now. It's recommended to have the selected date bigger, but if it's too much complex i think i can live with the current proposal.  

- Time picker: Same problem as stated above with the characters on top and bottom, but in this case is more pronounced. We should center them better on the screen. The characters for the currently selected time are not either centered over the blue bar.

Let me know if you need some screenshots to better identify my comments.

Thanks!

Comment 21

[Eric Pang [:epang] UX]

Hi Pavel, can you work on the items Sergi listed?  Once ready, can you flag Sergi for feedback so he can check?  Thanks!

Comment 22

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

Attachment: After patch

like this one? :)

Comment 23

[Sam Joch [:samjoch]]

Comment on attachment 717493 [details]
patch for Gaia repo

Any feedback here ?

Pavel: Please request me when you have a feedback+ from Sergi. Thanks.

Comment 24

[Sergi]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #22)
> Created attachment 741698 [details]
> After patch
> 
> like this one? :)

Hi Pavel, thanks for this. The time picker looks fine to me. In regard of the date picker i still think the text is not well aligned on top and bottom. Can we check this?

When we arrange this last thing i'm good to go with your patch.

Thanks!

Comment 25

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #24)
> (In reply to Pavel Ivanov [:ivanovpavel] from comment #22)
> > Created attachment 741698 [details]
> > After patch
> > 
> > like this one? :)
> 
> Hi Pavel, thanks for this. The time picker looks fine to me. In regard of
> the date picker i still think the text is not well aligned on top and
> bottom. Can we check this?
> 
> When we arrange this last thing i'm good to go with your patch.
> 
> Thanks!

Hi Pavel, can you please look into this last fix?  Thanks!

Comment 26

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

Attachment: After patch

Thanks Sergi :) 
what about this one?

Comment 27

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #26)
> Created attachment 745506 [details]
> After patch
> 
> Thanks Sergi :) 
> what about this one?

Sergi, will you have time to review this week?  I'm hoping to get this into V1 train :). Thanks!

Comment 28

[Sergi]

(In reply to Eric Pang [:epang] from comment #27)
> (In reply to Pavel Ivanov [:ivanovpavel] from comment #26)
> > Created attachment 745506 [details]
> > After patch
> > 
> > Thanks Sergi :) 
> > what about this one?
> 
> Sergi, will you have time to review this week?  I'm hoping to get this into
> V1 train :). Thanks!

We're almost there. Now the text is at the same distance on top and bottom, but we should increase the distance between each row so it's only possible to view half the text (you will see "March" and "July" cut in the middle). The idea is to let the user understand it's possible to scroll there by showing part of the content on top and bottom of the rolling sections.

If we can update that we can close this bug.

Thanks!

Comment 29

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #28)
> (In reply to Eric Pang [:epang] from comment #27)
> > (In reply to Pavel Ivanov [:ivanovpavel] from comment #26)
> > > Created attachment 745506 [details]
> > > After patch
> > > 
> > > Thanks Sergi :) 
> > > what about this one?
> > 
> > Sergi, will you have time to review this week?  I'm hoping to get this into
> > V1 train :). Thanks!
> 
> We're almost there. Now the text is at the same distance on top and bottom,
> but we should increase the distance between each row so it's only possible
> to view half the text (you will see "March" and "July" cut in the middle).
> The idea is to let the user understand it's possible to scroll there by
> showing part of the content on top and bottom of the rolling sections.
> 
> If we can update that we can close this bug.
> 
> Thanks!

Thanks Sergi, Pavel can you look into this update? Thanks!

Comment 30

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

sure,
can you create me a little mockup for this one to avoid unnecessary iterations?

Comment 31

[Sergi]

Attachment: Date_Time Mockup

Pavel, here's a mockup for your reference.

Thanks!

Comment 32

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

10x :) I will update this asap.

Comment 33

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

Attachment: After patch

I made the changes Sergi, can you review them ... I found some small gliches on the mockup ... but I think now everything is ok :)

Comment 34

[Sergi]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #33)
> Created attachment 750712 [details]
> After patch
> 
> I made the changes Sergi, can you review them ... I found some small gliches
> on the mockup ... but I think now everything is ok :)

That's perfect Pavel.

Good work!

Comment 35

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

Thanks :) Sergi
Arnau, can you review this one? :)

Comment 36

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Pavel, could you please rebase your patch? I cannot install it in my phone, have some conflicts.
Thanks.

Comment 37

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

sure :) you can check it now

Comment 38

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 717493 [details]
patch for Gaia repo

Nice work Pavel, looks great!

Comment 39

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

Comment on attachment 717493 [details]
patch for Gaia repo

Hey Sam,
can you merge this one?

Comment 40

[Sam Joch [:samjoch]]

Comment on attachment 717493 [details]
patch for Gaia repo

Landed in master: https://github.com/mozilla-b2g/gaia/commit/c5e0126922cde8b3bfa03d497b70fbe66bc9f8df

Comment 41

[Sam Joch [:samjoch]]

Follow up fix lint error: https://github.com/mozilla-b2g/gaia/commit/6e3811c1ea0c17887beed95a1be9cf83b593021e

Please: `make lint` before r+

Comment 42

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

Thanks Sam,
I will do this next time.

Comment 43

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #42)
> Thanks Sam,
> I will do this next time.

Pavel, is this ready for verification by Naoki's team?

Comment 44

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

Yes I think so.

Comment 45

[Eric Pang [:epang] UX]

Naoki, this is ready for verification :)

Comment 46

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

reopened due to this issue:
1) set language to spanish
2) set time to 12:00 AM

Expected: 0:00 AM in display
Actual: it reset the date 01/01/1970 and the time to 01:00

Checking with 1.1, this bug doesn't occur.  It's a v2.0 bug.

Comment 47

[Eric Pang [:epang] UX]

(In reply to Naoki Hirata :nhirata (please use needinfo instead of cc) from comment #46)
> reopened due to this issue:
> 1) set language to spanish
> 2) set time to 12:00 AM
> 
> Expected: 0:00 AM in display
> Actual: it reset the date 01/01/1970 and the time to 01:00
> 
> Checking with 1.1, this bug doesn't occur.  It's a v2.0 bug.

Thanks Naoki! Pavel can you please look into this?  Thanks@

Comment 48

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

I think this is not from this bug ... but I'll double check tomorrow and ping you back

Comment 49

[(Inactive after June) George Duan [:gduan] [:喬智]]

This patch(1b21732) has been uplifted to v1-train.

https://github.com/mozilla-b2g/gaia/commit/638e9af43dea44c9dbccd4fef02933347d7c2ab7

Comment 50

[BMO Automation]

Firefox OS is not being worked on