a0d2c2497b
Fix the icon button directionality in right-to-left languages.
Previously, the button was hardcoded to support left-to-right only.
- Replace the skin.vector.icons' `.mw-ui-icon-wikimedia-{name}:before`
`selector` in skin.json with a placeholder, `{name}`. I don't think
this selector should be needed but it seems to be erroneous not have
one. I believe this issue of wanting a null selector was encountered
in Minerva or MobileFrontend but am unable to locate the past
discourse.
- Add check and unchecked menu button selectors to skin.json that set
the appropriate background image. This shards some of the styles out
of Less and into ResourceLoader-land but it's worthwhile.
- Revise the name of horizontal collapse icon to describe its form not
function, "collapseHorizontal" to "chevronHorizontal". This has been
an established convention that was missed a couple patches back.
- Add a flipped chevronHorizontal for RTL. I used Inkscape to do the
flip and tried to match the style of the original by hand. Feel free
to edit further.
- Drop the now unnecessary icon flipping JavaScript and initial Mustache
class. This enables a real CSS-only solution for the icons.
Bug: T246419
Change-Id: I60f65b3c595bf18d309b667d9a0b066691b90c97
39 lines
1.3 KiB
Plaintext
39 lines
1.3 KiB
Plaintext
{{!
|
|
@typedef object emphasized-sidebar-action
|
|
@prop string href
|
|
@prop string text
|
|
|
|
string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
|
|
MenuDefinition data-portals-first
|
|
MenuDefinition[] array-portals-rest
|
|
emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
|
|
string msg-vector-action-toggle-sidebar The label used by the sidebar button.
|
|
boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
|
|
true.
|
|
}}
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="mw-sidebar-checkbox"
|
|
class="mw-checkbox-hack-checkbox"
|
|
role="button"
|
|
{{#sidebar-visible}}checked{{/sidebar-visible}}
|
|
aria-labelledby="mw-sidebar-button"
|
|
aria-controls="mw-panel">
|
|
<label
|
|
id="mw-sidebar-button"
|
|
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
|
|
for="mw-sidebar-checkbox"
|
|
data-event-name="ui.sidebar">
|
|
{{msg-vector-action-toggle-sidebar}}
|
|
</label>
|
|
<div id="mw-panel" class="mw-sidebar mw-checkbox-hack-target">
|
|
{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
|
|
{{#data-emphasized-sidebar-action}}
|
|
<div class="mw-sidebar-action">
|
|
<a class="mw-sidebar-action-link" title="{{title}}" href="{{href}}">{{text}}</a>
|
|
</div>
|
|
{{/data-emphasized-sidebar-action}}
|
|
{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
|
|
</div>
|