Add term input (#139)

Icinga · Apr 28, 2023 · 2a855a8 · 2a855a8
2 parents bcaadc1 + 07f85ac
commit 2a855a8
Show file tree

Hide file tree

Showing 10 changed files with 878 additions and 96 deletions.
diff --git a/asset/css/compat.less b/asset/css/compat.less
@@ -68,3 +68,17 @@ form.icinga-form .control-group {
     margin-right: 1em;
   }
 }
+
+// TermInput styles
+
+form.icinga-form .control-group {
+  > .term-input-area {
+    flex: 1 1 auto;
+    width: auto;
+
+    input[type="text"] {
+      flex: unset;
+      width: 100%;
+    }
+  }
+}
diff --git a/asset/css/search-bar.less b/asset/css/search-bar.less
@@ -45,27 +45,6 @@
     }
   }
 
-  // Scrollbar style
-  .filter-input-area {
-    // Firefox
-    scrollbar-width: thin;
-    scrollbar-color: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg) transparent;
-
-    &::-webkit-scrollbar {
-      display: none;
-      height: .5em;
-    }
-
-    &:hover::-webkit-scrollbar {
-      display: initial;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: .25em;
-      background: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg);
-    }
-  }
-
   // Term styles
   .filter-condition {
     button {
@@ -137,15 +116,6 @@
     }
   }
 
-  [data-index] input:invalid {
-    background-color: var(--search-term-invalid-bg, @search-term-invalid-bg);
-    color: var(--search-term-invalid-color, @search-term-invalid-color);
-  }
-
-  [data-index] input:disabled {
-    background-color: var(--search-term-disabled-bg, @search-term-disabled-bg);
-  }
-
   .column input {
     .rounded-corners(.4em);
   }
@@ -174,12 +144,6 @@
     color: var(--search-term-highlighted-color, @search-term-highlighted-color);
   }
 
