mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-15 03:34:25 +00:00
68239ae344
Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
123 lines
2.7 KiB
PHP
123 lines
2.7 KiB
PHP
<?php
|
|
namespace MediaWiki\Skins\Vector\Components;
|
|
|
|
/**
|
|
* VectorSearchBox component
|
|
*/
|
|
class VectorComponentButton implements VectorComponent {
|
|
/** @var string */
|
|
private $label;
|
|
/** @var string|null */
|
|
private $icon;
|
|
/** @var string|null */
|
|
private $id;
|
|
/** @var string|null */
|
|
private $class;
|
|
/** @var array|null */
|
|
private $attributes;
|
|
/** @var string|null */
|
|
private $weight;
|
|
/** @var string|null */
|
|
private $action;
|
|
/** @var bool|null */
|
|
private $iconOnly;
|
|
/** @var string|null */
|
|
private $href;
|
|
|
|
/**
|
|
* @param string $label
|
|
* @param string|null $icon
|
|
* @param string|null $id
|
|
* @param string|null $class
|
|
* @param array|null $attributes
|
|
* @param string|null $weight
|
|
* @param string|null $action
|
|
* @param bool|null $iconOnly
|
|
* @param string|null $href
|
|
*/
|
|
public function __construct(
|
|
string $label,
|
|
$icon = null,
|
|
$id = null,
|
|
$class = null,
|
|
$attributes = [],
|
|
$weight = 'normal',
|
|
$action = 'default',
|
|
$iconOnly = false,
|
|
$href = null
|
|
) {
|
|
$this->label = $label;
|
|
$this->icon = $icon;
|
|
$this->id = $id;
|
|
$this->class = $class;
|
|
$this->attributes = $attributes;
|
|
$this->weight = $weight;
|
|
$this->action = $action;
|
|
$this->iconOnly = $iconOnly;
|
|
$this->href = $href;
|
|
|
|
// Weight can only be normal, primary, or quiet
|
|
if ( $this->weight != 'primary' && $this->weight != 'quiet' ) {
|
|
$this->weight = 'normal';
|
|
}
|
|
// Action can only be default, progressive or destructive
|
|
if ( $this->action != 'progressive' && $this->action != 'destructive' ) {
|
|
$this->action = 'default';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Constructs button classes based on the props
|
|
*/
|
|
private function getClasses(): string {
|
|
$classes = 'cdx-button';
|
|
if ( $this->href ) {
|
|
$classes .= ' cdx-button--fake-button cdx-button--fake-button--enabled';
|
|
}
|
|
switch ( $this->weight ) {
|
|
case 'primary':
|
|
$classes .= ' cdx-button--weight-primary';
|
|
break;
|
|
case 'quiet':
|
|
$classes .= ' cdx-button--weight-quiet';
|
|
break;
|
|
}
|
|
switch ( $this->action ) {
|
|
case 'progressive':
|
|
$classes .= ' cdx-button--action-progressive';
|
|
break;
|
|
case 'destructive':
|
|
$classes .= ' cdx-button--action-destructive';
|
|
break;
|
|
}
|
|
if ( $this->iconOnly ) {
|
|
$classes .= ' cdx-button--icon-only';
|
|
}
|
|
if ( $this->class ) {
|
|
$classes .= ' ' . $this->class;
|
|
}
|
|
return $classes;
|
|
}
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
public function getTemplateData(): array {
|
|
$arrayAttributes = [];
|
|
foreach ( $this->attributes as $key => $value ) {
|
|
if ( $value === null ) {
|
|
continue;
|
|
}
|
|
$arrayAttributes[] = [ 'key' => $key, 'value' => $value ];
|
|
}
|
|
return [
|
|
'label' => $this->label,
|
|
'icon' => $this->icon,
|
|
'id' => $this->id,
|
|
'class' => $this->getClasses(),
|
|
'href' => $this->href,
|
|
'array-attributes' => $arrayAttributes
|
|
];
|
|
}
|
|
}
|