Introduce new widget EmptyStateBar

Icinga · Sep 13, 2023 · 87a0a7d · 87a0a7d
1 parent 42ff531
commit 87a0a7d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/asset/css/empty-state.less b/asset/css/empty-state.less
@@ -0,0 +1,11 @@
+.empty-state {
+  color: @empty-state-color;
+}
+
+.empty-state-bar {
+  padding: 1em;
+  text-align: center;
+
+  .rounded-corners();
+  background-color: @empty-state-bar-bg;
+}
diff --git a/asset/css/variables.less b/asset/css/variables.less
@@ -29,6 +29,7 @@
 @base-gray: #c4c4c4;
 @base-gray-light: #5c5c5c;
 @base-gray-lighter: #4b4b4b;
+@base-gray-semilight: #888;
 @base-disabled: #9a9a9a;
 
 @base-primary-color: #00C3ED;
@@ -121,6 +122,9 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
+@empty-state-color: @base-gray-semilight;
+@empty-state-bar-bg: @base-gray-lighter;
+
 @empty-state-bg-in-lists: @base-gray-lighter;
 @list-item-title-hover-color: @base-primary-color;
 @list-item-separation-bg: @base-gray-light;
@@ -130,6 +134,7 @@
     --base-gray: #819398;
     --base-gray-light: #d0d3da;
     --base-gray-lighter: #e8ecef;
+    --base-gray-semilight: #94a5a6;
     --base-disabled: var(--base-gray-light);
 
     --base-remove-bg: @state-critical;
@@ -204,6 +209,9 @@
     --schedule-element-fields-disabled-selected-bg: var(--base-gray-light);
     --schedule-element-keyboard-note-bg: var(--base-gray-light);
 
+    --empty-state-color: var(--base-gray-semilight);
+    --empty-state-bar-bg: var(--base-gray-lighter);
+
     --empty-state-bg-in-lists: var(--base-gray-lighter);
     --list-item-title-hover-color: var(--base-primary-color);
     --list-item-separation-bg: var(--base-gray-light);

diff --git a/src/Widget/EmptyStateBar.php b/src/Widget/EmptyStateBar.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace ipl\Web\Widget;
+
+use ipl\Html\BaseHtmlElement;
+
+class EmptyStateBar extends BaseHtmlElement
+{
+    /** @var mixed Content */
+    protected $content;
+
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => ['empty-state', 'empty-state-bar']];
+
+    /**
+     * Create an empty list
+     *
+     * @param mixed $content
+     */
+    public function __construct($content)
+    {
+        $this->content = $content;
+    }
+
+    protected function assemble(): void
+    {
+        $this->add($this->content);
+    }
+}