Closed Bug 1073489 Opened 10 years ago Closed 10 years ago

[gaia-header] the "back" icon needs to be swapped in RTL documents

Categories

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

Product:
Firefox OS Graveyard
Component:
Gaia::Components
Platform:
x86_64
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: julienw, Assigned: wilsonpage)

References

Details

(Whiteboard: [rtl-meta])

Attachments

(2 files, 1 obsolete file)

pull-request (gaia-header:master)
(deleted), text/x-github-pull-request
gmarty
: review+
Details
pull-request (gaia:master)
(deleted), text/x-github-pull-request
julienw
: review+
Details
Since we moved to gaia-header, the "back" icon does not show the correct glyph in RTL situations. It's easy to see by adding "dir=rtl" in any <html> tag on any application. I don't know icon fonts enough to fix this myself :/ NI Wilson who knows a lot better than me :)
Flags: needinfo?(wilsonpage)
Or maybe we can use a rotate transform for this?
I think we should add the RTL back button instead of just using css to transform the existing one. Adding the icon to the font would be fixing the issue however rotating the existing one seems to me is just hiding our UI bug.. :)
Ahmed, I don't see why rotating would be bad :) (or actually, scaleX(-1) is better).
This case should be handled inside the gaia-header component. We need to check the `dir` value of the html element and update the header component accordingly. This would be super easy if we had the `:host-context()` selector, but this hasn't been implemented yet. So this is simple when the component first loads, but trickier if we want to keep the component in sync. We need to know two things: 1. What is the `dir` value of the document when the component is created. 2. When the dir value changes. Is each of the above cases, we'll need to set a class/attribute inside the shadow-dom and use the alternative 'forward' glyph, or perform the `scaleX(-1)` transform.
Flags: needinfo?(wilsonpage) → needinfo?(felash)
Wilson, did you add a NI for me because you expect that I'll work on this? Maybe I will, but not right now :)
Flags: needinfo?(felash)
But otherwise yeah, I agree with your reasoning here.
(In reply to Julien Wajsberg [:julienw] from comment #7) > But otherwise yeah, I agree with your reasoning here. Sorry I should have been clearer. Do you know how we can we detect when the `dir` attribute changes on the html elmement?
Component: Gaia → Gaia::Components
Only thing I can think of is adding a Mutation Observer. I don't know enough about web components to decide how we can make a component's behavior change depending on what happens outside :/ It could be an interesting question to ask on dev-webapi. Another possibility could be to listen to mozL10n's events, but I think we don't want our gaia-header to depend on this, right?
Depends on: 1082541
Attached file pull-request (gaia-header:master) (deleted) —
Attachment #8505421 - Flags: review?(gmarty)
Assignee: nobody → wilsonpage
Comment on attachment 8505421 [details] pull-request (gaia-header:master) - Component keeps itself in sync with <html> 'dir' attribute using MutationObservers - 'back' icon is replaced by 'forward' in 'rtl' mode. Flexbox default take care of reversing direction.
Comment on attachment 8505421 [details] pull-request (gaia-header:master) r+ after taking this discussion offline and agreeing on action points with Wilson.
Attachment #8505421 - Flags: review?(gmarty) → review+
Attached file pull-request (gaia:master) (deleted) —
Attachment #8507850 - Flags: review?(felash)
Attached image cascading issue (obsolete) (deleted) —
Looks like we have an issue in some applications that override the icon. This example is Gallery but I guess we have other examples. Should we make Gallery (and other similar app) provide another font family instead of doing this? A quick fix would be to fix the various CSS files that override this, but is this sustainable in the long term?
Comment on attachment 8507850 [details] pull-request (gaia:master) We can't regress other applications that overrides the icon :/
Attachment #8507850 - Flags: review?(felash)
(In reply to Julien Wajsberg [:julienw] from comment #14) > Created attachment 8507875 [details] > cascading issue > > Looks like we have an issue in some applications that override the icon. > This example is Gallery but I guess we have other examples. > > Should we make Gallery (and other similar app) provide another font family > instead of doing this? > > A quick fix would be to fix the various CSS files that override this, but is > this sustainable in the long term? It's never been possible for any apps to override the action button icon of <gaia-header>. If the built in buttons ('back', 'menu', 'close') don't suit the user, they are able to provide their own <button> elements in the light-dom. Content/styling of user buttons is up to them.
Comment on attachment 8507850 [details] pull-request (gaia:master) r=me, this actually works as intended. The issue I saw in Gallery is actually existing in master. Sorry about this !
Attachment #8507850 - Flags: review+
Attachment #8507875 - Attachment is obsolete: true
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Mass Edit: adding the [rtl-meta]
Whiteboard: [rtl-meta]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: