wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-30 18:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make ULS in header quiet progressive button

Browse source 
Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
This commit is contained in:
bwang 2021-12-01 13:49:12 -06:00 committed by Bernard Wang
parent ac917532fa
commit b79290f5c9
6 changed files with 43 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -17,6 +17,6 @@
},
{
"resourceModule": "skins.vector.icons",
"maxSize": "500 B"
"maxSize": "1 kB"
}
]

4
includes/SkinVector.php
View file

@ -649,10 +649,10 @@ class SkinVector extends SkinMustache {
'aria-label' => $this->getULSLabel( 'vector-language-button-aria-label' ),
// ext.uls.interface attaches click handler to this selector.
'checkbox-class' => ' mw-interlanguage-selector ',
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language-progressive' ),
'heading-class' =>
' vector-menu-heading ' .
' mw-ui-button mw-ui-quiet'
' mw-ui-button mw-ui-quiet mw-ui-progressive'
];
// Adds class to hide language button

4
resources/common/images/arrow-down-invert.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path fill="#ffffff" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 223 B

4
resources/common/images/arrow-down-progressive.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path fill="#36c" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 220 B

26
resources/skins.vector.styles/components/LanguageButton.less
View file

@ -34,6 +34,32 @@
&:after {
top: 0;
}
// T291286: Temporarily use progressive ULS style
&.mw-ui-progressive.mw-ui-quiet {
.mw-ui-icon:before {
// Ensure inverted language icon is white
opacity: 1;
}
&:after {
// Invert arrow color
background-image: url( ../common/images/arrow-down-progressive.svg );
opacity: 1;
}
}
}
input:active + .vector-menu-heading {
&.mw-ui-progressive.mw-ui-quiet {
.mw-ui-icon {
filter: brightness( 0 ) invert( 1 );
}
&:after {
background-image: url( ../common/images/arrow-down-invert.svg );
}
}
}
.vector-menu-content {

7
skin.json
View file

@ -183,7 +183,12 @@
"useDataURI": false,
"defaultColor": "#000",
"class": "ResourceLoaderOOUIIconPackModule",
"variants": [],
"variants": {
"progressive": {
"color": "#36c",
"global": true
}
},
"icons": [
"language",
"ellipsis",