809791 - [UX VD] Drawer. Folder List/horizontal stripes Menu button in orange header is wrong, does not animate/transition correctly when tray is displayed

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::E-Mail, defect, P1)

Description

[Victoria Gerchinhoren [:vicky]]

Button in header is not right, it should show a bigger icon that is transformed in the transition from opening and closing the drawer, see transitions doc specs in page 13: https://www.dropbox.com/s/26mw4x5upiv5apg/Transitions_v10.pdf
Mockup here: https://www.dropbox.com/s/ww9fjv19csjn5md/04%20Email_Drawer.png
See calendar drawer for reference as well.

Comment 3

[Leo]

Hi Andrew,
In calendar module the same icon is working fine. I have taken the icon from calendar and used in Email. But still the problem persists.
Is it pure UX icon issue? Suggest me how to check this issue. 

Thanks.

Comment 4

[Lukas Blakk [:lsblakk] use ?needinfo]

Would be nice to know what this looks like (screenshot) - also will wait for the ni? answer so we can determine if this is more than just icon - thus more risk.

Comment 5

[Leo]

Attachment: Image for Email - Header - Folder List Icon.png

Email - Header - Folder List Icon.png

Comment 6

[Leo]

Attachment: Image for Calendar List Icon.png

Image for Calendar List Icon.png

Comment 7

[Leo]

The list icons for Calendar [Working] and Email [Not Working] are attached for reference.

Comment 8

[Alex Keybl [:akeybl]]

We're going to keep blocking-b2g:- and expedite any reviews/approvals from [e-mail], once available.

Comment 9

[Leo]

Attachment: Pointer to pull request

This Issue is fixed by adding data-set variable
to apply style for header only in folder screen.

Please review the patch and provide your comments

Comment 10

[Andrew Sutherland [:asuth] (he/him)]

Comment on attachment 738965 [details]
Pointer to pull request

Thanks for the patch!

For future reference, Gaia style guidelines require use of single-quoted strings rather than double-quoted strings, and this is enforced by the linter.  That's why the travis build reported a failure.  Please be sure to consider manually run the linter on your commits, but definitely check the travis build results for your pushes to see what is angry about.  For the e-mail app, if it's not a lint problem, it's usually another app's unit test failue that you can ignore.

However, that's moot in this case because we don't need to do the hacky dataset on the body trick that this patch is using.  You can do your selector using something like ".card-message-list.after" or ".card-message-list.center", I believe.

It looks like the triple-horizontal-bar button is also missing some styling when applied?  Or maybe it's just an optical illusion because I can't really see the gradient style to its right that I can normally see.

Clearing review flag until the next patch rev.

This patch seems to change the size of the tray gutter to 5.3 rem from 4.3 rem.  Is there a visual design guideline somewhere that justifies this change?  Cards.TRAY_GUTTER_WIDTH will need to be updated if so.  (Actually, it appears the value is already out-of-sync with reality; uh-oh...)

Comment 11

[Stephany Wilkes]

Flagging Patryk: Who is the best VxD person to address this?

Comment 12

[Patryk Adamczyk [:patryk] UX]

vicki, who filed the bug could take care of this.

Comment 13

[psingapati]

Attachment: Pointer to Pull request with Changes

Pointer to pull request as per the changes suggested.
1. Used .card-message-list.after for referring the element instead of data-set
2. Horizontal bar is not proper when compared to Calendar, Calendar Icon looks better 
3. tray gutter is changed from 4.3 rem to 5.3 rem to make the horizontal bar shown properly. I have know idea on this, where to update.

Please review the attached pull request.
Thanks.

Comment 14

[psingapati]

Pull request for the comment 13 is
https://github.com/mozilla-b2g/gaia/pull/9496

Comment 15

[James Burke [:jrburke]]

Attachment: Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/9548

Pointer to Github pull-request

Comment 16

[James Burke [:jrburke]]

Comment on attachment 745318 [details]
Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/9548

This pull request builds on the one from @sungwoo.yoon in https://github.com/mozilla-b2g/gaia/pull/9496 and adds the following:

* Move the message-list styles to message-cards.css as the styles are specific to that kind of card.
* Adjust the width of the gutter to 5em. This makes it so just the icon box is visible, as per https://www.dropbox.com/s/ww9fjv19csjn5md/04%20Email_Drawer.png. This was tested on an Unagi device.
* Removes the hardcoded TRAY_GUTTER_WIDTH check for transitioning back to message list, and instead detects if the tap was in the message list card. So if the width of the gutter changes in the future, it will just be a CSS change.

Comment 17

[James Burke [:jrburke]]

r=asuth in IRC.

Gaia merge commit:
https://github.com/mozilla-b2g/gaia/commit/cf64ad76a35f980eeb26d31e5aa0891bbf2b4247

from pull request:
https://github.com/mozilla-b2g/gaia/pull/9548

Comment 18

[Leo]

Requesting to upload this fix to v1-train.

Thanks.

Comment 19

[John Ford [:jhford] CET/CEST Berlin Time]

Uplifted cf64ad76a35f980eeb26d31e5aa0891bbf2b4247 to:
v1-train: 789d875adb960e4a9a1da263dac8ff8a8696ac80

Comment 20

[John Ford [:jhford] CET/CEST Berlin Time]

v1.1.0hd: 789d875adb960e4a9a1da263dac8ff8a8696ac80