wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 18:29:49 +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 * @inheritDoc
*/ */
public function getTemplateData(): array { 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; $icon = $this->icon;
$headingClass = $icon ? $headingClass = $icon ?
'mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet ' . 'mw-checkbox-hack-button mw-ui-button mw-ui-quiet mw-ui-icon-element ' : '';
'mw-ui-icon-element mw-ui-icon-wikimedia-' . $icon : '';
return [ return [
'id' => $this->id, 'id' => $this->id,
'label' => $this->label, 'label' => $this->label,
'heading-class' => $headingClass, 'heading-class' => $headingClass,
'icon' => $this->icon,
'html-vector-menu-heading-attributes' => '', 'html-vector-menu-heading-attributes' => '',
'html-vector-menu-checkbox-attributes' => '', 'html-vector-menu-checkbox-attributes' => '',
'html-vector-heading-icon' => '',
'class' => $this->class, 'class' => $this->class,
'html-tooltip' => $this->tooltip, 'html-tooltip' => $this->tooltip,
'checkbox-class' => '', '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 // quiet instead of progressive. For this reason some default values
// should be updated for this case. (T316559) // should be updated for this case. (T316559)
if ( !$isSubjectPage ) { if ( !$isSubjectPage ) {
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>'; $icon = 'language';
$label = ''; $label = '';
$headingClass = 'mw-ui-button mw-ui-quiet mw-portlet-lang-heading-empty'; $headingClass = 'mw-ui-button mw-ui-quiet mw-portlet-lang-heading-empty';
$checkboxClass = 'mw-interlanguage-selector-empty'; $checkboxClass = 'mw-interlanguage-selector-empty';
} else { } else {
$icon = '<span class="mw-ui-icon mw-ui-icon-wikimedia-language-progressive"></span>'; $icon = 'language-progressive';
$label = $this->label; $label = $this->label;
$headingClass = 'mw-ui-button mw-ui-quiet ' $headingClass = 'mw-ui-button mw-ui-quiet '
. self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages ); . self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages );
$checkboxClass = 'mw-interlanguage-selector'; $checkboxClass = 'mw-interlanguage-selector';
} }
$dropdown = new VectorComponentDropdown( 'p-lang-btn', $label, $this->class ); $dropdown = new VectorComponentDropdown( 'p-lang-btn', $label, $this->class );
$dropdownData = $dropdown->getTemplateData(); $dropdownData = $dropdown->getTemplateData();
// override default heading class. // override default heading class.
$dropdownData['heading-class'] = $headingClass; $dropdownData['heading-class'] = $headingClass;
// ext.uls.interface attaches click handler to this selector. // ext.uls.interface attaches click handler to this selector.
$dropdownData['checkbox-class'] = $checkboxClass; $dropdownData['checkbox-class'] = $checkboxClass;
// Override header icon (currently no way to do this using constructor) $dropdownData['icon'] = $icon;
$dropdownData['html-vector-heading-icon'] = $icon;
$dropdownData['aria-label'] = $this->ariaLabel; $dropdownData['aria-label'] = $this->ariaLabel;
$dropdownData['is-language-selector-empty'] = !$isSubjectPage; $dropdownData['is-language-selector-empty'] = !$isSubjectPage;

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

@ -29,7 +29,8 @@
aria-hidden="true" aria-hidden="true"
{{{html-vector-menu-heading-attributes}}} {{{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> </label>
{{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }} {{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }}
<div class="vector-menu-content vector-dropdown-content"> <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" <a data-mw="interface"
href="{{href}}" href="{{href}}"
{{{html-attributes}}}>{{! {{{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> }}</a>

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

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

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

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