951096 - [Clock] Adjust Stop/Lap buttons size and style in Stopwatch

Status: VERIFIED FIXED

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

Description

[Helen Huang [:HHuang]]

Buttons size are inconsistent with system UI.

Comment 1

[Helen Huang [:HHuang]]

Attachment: Clock_Stopwatch_VisualSpecV1_Dec10.jpg

Visual spec update. Buttons size please follow the spec.

Comment 2

[Helen Huang [:HHuang]]

Attachment: Clock_Stopwatch_VisualSpecV2_Dec14.jpg

Visual spec updated.

Comment 3

[Gnaneswar]

Attachment: Screenshots.tar.gz

Attached screenshots after changing the margin, height and width.

Similar to Bug 951092, have attached two screenshots with width 44% and 45%.

let me know your comments.

Comment 4

[Gnaneswar]

Would like to know your comments as well.

Comment 5

[Marcus Cavanaugh [:mcav]]

Looks OK to me, but deferring to Helen.

Comment 6

[Marcus Cavanaugh [:mcav]]

Gnaneswar, have you seen the calc CSS function? I see that the spec defines math-based widths. We could use the CSS calc() function https://developer.mozilla.org/en-US/docs/Web/CSS/calc to directly match what they want.

Comment 7

[Helen Huang [:HHuang]]

Following last common, I would be grateful if the calculation can work, it’s more precisely. 
Otherwise, I will go for the width 44% for buttons, but I found two buttons a bit close to the left side. Could you center them? Thanks!

Comment 8

[Gnaneswar]

Attachment: width44_center_n_left_align.tar.gz

Using width as calc ((100% - 1rem)/2) and setting margins as specified in spec would make the two buttons appear on two different rows.

Please note that I am using nexus-4 device.

Attached screenshots which includes width to 44% and alignment to center and left.
It appears that alignment to center looks bit close to the right side.

Please confirm the alignment.

Comment 9

[Marcus Cavanaugh [:mcav]]

Attachment: Link to Github pull-request: https://github.com/mozilla-b2g/gaia/pull/15922

Comment 10

[Marcus Cavanaugh [:mcav]]

Attachment: Buttons with correct sizes

Helen, take a look at this screenshot and let me know if that looks correct for you. It includes the 1.5rem padding on the outside and 1rem on the inside.

Gnaneswar, this time I used a CSS Flexbox to align the items. I can see why you had trouble -- the <menu> element had padding built in, and getting those to fit perfectly with varying margins and stuff can be complex.

Comment 11

[Helen Huang [:HHuang]]

Comment on attachment 8369596 [details]
Buttons with correct sizes

Marcus/Gnaneswar, thank you for helping, it's exactly what I want.

Comment 12

[Gnaneswar]

Similar to comment 19 of Bug 951092, the spacing between counting value numbers and stopwatch controls should match.

Comment 13

[Marcus Cavanaugh [:mcav]]

Landed in master:

https://github.com/mozilla-b2g/gaia/commit/a03bc3e737b165986ed4128e5fce7b1f99b71eab

Comment 14

[Edward Chen[:edchen]]

[Verified info]
Gaia      6e71ab4da1b08586ea0c758edb7aa199ee34cd2f
Gecko     https://hg.mozilla.org/mozilla-central/rev/bb030d47c946
BuildID   20140219160202
Version   30.0a1

[Testing result]
PASS
New UI is changed and no other side effects. I mark it to "VERIFIED"