mediawiki-skins-Vector/includes/templates/Sidebar.mustache
Stephen Niedzielski a0d2c2497b [fix][RTL] flip menu collapse button icon
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
2020-06-03 17:09:38 -06:00

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>