Add ULS to sticky header
- Rework Icon template into Button template to support all button variants - Update ULS helper functions in SkinVector - Update StickyHeader template to use the new Button template - Update Storybook Bug: T289815 Depends-on: Iba6cbbd6c6e48a1abfda342421822e3ff2715362 Change-Id: I718b3e05a988e20beb82d599e4168d497fa4c299
This commit is contained in:
parent
e33d2aa335
commit
62149265e9
|
@ -46,6 +46,7 @@ class SkinVector extends SkinMustache {
|
||||||
private const MENU_TYPE_PORTAL = 3;
|
private const MENU_TYPE_PORTAL = 3;
|
||||||
private const NO_ICON = [
|
private const NO_ICON = [
|
||||||
'icon' => 'none',
|
'icon' => 'none',
|
||||||
|
'is-quiet' => true,
|
||||||
'class' => 'sticky-header-icon'
|
'class' => 'sticky-header-icon'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -309,10 +310,10 @@ class SkinVector extends SkinMustache {
|
||||||
return [
|
return [
|
||||||
'title' => 'Audre Lorde',
|
'title' => 'Audre Lorde',
|
||||||
'heading' => 'Introduction',
|
'heading' => 'Introduction',
|
||||||
'primary-action' => 'Primary action',
|
'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
|
||||||
'data-icon-start' => self::NO_ICON,
|
'data-button-start' => self::NO_ICON,
|
||||||
'data-icon-end' => self::NO_ICON,
|
'data-button-end' => self::NO_ICON,
|
||||||
'data-icons' => [
|
'data-buttons' => [
|
||||||
self::NO_ICON, self::NO_ICON, self::NO_ICON, self::NO_ICON
|
self::NO_ICON, self::NO_ICON, self::NO_ICON, self::NO_ICON
|
||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
@ -500,20 +501,41 @@ class SkinVector extends SkinMustache {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Combines class and other HTML data required to create the button
|
* Returns ULS button label
|
||||||
* for the languages in header feature with the existing language portletData.
|
|
||||||
*
|
*
|
||||||
* @param array $portletData returned by SkinMustache
|
* @return string
|
||||||
* @return array enhanced $portletData
|
|
||||||
*/
|
*/
|
||||||
private function createULSLanguageButton( $portletData ) {
|
private function getULSLabel() {
|
||||||
$label = $this->msg( 'vector-language-button-label' )
|
$label = $this->msg( 'vector-language-button-label' )
|
||||||
->numParams( count( $this->getLanguagesCached() ) )
|
->numParams( count( $this->getLanguagesCached() ) )
|
||||||
->escaped();
|
->escaped();
|
||||||
|
return $label;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates button data for the ULS button in the sticky header
|
||||||
|
*
|
||||||
|
* @return array
|
||||||
|
*/
|
||||||
|
private function getULSButtonData() {
|
||||||
|
return [
|
||||||
|
'id' => 'p-lang-btn-sticky-header',
|
||||||
|
'class' => 'mw-interlanguage-selector',
|
||||||
|
'is-quiet' => true,
|
||||||
|
'label' => $this->getULSLabel(),
|
||||||
|
'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates portlet data for the ULS button in the header
|
||||||
|
*
|
||||||
|
* @return array
|
||||||
|
*/
|
||||||
|
private function getULSPortletData() {
|
||||||
$languageButtonData = [
|
$languageButtonData = [
|
||||||
'id' => 'p-lang-btn',
|
'id' => 'p-lang-btn',
|
||||||
'label' => $label,
|
'label' => $this->getULSLabel(),
|
||||||
// ext.uls.interface attaches click handler to this selector.
|
// ext.uls.interface attaches click handler to this selector.
|
||||||
'checkbox-class' => ' mw-interlanguage-selector ',
|
'checkbox-class' => ' mw-interlanguage-selector ',
|
||||||
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
|
||||||
|
@ -528,7 +550,7 @@ class SkinVector extends SkinMustache {
|
||||||
$languageButtonData['class'] = ' mw-portlet-empty';
|
$languageButtonData['class'] = ' mw-portlet-empty';
|
||||||
}
|
}
|
||||||
|
|
||||||
return array_merge( $portletData, $languageButtonData );
|
return $languageButtonData;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -574,7 +596,7 @@ class SkinVector extends SkinMustache {
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
|
if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
|
||||||
$portletData = $this->createULSLanguageButton( $portletData );
|
$portletData = array_merge( $portletData, $this->getULSPortletData() );
|
||||||
}
|
}
|
||||||
$class = $portletData['class'];
|
$class = $portletData['class'];
|
||||||
$portletData['class'] = trim( "$class $extraClasses[$type]" );
|
$portletData['class'] = trim( "$class $extraClasses[$type]" );
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
{{#href}}<a href="{{.}}"{{/href}}
|
||||||
|
{{^href}}<button{{/href}}
|
||||||
|
id="{{id}}"
|
||||||
|
class="mw-ui-button {{#is-quiet}}mw-ui-quiet{{/is-quiet}} {{#icon}}mw-ui-icon mw-ui-icon-element mw-ui-icon-{{.}}{{/icon}} {{class}}">
|
||||||
|
{{{html-vector-button-icon}}}
|
||||||
|
<span>{{label}}</span>
|
||||||
|
{{#href}}</a>{{/href}}
|
||||||
|
{{^href}}</button>{{/href}}
|
|
@ -1,3 +0,0 @@
|
||||||
<a {{#href}}href="{{.}}"{{/href}} class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-{{icon}} {{class}}">
|
|
||||||
{{#label}}<span>{{*}}</span>{{/label}}
|
|
||||||
</a>
|
|
|
@ -2,9 +2,9 @@
|
||||||
class="vector-sticky-header {{#is-visible}}vector-sticky-header-visible{{/is-visible}}">
|
class="vector-sticky-header {{#is-visible}}vector-sticky-header-visible{{/is-visible}}">
|
||||||
<div class="vector-sticky-header-start">
|
<div class="vector-sticky-header-start">
|
||||||
<div class="vector-sticky-header-icon-start">
|
<div class="vector-sticky-header-icon-start">
|
||||||
{{#data-icon-start}}
|
{{#data-button-start}}
|
||||||
{{>Icon}}
|
{{>Button}}
|
||||||
{{/data-icon-start}}
|
{{/data-button-start}}
|
||||||
</div>
|
</div>
|
||||||
<div class="vector-sticky-header-context-bar">
|
<div class="vector-sticky-header-context-bar">
|
||||||
<div class="vector-sticky-header-context-bar-primary">{{title}}</div>
|
<div class="vector-sticky-header-context-bar-primary">{{title}}</div>
|
||||||
|
@ -13,17 +13,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="vector-sticky-header-end">
|
<div class="vector-sticky-header-end">
|
||||||
<div class="vector-sticky-header-icons">
|
<div class="vector-sticky-header-icons">
|
||||||
{{#data-icons}}
|
{{#data-buttons}}
|
||||||
{{>Icon}}
|
{{>Button}}
|
||||||
{{/data-icons}}
|
{{/data-buttons}}
|
||||||
</div>
|
|
||||||
<div class="mw-ui-button">
|
|
||||||
{{primary-action}}
|
|
||||||
</div>
|
</div>
|
||||||
|
{{#data-primary-action}}
|
||||||
|
{{>Button}}
|
||||||
|
{{/data-primary-action}}
|
||||||
<div class="vector-sticky-header-icon-end">
|
<div class="vector-sticky-header-icon-end">
|
||||||
{{#data-icon-end}}
|
{{#data-button-end}}
|
||||||
{{>Icon}}
|
{{>Button}}
|
||||||
{{/data-icon-end}}
|
{{/data-button-end}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -1,25 +1,32 @@
|
||||||
import template from '!!raw-loader!../includes/templates/StickyHeader.mustache';
|
import template from '!!raw-loader!../includes/templates/StickyHeader.mustache';
|
||||||
import Icon from '!!raw-loader!../includes/templates/Icon.mustache';
|
import Button from '!!raw-loader!../includes/templates/Button.mustache';
|
||||||
|
|
||||||
const NO_ICON = {
|
const NO_ICON = {
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
|
'is-quiet': true,
|
||||||
class: 'sticky-header-icon'
|
class: 'sticky-header-icon'
|
||||||
};
|
};
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
title: 'Audre Lorde',
|
title: 'Audre Lorde',
|
||||||
heading: 'Introduction',
|
heading: 'Introduction',
|
||||||
'primary-action': 'Primary action',
|
|
||||||
'is-visible': true,
|
'is-visible': true,
|
||||||
'data-icon-start': NO_ICON,
|
'data-primary-action': {
|
||||||
'data-icon-end': NO_ICON,
|
id: 'p-lang-btn-sticky-header',
|
||||||
'data-icons': [
|
class: 'mw-interlanguage-selector',
|
||||||
|
'is-quiet': true,
|
||||||
|
label: '196 languages',
|
||||||
|
'html-vector-button-icon': `<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>`
|
||||||
|
},
|
||||||
|
'data-button-start': NO_ICON,
|
||||||
|
'data-button-end': NO_ICON,
|
||||||
|
'data-buttons': [
|
||||||
NO_ICON, NO_ICON, NO_ICON, NO_ICON
|
NO_ICON, NO_ICON, NO_ICON, NO_ICON
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
export const STICKY_HEADER_TEMPLATE_PARTIALS = {
|
export const STICKY_HEADER_TEMPLATE_PARTIALS = {
|
||||||
Icon
|
Button
|
||||||
};
|
};
|
||||||
|
|
||||||
export { template, data };
|
export { template, data };
|
||||||
|
|
Loading…
Reference in New Issue