Add EmptyStateBar widget (#204)

Icinga · Sep 13, 2023 · bc19c67 · bc19c67
2 parents 42ff531 + 6cba501
commit bc19c67
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 26 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/list/item-list.less b/asset/css/list/item-list.less
@@ -2,11 +2,6 @@
 
 .item-list {
   list-style-type: none;
-
-  > .empty-state {
-    .rounded-corners();
-    background-color: @empty-state-bg-in-lists;
-  }
 }
 
 // Layout
@@ -55,10 +50,8 @@
     }
   }
 
-  > .empty-state {
+  > .empty-state-bar {
     margin: 0 1em;
-    padding: 1em;
-    text-align: center;
   }
 }
 

diff --git a/asset/css/list/item-table.less b/asset/css/list/item-table.less
@@ -4,13 +4,6 @@ ul.item-table {
   list-style-type: none;
 }
 
-div.item-table {
-  > .empty-state {
-    .rounded-corners();
-    background-color: @empty-state-bg-in-lists;
-  }
-}
-
 .table-row {
   color: @default-text-color-light;
 
@@ -87,10 +80,8 @@ ul.item-table {
 }
 
 div.item-table {
-  > .empty-state {
+  > .empty-state-bar {
     margin: 0 1em;
-    padding: 1em;
-    text-align: center;
   }
 }
 

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,7 +122,9 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
-@empty-state-bg-in-lists: @base-gray-lighter;
+@empty-state-color: @base-gray-semilight;
+@empty-state-bar-bg: @base-gray-lighter;
+
 @list-item-title-hover-color: @base-primary-color;
 @list-item-separation-bg: @base-gray-light;
 
@@ -130,6 +133,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,7 +208,9 @@
     --schedule-element-fields-disabled-selected-bg: var(--base-gray-light);
     --schedule-element-keyboard-note-bg: var(--base-gray-light);
 
-    --empty-state-bg-in-lists: var(--base-gray-lighter);
+    --empty-state-color: var(--base-gray-semilight);
+    --empty-state-bar-bg: 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/Common/BaseItemList.php b/src/Common/BaseItemList.php
@@ -6,7 +6,7 @@
 use ipl\Html\BaseHtmlElement;
 use ipl\Orm\ResultSet;
 use ipl\Stdlib\BaseFilter;
-use ipl\Web\Widget\EmptyState;
+use ipl\Web\Widget\EmptyStateBar;
 
 /**
  * Base class for item lists
@@ -67,7 +67,7 @@ protected function assemble(): void
 
         if ($this->isEmpty()) {
             $this->setTag('div');
-            $this->addHtml(new EmptyState(t('No items found.')));
+            $this->addHtml(new EmptyStateBar(t('No items found.')));
         }
     }
 }
diff --git a/src/Common/BaseItemTable.php b/src/Common/BaseItemTable.php
@@ -6,7 +6,7 @@
 use ipl\Html\BaseHtmlElement;
 use ipl\Orm\ResultSet;
 use ipl\Stdlib\BaseFilter;
-use ipl\Web\Widget\EmptyState;
+use ipl\Web\Widget\EmptyStateBar;
 
 /**
  * Base class for item tables
@@ -82,7 +82,7 @@ protected function assemble(): void
 
         if ($this->isEmpty()) {
             $this->setTag('div');
-            $this->addHtml(new EmptyState(t('No items found.')));
+            $this->addHtml(new EmptyStateBar(t('No items found.')));
         }
     }
 }
diff --git a/src/Common/BaseOrderedItemList.php b/src/Common/BaseOrderedItemList.php
@@ -2,7 +2,7 @@
 
 namespace ipl\Web\Common;
 
-use ipl\Web\Widget\EmptyState;
+use ipl\Web\Widget\EmptyStateBar;
 
 /**
  * @method BaseOrderedListItem getItemClass()
@@ -25,7 +25,7 @@ protected function assemble(): void
 
         if ($this->isEmpty()) {
             $this->setTag('div');
-            $this->addHtml(new EmptyState(t('No items found.')));
+            $this->addHtml(new EmptyStateBar(t('No items found.')));
         }
     }
 }
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);
+    }
+}