From 87a0a7db427546d8eaeb93b40ff9708100a8e98a Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 13 Sep 2023 09:29:44 +0200 Subject: [PATCH 1/2] Introduce new widget `EmptyStateBar` --- asset/css/empty-state.less | 11 +++++++++++ asset/css/variables.less | 8 ++++++++ src/Widget/EmptyStateBar.php | 30 ++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 asset/css/empty-state.less create mode 100644 src/Widget/EmptyStateBar.php diff --git a/asset/css/empty-state.less b/asset/css/empty-state.less new file mode 100644 index 00000000..6291055f --- /dev/null +++ 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 index 58cf0036..91215f71 100644 --- 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 new file mode 100644 index 00000000..7794af2b --- /dev/null +++ b/src/Widget/EmptyStateBar.php @@ -0,0 +1,30 @@ + ['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); + } +} From 6cba50106f4750816ad6e6a2163865f80f6aac42 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Wed, 13 Sep 2023 09:30:08 +0200 Subject: [PATCH 2/2] Utilize `EmptyStateBar` where applicable --- asset/css/list/item-list.less | 9 +-------- asset/css/list/item-table.less | 11 +---------- asset/css/variables.less | 2 -- src/Common/BaseItemList.php | 4 ++-- src/Common/BaseItemTable.php | 4 ++-- src/Common/BaseOrderedItemList.php | 4 ++-- 6 files changed, 8 insertions(+), 26 deletions(-) diff --git a/asset/css/list/item-list.less b/asset/css/list/item-list.less index 7f1a7721..c5c0bd28 100644 --- 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 index db9170a8..68b7d2f1 100644 --- 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 index 91215f71..78c8194a 100644 --- a/asset/css/variables.less +++ b/asset/css/variables.less @@ -125,7 +125,6 @@ @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; @@ -212,7 +211,6 @@ --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/Common/BaseItemList.php b/src/Common/BaseItemList.php index 530cc151..ce0946c8 100644 --- 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 index 6cf61f76..f6ca2126 100644 --- 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 index e5308704..c141fc5a 100644 --- 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.'))); } } }