jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "[fix][RTL] flip menu collapse button icon"

This commit is contained in:
jenkins-bot 2020-06-04 03:47:48 +00:00 committed by Gerrit Code Review
parent be3843e2a3 a0d2c2497b
commit 802ec0988b
5 changed files with 17 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
includes/templates/Sidebar.mustache
View File

@ -22,13 +22,7 @@
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{{/sidebar-visible}}
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
"
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}}

2
resources/skins.vector.icons/collapseHorizontal.svg → resources/skins.vector.icons/chevronHorizontal-ltr.svg
View File

@ -1,7 +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>
collapse
chevron
</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"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 261 B

After

Width:  |  Height:  |  Size: 260 B

7
resources/skins.vector.icons/chevronHorizontal-rtl.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 255 B

23
resources/skins.vector.js/skin.js
View File

@ -3,25 +3,6 @@
var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.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
* for focus and `aria-expanded`. Also, flip the icon image on click.
@ -35,11 +16,7 @@ function initSidebar( document ) {
checkboxHack.bindToggleOnClick( checkbox, button );
checkboxHack.bindUpdateAriaExpandedOnInput( checkbox );
button.addEventListener( 'click', updateMenuIcon.bind( undefined, checkbox, button ) );
checkbox.addEventListener( 'input', updateMenuIcon.bind( undefined, checkbox, button ) );
checkboxHack.updateAriaExpanded( checkbox );
updateMenuIcon( checkbox, button );
}
}

11
skin.json
View File

@ -60,10 +60,15 @@
},
"skins.vector.icons": {
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-wikimedia-{name}:before",
"selector": "{name}",
"images": {
"menu": "resources/skins.vector.icons/menu.svg",
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"
"#mw-navigation .mw-checkbox-hack-button:before": {
"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": {