wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 10:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Fix dropdown icon markup to match Codex button"

Browse source
This commit is contained in:
jenkins-bot 2023-02-21 22:52:20 +00:00 committed by Gerrit Code Review
parent efe33d5d76 8db112ddb3
commit 874883536b
7 changed files with 16 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
includes/Components/VectorComponentDropdown.php
View file

@ -35,18 +35,19 @@ class VectorComponentDropdown implements VectorComponent {
* @inheritDoc
*/
public function getTemplateData(): array {
// FIXME: Stop hardcoding button and icon styles, this assumes all dropdowns with icons are icon buttons
// Not the case for the language dropdown, page tools, etc
$icon = $this->icon;
$headingClass = $icon ?
'mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet ' .
'mw-ui-icon-element mw-ui-icon-wikimedia-' . $icon : '';
'mw-checkbox-hack-button mw-ui-button mw-ui-quiet mw-ui-icon-element ' : '';
return [
'id' => $this->id,
'label' => $this->label,
'heading-class' => $headingClass,
'icon' => $this->icon,
'html-vector-menu-heading-attributes' => '',
'html-vector-menu-checkbox-attributes' => '',
'html-vector-heading-icon' => '',
'class' => $this->class,
'html-tooltip' => $this->tooltip,
'checkbox-class' => '',

8
includes/Components/VectorComponentLanguageDropdown.php
View file

@ -59,26 +59,24 @@ class VectorComponentLanguageDropdown implements VectorComponent {
// quiet instead of progressive. For this reason some default values
// should be updated for this case. (T316559)
if ( !$isSubjectPage ) {
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>';
$icon = 'language';
$label = '';
$headingClass = 'mw-ui-button mw-ui-quiet mw-portlet-lang-heading-empty';
$checkboxClass = 'mw-interlanguage-selector-empty';
} else {
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language-progressive"></span>';
$icon = 'language-progressive';
$label = $this->label;
$headingClass = 'mw-ui-button mw-ui-quiet '
. self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages );
$checkboxClass = 'mw-interlanguage-selector';
}
$dropdown = new VectorComponentDropdown( 'p-lang-btn', $label, $this->class );
$dropdownData = $dropdown->getTemplateData();
// override default heading class.
$dropdownData['heading-class'] = $headingClass;
// ext.uls.interface attaches click handler to this selector.
$dropdownData['checkbox-class'] = $checkboxClass;
// Override header icon (currently no way to do this using constructor)
$dropdownData['html-vector-heading-icon'] = $icon;
$dropdownData['icon'] = $icon;
$dropdownData['aria-label'] = $this->ariaLabel;
$dropdownData['is-language-selector-empty'] = !$isSubjectPage;

3
includes/templates/Dropdown/Open.mustache
View file

@ -29,7 +29,8 @@
aria-hidden="true"
{{{html-vector-menu-heading-attributes}}}
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
{{#icon}}{{>Icon}}{{/icon}}
<span class="vector-menu-heading-label">{{label}}</span>
</label>
{{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }}
<div class="vector-menu-content vector-dropdown-content">

1
includes/templates/Icon.mustache Normal file
View file

@ -0,0 +1 @@
<span class="mw-ui-icon mw-ui-icon-{{.}} mw-ui-icon-wikimedia-{{.}}"></span>

2
includes/templates/IconLink.mustache
View file

@ -1,5 +1,5 @@
<a data-mw="interface"
href="{{href}}"
{{{html-attributes}}}>{{!
}}{{#icon}}<span class="mw-ui-icon mw-ui-icon-{{.}} mw-ui-icon-wikimedia-{{.}}"></span>{{/icon}}<span>{{text}}</span>{{!
}}{{#icon}}{{>Icon}}{{/icon}}<span>{{text}}</span>{{!
}}</a>

2
resources/skins.vector.styles/components/Dropdown.less
View file

@ -8,7 +8,7 @@
* - more menu, user menu
* - ULS button in sticky header
*/
.vector-dropdown > .vector-menu-heading {
.vector-dropdown > .vector-menu-heading:not( .mw-ui-icon-element ) {
display: flex;
&:after {

14
resources/skins.vector.styles/components/UserLinks.less
View file

@ -16,7 +16,6 @@
position: relative;
justify-content: flex-end;
flex-shrink: 1;
font-size: @font-size-user-links;
.mw-ui-button {
// FIXME: Overrides mw-ui-button's `display: inline-block` property so that
@ -74,6 +73,8 @@
* Horizontal links menu - logged in and logged out.
*/
.vector-user-links .mw-portlet-vector-user-menu-overflow {
font-size: @font-size-user-links;
.vector-menu-content-list {
display: flex;
align-items: center;
@ -106,15 +107,8 @@
* Logged-in dropdown menu
*/
.vector-user-menu-logged-in {
.vector-menu-heading {
// override user menu (.mw-ui-icon) fixed width,
// so chevron beside icon is visible.
width: auto;
// and override again to ensure the user icon is 20px wide.
&:before {
width: auto;
}
.vector-menu-heading:after {
.mixin-vector-menu-heading-arrow();
}
}