Donut: allow big label to indicate a specific state

refs #4494
This commit is contained in:
Alexander A. Klimov 2021-08-02 18:29:02 +02:00
parent bbd36d5f83
commit 8b651d5f13
2 changed files with 33 additions and 12 deletions

View File

@ -23,11 +23,11 @@ class Donut
protected $labelBigUrl;
/**
* Whether the big label shall be eye-catching
* The state the big label shall indicate
*
* @var bool
* @var string|null
*/
protected $labelBigEyeCatching = true;
protected $labelBigState = 'critical';
/**
* Small label in the lower part of the donuts hole
@ -194,7 +194,7 @@ class Donut
*/
public function getLabelBigEyeCatching()
{
return $this->labelBigEyeCatching;
return $this->labelBigState !== null;
}
/**
@ -206,7 +206,31 @@ class Donut
*/
public function setLabelBigEyeCatching($labelBigEyeCatching = true)
{
$this->labelBigEyeCatching = $labelBigEyeCatching;
$this->labelBigState = $labelBigEyeCatching ? 'critical' : null;
return $this;
}
/**
* Get the state the big label shall indicate
*
* @return string|null
*/
public function getLabelBigState()
{
return $this->labelBigState;
}
/**
* Set the state the big label shall indicate
*
* @param string|null $labelBigState
*
* @return $this
*/
public function setLabelBigState($labelBigState)
{
$this->labelBigState = $labelBigState;
return $this;
}
@ -332,9 +356,9 @@ class Donut
'attributes' => array(
'aria-label' => $labelBig . ' ' . $labelSmall,
'href' => $this->getLabelBigUrl() ? $this->getLabelBigUrl()->getAbsoluteUrl() : null,
'class' => $this->labelBigEyeCatching
? 'donut-label-big donut-label-big-eye-catching'
: 'donut-label-big'
'class' => $this->labelBigState === null
? 'donut-label-big'
: 'donut-label-big state-' . $this->labelBigState
),
'content' => $this->shortenLabel($labelBig)
);

View File

@ -586,6 +586,7 @@ ul.tree li a.error:hover {
.donut-label-big {
.var(color, gray-light);
.fg-stateful();
font-size: 6em;
line-height: 0;
text-anchor: middle;
@ -594,10 +595,6 @@ ul.tree li a.error:hover {
}
}
.donut-label-big-eye-catching {
.var(color, color-critical);
}
.donut-label-small {
.var(fill, text-color);
font-size: 1.2em;