1087060 - Forward and back arrows should not overlap.

Status: VERIFIED FIXED

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

Description

[Stephany Wilkes]

Flame, 35.0a1, build ID 20141008040203.

* Go to Gallery.
* Click on single image to view full size.
* Observe that image is split, but also that forward/back icons are directly on top of one another and overlap.

Expected: Icons do not overlap.

Reminder: In an RTL language, arrows that point to the right will actually go back in time, while arrows that point left will go forward in time, to most recent. This will be documented in UX RTL patterns but is worth noting here.

Comment 1

[Punam Dahiya [:pdahiya]]

In ltr fullscreen view we have one back arrow icon on top left that takes user back to list view. For rtl back icon should move to top right and point to the right. 

Stephany, Rob - Can you please help confirm the expected fix here? Thanks!

Comment 2

[Stephany Wilkes]

Attachment: BiDi_20141030.pdf

Arabic language pattern attached.

Actually, the only issue here was the overlap. As shown in the pattern, the back button and its direction will not change, in the interest of staying consistent with transitions, the Flow UX model, task manager, and edge gestures. Please flag me again if you have any questions about the attached spec.

Comment 3

[Punam Dahiya [:pdahiya]]

Attachment: PR with fix of bug 1087060

Hi Wilson, Amy
Please review attached patch that fixes fullscreen view tiny back button in RTL mode. The overlap is seen because of background image that shows up in RTL mode. Fix has removed background image and switches data-icon to forward in RTL mode. Thanks!

Comment 4

[Wilson Page [:wilsonpage]]

Comment on attachment 8522417 [details] [review]
PR with fix of bug 1087060

This fixes the issue with the old background-image showing up. Although in comment 2 Stephany says that the direction should *not* be changed. This means that the button should remain using the 'back' icon.

The back button should also remain on the *left* hand side of the screen, but I believe that is out of scope of this patch.

Please also delete any PNG assets that are no longer used.

Comment 5

[Rob MacDonald [:robmac]]

I should add a more recent version of the spec is located on box.com in this folder.

https://mozilla.box.com/bidi-22

Steph posted the latest version on Nov 13.

Comment 6

[Punam Dahiya [:pdahiya]]

Comment on attachment 8522417 [details] [review]
PR with fix of bug 1087060

Thanks Rob for sharing most recent specs. 

Hi Wilson

As per new specs back button do not change in RTL. Patch is updated to remove RTL specific css for fullscreen-back-button-tiny which was causing overlap and deleting unused image files.

Since fullscreen view UI stay as is, I am calling ui-review request. Thanks!

Comment 7

[Punam Dahiya [:pdahiya]]

(In reply to Punam Dahiya from comment #6)

> Since fullscreen view UI stay as is, I am calling ui-review request. Thanks!

sorry, typo calling ~ cancelling

Comment 8

[Wilson Page [:wilsonpage]]

Comment on attachment 8522417 [details] [review]
PR with fix of bug 1087060

Cool, let's land it!

Comment 9

[Punam Dahiya [:pdahiya]]

Tried multiple Gaia-try run fo Gb test, failure is unrelated to the css fixes in this patch

Patch landed on master
https://github.com/mozilla-b2g/gaia/commit/7a5f20c13fa36bd896d3e8a6484785badfc2fb8a

Comment 10

[Alissa（leave from Mozilla）]

Test case has been added in moztrap:
https://moztrap.mozilla.org/manage/case/15913/

Comment 11

[Shine(Leave from Mozilla)]

Attachment: Flame_master_verify1.png

This problem is verified as "pass" on latest build of Flame master and N5 master by the STR in comment 0.
Actual result: The back button remain the same as that in LTR language and nothing overlap.
See attachment: Flame_master_verify1.png
Rate: 0/5

Device information:
Flame master (Pass)
Build ID               20150719010204
Gaia Revision          3fac3ed7b8c887351098ffc677769ddc36abb3d0
Gaia Date              2015-07-17 17:53:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/9c919ce631ea
Gecko Version          42.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150719.050227
Firmware Date          Sun Jul 19 05:02:38 EDT 2015
Bootloader             L1TC000118D0

N5 master (Pass)
Build ID               20150719010204
Gaia Revision          3fac3ed7b8c887351098ffc677769ddc36abb3d0
Gaia Date              2015-07-17 17:53:41
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/9c919ce631ea
Gecko Version          42.0a1
Device Name            hammerhead
Firmware(Release)      5.1
Firmware(Incremental)  eng.cltbld.20150719.044428
Firmware Date          Sun Jul 19 04:44:47 EDT 2015
Bootloader             HHZ12f