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-checkbox-hack-button
mw-ui-icon mw-ui-icon
mw-ui-icon-element mw-ui-icon-element
{{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal-base20{{/sidebar-visible}} {{#sidebar-visible}}mw-ui-icon-wikimedia-collapseHorizontal{{/sidebar-visible}}
{{^sidebar-visible}}mw-ui-icon-wikimedia-menu-base20{{/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">

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 ) { function updateMenuIcon( checkbox, button ) {
button.classList.remove( button.classList.remove(
checkbox.checked ? checkbox.checked ?
'mw-ui-icon-wikimedia-menu-base20' : 'mw-ui-icon-wikimedia-menu' :
'mw-ui-icon-wikimedia-collapseHorizontal-base20' 'mw-ui-icon-wikimedia-collapseHorizontal'
); );
button.classList.add( button.classList.add(
checkbox.checked ? checkbox.checked ?
'mw-ui-icon-wikimedia-collapseHorizontal-base20' : 'mw-ui-icon-wikimedia-collapseHorizontal' :
'mw-ui-icon-wikimedia-menu-base20' 'mw-ui-icon-wikimedia-menu'
); );
} }

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

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

3
skin.json
View File

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