diff --git a/asset/css/compat.less b/asset/css/compat.less index 1188c7e9..0a4426d1 100644 --- a/asset/css/compat.less +++ b/asset/css/compat.less @@ -80,9 +80,13 @@ form.icinga-form .control-group { width: 0; } - input[type="text"] { + input { flex: unset; width: 100%; + + &[type="button"] { + background-color: @default-input-bg; + } } } } diff --git a/asset/css/search-base.less b/asset/css/search-base.less index e4af764b..22348de9 100644 --- a/asset/css/search-base.less +++ b/asset/css/search-base.less @@ -209,6 +209,28 @@ outline-width: 3px; outline-offset: ~"calc(-@{labelPad} + 3px)"; } + + &.read-only { + label { + position: relative; + + input[type="button"] { + padding-right: 1.5em; + + + i { + position: absolute; + display: none; + top: .5em; + right: .5em; + } + } + + input[type="button"]:hover + i, + input[type="button"]:focus + i { + display: revert; + } + } + } } .search-suggestions { diff --git a/src/FormElement/TermInput.php b/src/FormElement/TermInput.php index 184be1da..9310ffe6 100644 --- a/src/FormElement/TermInput.php +++ b/src/FormElement/TermInput.php @@ -40,6 +40,9 @@ class TermInput extends FieldsetElement /** @var bool Whether term direction is vertical */ protected $verticalTermDirection = false; + /** @var bool Whether registered terms are read-only */ + protected $readOnly = false; + /** @var array Changes to transmit to the client */ protected $changes = []; @@ -103,6 +106,30 @@ public function getTermDirection(): ?string return $this->verticalTermDirection ? 'vertical' : null; } + /** + * Set whether registered terms are read-only + * + * @param bool $state + * + * @return $this + */ + public function setReadOnly(bool $state = true): self + { + $this->readOnly = $state; + + return $this; + } + + /** + * Get whether registered terms are read-only + * + * @return bool + */ + public function getReadOnly(): bool + { + return $this->readOnly; + } + /** * Set terms * @@ -415,6 +442,7 @@ public function getValueAttribute() 'data-with-multi-completion' => true, 'data-no-auto-submit-on-remove' => true, 'data-term-direction' => $this->getTermDirection(), + 'data-read-only-terms' => $this->getReadOnly(), 'data-data-input' => '#' . $dataInputId, 'data-term-input' => '#' . $termInputId, 'data-term-container' => '#' . $termContainer->getAttribute('id')->getValue(), @@ -436,7 +464,11 @@ public function getValueAttribute() $mainInput->prependWrapper((new HtmlElement( 'div', - Attributes::create(['class' => ['term-input-area', $this->getTermDirection()]]), + Attributes::create(['class' => [ + 'term-input-area', + $this->getTermDirection(), + $this->getReadOnly() ? 'read-only' : null + ]]), $termContainer, new HtmlElement('label', null, $mainInput) )));