mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-30 13:47:42 +00:00
5195f5fd67
Add a menu button that toggles the panel's (also referred to as a sidebar) collapse state. When the screen is wide enough, animate the transition. The menu icon from OOUI is copied into Vector to avoid two ResourceLoaders modules (collapseHorizontal icon isn't ready for inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule doesn't support images). Additional polish and collaboration is needed but this patch fulfills the scope of its referenced task. Bug: T246419 Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2 Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
45 lines
1.5 KiB
Plaintext
45 lines
1.5 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-toggle-sidebar-button-label 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
|
|
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal-base20{{/sidebar-visible}}
|
|
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu-base20{{/sidebar-visible}}
|
|
"
|
|
for="mw-sidebar-checkbox"
|
|
data-event-name="ui.sidebar">
|
|
{{msg-toggle-sidebar-button-label}}
|
|
</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>
|