-  .selected input {
-    background-color: var(--search-term-selected-bg, @search-term-selected-bg);
-    color: var(--search-term-selected-color, @search-term-selected-color);
-    font-style: italic;
-  }
-
   ul.comma-separated {
     display: inline;
     padding: 0;
@@ -208,56 +172,10 @@
   }
 
   .filter-input-area {
-    overflow: auto hidden;
-    overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit
-    display: flex;
-    width: 100%;
-    height: ~"calc(2em + 10px)"; // Search bar height + approximate scrollbar height
     padding: 2/12em; // 2 (px) desired / default font size (px)
-
-    // Lets inputs grow based on their contents, Inspired by https://css-tricks.com/auto-growing-inputs-textareas/
-    label {
-      position: relative;
-      display: inline-block;
-      min-width: 2em;
-
-      &::after,
-      input {
-        width: auto;
-        padding: 0 .5em;
-        resize: none;
-      }
-
-      input {
-        width: 100%;
-        position: absolute;
-        line-height: 20/12; // 20 (px) desired / default font size (px)
-      }
-
-      &::after {
-        height: 0;
-        content: attr(data-label);
-        visibility: hidden;
-        white-space: nowrap;
-        padding: 0 7/12em; // 7 (px) desired / default font size (px)
-      }
-    }
-
-    > label {
-      flex: 1 0 auto;
-
-      &::after,
-      input {
-        max-width: none;
-        min-width: 8em;
-      }
-    }
   }
 
   .terms {
-    display: inline;
-    flex-shrink: 0;
-
     .filter-chain,
     .filter-condition {
       display: inline;
@@ -292,8 +210,6 @@
     }
 
     label {
-      margin-right: 1px;
-
       &.logical_operator,
       &.grouping_operator_open,
       &.grouping_operator_close {

diff --git a/asset/css/search-base.less b/asset/css/search-base.less
@@ -1,4 +1,46 @@
 // Style
+
+.search-bar .filter-input-area,
+.term-input-area {
+  // Scrollbar style
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg) transparent;
+
+  &::-webkit-scrollbar {
+    display: none;
+    height: .5em;
+  }
+
+  &:hover::-webkit-scrollbar {
+    display: initial;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: .25em;
+    background: var(--searchbar-scrollbar-bg, @searchbar-scrollbar-bg);
+  }
+}
+
+.search-bar,
+.term-input-area {
+  [data-index] input:invalid {
+    background-color: var(--search-term-invalid-bg, @search-term-invalid-bg);
+    color: var(--search-term-invalid-color, @search-term-invalid-color);
+  }
+
+  [data-index] input:disabled {
+    background-color: var(--search-term-disabled-bg, @search-term-disabled-bg);
+  }
+
+  .selected input {
+    background-color: var(--search-term-selected-bg, @search-term-selected-bg);
+    color: var(--search-term-selected-color, @search-term-selected-color);
+    font-style: italic;
+  }
+}
+
 .search-suggestions {
   background: var(--suggestions-bg, @suggestions-bg);
   border: 1px solid var(--suggestions-border-color, @suggestions-border-color);
@@ -73,6 +115,73 @@
 }
 
 // Layout
+.search-bar .filter-input-area,
+.term-input-area {
+  overflow: auto hidden;
+  overflow-x: overlay; // Not invalid, but proprietary feature by chrome/webkit
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: ~"calc(2em + 10px)"; // Search bar height + approximate scrollbar height
+
+  // Lets inputs grow based on their contents, Inspired by https://css-tricks.com/auto-growing-inputs-textareas/
+  label {
+    position: relative;
+    display: inline-block;
+    min-width: 2em;
+    height: 100%;
+
+    &::after,
+    input {
+      width: auto;
+      padding: 0 .5em;
+      resize: none;
+    }
+
+    input {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      line-height: 20/12; // 20 (px) desired / default font size (px)
+    }
+
+    &::after {
+      height: 0;
+      content: attr(data-label);
+      visibility: hidden;
+      white-space: nowrap;
+      padding: 0 7/12em; // 7 (px) desired / default font size (px)
+    }
+  }
+
+  > label {
+    flex: 1 0 auto;
+
+    &::after,
+    input {
+      max-width: none;
+      min-width: 8em;
+    }
+  }
+
+  > .terms {
+    display: inline;
+    flex-shrink: 0;
+
+    label {
+      margin-right: 1px;
+    }
+  }
+}
+
+.term-input-area {
+  label input:focus {
+    @labelPad: 7/12em;
+    outline-width: 3px;
+    outline-offset: ~"calc(-@{labelPad} + 3px)";
+  }
+}
+
 .search-suggestions {
   z-index: 2; // Required so that nothing else can overlap it (such as opaque elements and the impact overlay)
   position: absolute;

diff --git a/src/Control/SearchBar/ValidatedOperator.php b/src/Control/SearchBar/ValidatedOperator.php
@@ -68,12 +68,12 @@ public function toMetaData()
         return $data;
     }
 
-    public function setSearchValue($searchValue)
+    public function setSearchValue(string $searchValue): ValidatedTerm
     {
         throw new LogicException('Operators cannot be changed');
     }
 
-    public function setLabel($label)
+    public function setLabel(string $label): ValidatedTerm
     {
         throw new LogicException('Operators cannot be changed');
     }

diff --git a/src/Control/SearchBar/ValidatedTerm.php b/src/Control/SearchBar/ValidatedTerm.php
@@ -71,21 +71,21 @@ public function hasBeenChanged()
     /**
      * Get the search value
      *
-     * @return mixed
+     * @return string
      */
-    public function getSearchValue()
+    public function getSearchValue(): string
     {
         return $this->searchValue;
     }
 
     /**
      * Set the search value
      *
-     * @param mixed $searchValue
+     * @param string $searchValue
      *
      * @return $this
      */
-    public function setSearchValue($searchValue)
+    public function setSearchValue(string $searchValue): self
     {
         $this->searchValue = $searchValue;
         $this->changed = true;
@@ -98,7 +98,7 @@ public function setSearchValue($searchValue)
      *
      * @return string
      */
-    public function getLabel()
+    public function getLabel(): ?string
     {
         return $this->label;
     }
@@ -110,7 +110,7 @@ public function getLabel()
      *
      * @return $this
      */
-    public function setLabel($label)
+    public function setLabel(string $label): self
     {
         $this->label = (string) $label;
         $this->changed = true;
@@ -123,7 +123,7 @@ public function setLabel($label)
      *
      * @return string
      */
-    public function getMessage()
+    public function getMessage(): ?string
     {
         return $this->message;
     }
@@ -135,7 +135,7 @@ public function getMessage()
      *
      * @return $this
      */
-    public function setMessage($message)
+    public function setMessage(string $message): self
     {
         $this->message = $message;
 
@@ -149,7 +149,7 @@ public function setMessage($message)
      *
      * @return string
      */
-    public function getPattern()
+    public function getPattern(): string
     {
         if ($this->pattern === null) {
             return sprintf(self::DEFAULT_PATTERN, $this->getSearchValue());
@@ -165,7 +165,7 @@ public function getPattern()
      *
      * @return $this
      */
-    public function setPattern($pattern)
+    public function setPattern(string $pattern): self
     {
         $this->pattern = (string) $pattern;