feat: delete action hint over read-only term-input entries

Icinga · Feb 19, 2025 · d66cbf7 · d66cbf7
1 parent 003c51b
commit d66cbf7
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 6 deletions.
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
@@ -75,6 +75,17 @@ fieldset:disabled .term-input-area [data-drag-initiator] {
   }
 }
 
+.delete-action > .delete-action-content {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  background: var(--search-term-delete-action-bg, @search-term-delete-action-bg);
+  color: var(--search-term-delete-action-color, @search-term-delete-action-color);
+  border: none;
+  border-radius: 0.25em;
+}
+
 .search-suggestions {
   background: var(--suggestions-bg, @suggestions-bg);
   color: var(--suggestions-color, @suggestions-color);
@@ -164,7 +175,7 @@ fieldset:disabled .term-input-area [data-drag-initiator] {
   label {
     position: relative;
     display: inline-block;
-    min-width: 2em;
+    min-width: 8em;
     height: 100%;
 
     &::after,
@@ -273,12 +284,19 @@ fieldset:disabled .term-input-area [data-drag-initiator] {
     outline-offset: ~"calc(-@{labelPad} + 3px)";
   }
 
+  &:not(.vertical) {
+    --delete-action-height: ~"calc(2em + 1.75px)";
+  }
+
   &.read-only {
     [data-index] {
       position: relative;
 
+      &:not(:hover) > .delete-action {
+        visibility: hidden;
+      }
+
       input {
-        padding-left: 1.5em;
         text-align: center;
         cursor: pointer;
 
@@ -305,6 +323,29 @@ fieldset:disabled .term-input-area [data-drag-initiator] {
         top: 85%;
         left: .5em;
       }
+
+      .delete-action {
+        visibility: visible;
+        display: inline-flex;
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        top: 0;
+        left: 0;
+        height: var(--delete-action-height, 100%);
+
+        > .delete-action-content {
+          height: 100%;
+          flex-grow: 1;
+          min-width: 0;
+
+          > span.delete-action-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        }
+      }
     }
   }
 }

diff --git a/asset/css/variables.less b/asset/css/variables.less
@@ -66,6 +66,8 @@
 @search-term-highlighted-bg: @base-primary-bg;
 @search-term-highlighted-color: @default-text-color-inverted;
 @search-term-drag-border-color: @base-gray;
+@search-term-delete-action-bg: @state-critical;
+@search-term-delete-action-color: @default-text-color-inverted;
 
 @search-condition-remove-bg: @state-critical;
 @search-condition-remove-color: @default-text-color-inverted;
@@ -162,6 +164,8 @@
     --search-term-highlighted-bg: var(--primary-button-bg);
     --search-term-highlighted-color: var(--default-text-color-inverted);
     --search-term-drag-border-color: var(--base-gray);
+    --search-term-delete-action-color: var(--base-remove-bg);
+    --search-term-delete-action-color-bg: var(--default-text-color-inverted);
 
     --search-condition-remove-bg: var(--base-remove-bg);
     --search-condition-remove-color: var(--default-text-color-inverted);

diff --git a/asset/js/widget/TermInput.js b/asset/js/widget/TermInput.js
@@ -188,7 +188,16 @@ define(["../notjQuery", "../vendor/Sortable", "BaseInput"], function ($, Sortabl
 
             if (this.readOnly) {
                 label.firstChild.readOnly = true;
-                label.appendChild($.render('<i class="icon fa-trash fa"></i>'));
+                label.appendChild(
+                    $.render(
+                        '<div class="delete-action">' +
+                            '<div class="delete-action-content">' +
+                                '<i class="icon fa-trash fa"></i>' +
+                                '<span class="delete-action-label">' + this.termContainer.getAttribute('delete-action-label') + '</span>' +
+                            '</div>' +
+                        '</div>'
+                    )
+                );
                 label.appendChild($.render('<span class="invalid-reason"></span>'));
             }
 

diff --git a/src/FormElement/TermInput.php b/src/FormElement/TermInput.php
@@ -384,7 +384,8 @@ protected function termContainer(): TermContainer
     {
         if ($this->termContainer === null) {
             $this->termContainer = (new TermContainer($this))
-                ->setAttribute('id', $this->getName() . '-terms');
+                ->setAttribute('id', $this->getName() . '-terms')
+                ->setAttribute('delete-action-label', $this->translate('Remove'));
         }
 
         return $this->termContainer;

diff --git a/src/FormElement/TermInput/TermContainer.php b/src/FormElement/TermInput/TermContainer.php
@@ -4,12 +4,17 @@
 
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
+use ipl\Html\Html;
 use ipl\Html\HtmlElement;
+use ipl\Html\Text;
+use ipl\I18n\Translation;
 use ipl\Web\FormElement\TermInput;
 use ipl\Web\Widget\Icon;
 
 class TermContainer extends BaseHtmlElement
 {
+    use Translation;
+
     protected $tag = 'div';
 
     protected $defaultAttributes = ['class' => 'terms'];
@@ -57,9 +62,30 @@ protected function assemble()
             );
             if ($this->input->getReadOnly()) {
                 $label->addHtml(
-                    new Icon('trash'),
-                    new HtmlElement('span', Attributes::create(['class' => 'invalid-reason']))
+                    new HtmlElement(
+                        'div',
+                        Attributes::create([
+                            'class' => 'delete-action'
+                        ]),
+                        new HtmlElement(
+                            'div',
+                            Attributes::create([
+                                'class' => 'delete-action-content'
+                            ]),
+                            ...Html::wantHtmlList([
+                                new Icon('trash'),
+                                new HtmlElement(
+                                    'span',
+                                    Attributes::create([
+                                        'class' => 'delete-action-label'
+                                    ]),
+                                    new Text($this->getAttribute('delete-action-label')->getValue())
+                                )
+                            ])
+                        )
+                    )
                 );
+                $label->addHtml(new HtmlElement('span', Attributes::create(['class' => 'invalid-reason'])));
             }
 
             if ($this->tag === 'ol') {