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

Merge "Make ULS in header quiet progressive button"

This commit is contained in:
jenkins-bot 2021-12-09 17:33:03 +00:00 committed by Gerrit Code Review
parent 95284c7a8e b79290f5c9
commit d0116e07f9
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

@ -676,10 +676,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",