golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Fix misconception on icon coloring 

It's advisable to rely on default icon color and set it's color
by opacity. With that we've got a better playing field to respond
to user interaction with icon color changes, not relying on
several icons at once for different states and also being
backwards-compatible for a variety of browsers.

Change-Id: Iaff869774007ed962104d704103f0392a3516f4f
Bug: T246419
This commit is contained in:
Volker E 2020-05-29 14:52:36 -07:00 committed by Stephen Niedzielski
parent ba05e760b9
commit fd250975c4
4 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/templates/Sidebar.mustache
View File

@ -26,8 +26,8 @@
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}}
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu{{/sidebar-visible}}
"
for="mw-sidebar-checkbox"
data-event-name="ui.sidebar">

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

@ -12,13 +12,13 @@ var vector = require( '../skins.vector.legacy.js/vector.js' );
function updateMenuIcon( checkbox, button ) {
button.classList.remove(
checkbox.checked ?
'mw-ui-icon-wikimedia-menu-base20' :
'mw-ui-icon-wikimedia-collapseHorizontal-base20'
'mw-ui-icon-wikimedia-menu' :
'mw-ui-icon-wikimedia-collapseHorizontal'
);
button.classList.add(
checkbox.checked ?
'mw-ui-icon-wikimedia-collapseHorizontal-base20' :
'mw-ui-icon-wikimedia-menu-base20'
'mw-ui-icon-wikimedia-collapseHorizontal' :
'mw-ui-icon-wikimedia-menu'
);
}

10
resources/skins.vector.styles/Sidebar.less
View File

@ -36,6 +36,7 @@
height: @size-sidebar-button;
border: 1px solid transparent;
border-radius: @border-radius-base;
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base, opacity @transition-duration-base; );
&:before {
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
@ -45,14 +46,17 @@
height: 100%;
// Center it horizontally.
margin: 0 12px;
opacity: 0.87;
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
opacity: 0.67;
}
&:hover {
background-color: @background-color-frameless--hover;
}
.transition( background-color @transition-duration-base, border-color @transition-duration-base, box-shadow @transition-duration-base; );
&:before {
opacity: 1;
}
}
}
.mw-checkbox-hack-checkbox:focus ~ .mw-checkbox-hack-button {

3
skin.json
View File

@ -60,8 +60,7 @@
},
"skins.vector.icons": {
"class": "ResourceLoaderImageModule",
"selector": ".mw-ui-icon-wikimedia-{name}-base20:before",
"defaultColor": "#54595d",
"selector": ".mw-ui-icon-wikimedia-{name}:before",
"images": {
"menu": "resources/skins.vector.icons/menu.svg",
"collapseHorizontal": "resources/skins.vector.icons/collapseHorizontal.svg"