[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
This commit is contained in:
parent
fd250975c4
commit
a0d2c2497b
|
@ -22,13 +22,7 @@
|
||||||
aria-controls="mw-panel">
|
aria-controls="mw-panel">
|
||||||
<label
|
<label
|
||||||
id="mw-sidebar-button"
|
id="mw-sidebar-button"
|
||||||
class="
|
class="mw-checkbox-hack-button mw-ui-icon mw-ui-icon-element"
|
||||||
mw-checkbox-hack-button
|
|
||||||
mw-ui-icon
|
|
||||||
mw-ui-icon-element
|
|
||||||
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
|
|
||||||
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
|
|
||||||
"
|
|
||||||
for="mw-sidebar-checkbox"
|
for="mw-sidebar-checkbox"
|
||||||
data-event-name="ui.sidebar">
|
data-event-name="ui.sidebar">
|
||||||
{{msg-vector-action-toggle-sidebar}}
|
{{msg-vector-action-toggle-sidebar}}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
<title>
|
<title>
|
||||||
collapse
|
chevron
|
||||||
</title>
|
</title>
|
||||||
<path d="M9 2l1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z"/>
|
<path d="M9 2l1.3 1.3L3.7 10l6.6 6.7L9 18l-8-8 8-8zm8.5 0L19 3.3 12.2 10l6.7 6.7-1.4 1.3-8-8 8-8z"/>
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 261 B After Width: | Height: | Size: 260 B |
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<title>
|
||||||
|
chevron
|
||||||
|
</title>
|
||||||
|
<path d="M11 2 9.7 3.3 16.3 10 9.7 16.7 11 18 19 10ZM2.5 2 1 3.3 7.8 10 1.1 16.7 2.5 18l8-8z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 255 B |
|
@ -3,25 +3,6 @@
|
||||||
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' );
|
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' );
|
||||||
var vector = require( '../skins.vector.legacy.js/vector.js' );
|
var vector = require( '../skins.vector.legacy.js/vector.js' );
|
||||||
|
|
||||||
/**
|
|
||||||
* Update the state of the menu icon to be an expanded or collapsed icon.
|
|
||||||
* @param {HTMLInputElement} checkbox
|
|
||||||
* @param {HTMLElement} button
|
|
||||||
* @return {void}
|
|
||||||
*/
|
|
||||||
function updateMenuIcon( checkbox, button ) {
|
|
||||||
button.classList.remove(
|
|
||||||
checkbox.checked ?
|
|
||||||
'mw-ui-icon-wikimedia-menu' :
|
|
||||||
'mw-ui-icon-wikimedia-collapseHorizontal'
|
|
||||||
);
|
|
||||||
button.classList.add(
|
|
||||||
checkbox.checked ?
|
|
||||||
'mw-ui-icon-wikimedia-collapseHorizontal' :
|
|
||||||
'mw-ui-icon-wikimedia-menu'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
|
* Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
|
||||||
* for focus and `aria-expanded`. Also, flip the icon image on click.
|
* for focus and `aria-expanded`. Also, flip the icon image on click.
|
||||||
|
@ -35,11 +16,7 @@ function initSidebar( document ) {
|
||||||
checkboxHack.bindToggleOnClick( checkbox, button );
|
checkboxHack.bindToggleOnClick( checkbox, button );
|
||||||
checkboxHack.bindUpdateAriaExpandedOnInput( checkbox );
|
checkboxHack.bindUpdateAriaExpandedOnInput( checkbox );
|
||||||
|
|
||||||
button.addEventListener( 'click', updateMenuIcon.bind( undefined, checkbox, button ) );
|
|
||||||
checkbox.addEventListener( 'input', updateMenuIcon.bind( undefined, checkbox, button ) );
|
|
||||||
|
|
||||||
checkboxHack.updateAriaExpanded( checkbox );
|
checkboxHack.updateAriaExpanded( checkbox );
|
||||||
updateMenuIcon( checkbox, button );
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
11
skin.json
11
skin.json
|
@ -60,10 +60,15 @@
|
||||||
},
|
},
|
||||||
"skins.vector.icons": {
|
"skins.vector.icons": {
|
||||||
"class": "ResourceLoaderImageModule",
|
"class": "ResourceLoaderImageModule",
|
||||||
"selector": ".mw-ui-icon-wikimedia-{name}:before",
|
"selector": "{name}",
|
||||||
"images": {
|
"images": {
|
||||||
"menu": "resources/skins.vector.icons/menu.svg",
|
"#mw-navigation .mw-checkbox-hack-button:before": {
|
||||||
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
|
"file": {
|
||||||
|
"ltr": "resources/skins.vector.icons/chevronHorizontal-ltr.svg",
|
||||||
|
"rtl": "resources/skins.vector.icons/chevronHorizontal-rtl.svg"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"#mw-navigation .mw-checkbox-hack-checkbox:not( :checked ) ~ .mw-checkbox-hack-button:before": "resources/skins.vector.icons/menu.svg"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"skins.vector.styles.responsive": {
|
"skins.vector.styles.responsive": {
|
||||||
|
|
Loading…
Reference in New Issue