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; 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 * Small label in the lower part of the donuts hole
@ -194,7 +194,7 @@ class Donut
*/ */
public function getLabelBigEyeCatching() public function getLabelBigEyeCatching()
{ {
return $this->labelBigEyeCatching; return $this->labelBigState !== null;
} }
/** /**
@ -206,7 +206,31 @@ class Donut
*/ */
public function setLabelBigEyeCatching($labelBigEyeCatching = true) 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; return $this;
} }
@ -332,9 +356,9 @@ class Donut
'attributes' => array( 'attributes' => array(
'aria-label' => $labelBig . ' ' . $labelSmall, 'aria-label' => $labelBig . ' ' . $labelSmall,
'href' => $this->getLabelBigUrl() ? $this->getLabelBigUrl()->getAbsoluteUrl() : null, 'href' => $this->getLabelBigUrl() ? $this->getLabelBigUrl()->getAbsoluteUrl() : null,
'class' => $this->labelBigEyeCatching 'class' => $this->labelBigState === null
? 'donut-label-big donut-label-big-eye-catching' ? 'donut-label-big'
: 'donut-label-big' : 'donut-label-big state-' . $this->labelBigState
), ),
'content' => $this->shortenLabel($labelBig) 'content' => $this->shortenLabel($labelBig)
); );

View File

@ -586,6 +586,7 @@ ul.tree li a.error:hover {
.donut-label-big { .donut-label-big {
.var(color, gray-light); .var(color, gray-light);
.fg-stateful();
font-size: 6em; font-size: 6em;
line-height: 0; line-height: 0;
text-anchor: middle; 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 { .donut-label-small {
.var(fill, text-color); .var(fill, text-color);
font-size: 1.2em; font-size: 1.2em;