From 511a58ded3a6e96ccf1b1052c4098f4d52d5fd30 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 24 Oct 2024 23:05:12 +0200
Subject: [PATCH] Add Badge component
---
app/View/Page/Header.php | 9 ++---
app/View/Page/Layout.php | 2 +-
app/View/Page/SettingLayout.php | 3 ++
app/View/Ui/Badge.php | 33 +++++++++++++++++++
.../Components/setting-view.blade.php | 4 ++-
5 files changed, 42 insertions(+), 9 deletions(-)
create mode 100644 app/View/Ui/Badge.php
diff --git a/app/View/Page/Header.php b/app/View/Page/Header.php
index 40fb1924..d99f3adb 100644
--- a/app/View/Page/Header.php
+++ b/app/View/Page/Header.php
@@ -7,7 +7,7 @@ use Illuminate\View\Component;
class Header extends Component
{
- public function __construct(public string $title, public bool $closeable = false)
+ public function __construct(public string $title)
{
}
@@ -15,17 +15,12 @@ class Header extends Component
{
return <<<'HTML'
<div class="h-16 px-6 flex items-center justify-between border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
- <div class="flex items-center space-x-2">
+ <div class="flex items-center space-x-4">
{{ $beforeTitle ?? ''}}
<span class="text-sm md:text-xl font-semibold leading-none text-white">{{ $title }}</span>
{{ $toolbar ?? '' }}
</div>
<div class="flex items-center space-x-4 ml-2">
- @if ($closeable)
- <a href="#" class="btn label btn-primary-light icon" wire:click="close">
- <ui-sprite class="w-3 h-3" src="close"></ui-sprite>
- </a>
- @endif
{{ $right ?? '' }}
</div>
</div>
diff --git a/app/View/Page/Layout.php b/app/View/Page/Layout.php
index 1d081eba..76ed437f 100644
--- a/app/View/Page/Layout.php
+++ b/app/View/Page/Layout.php
@@ -28,7 +28,7 @@ class Layout extends Component
<div class="grow bg-gray-900 flex flex-col duration-300 navbar:ml-60">
<x-page::header title="{{ session()->get('title') }}">
<x-slot:beforeTitle>
- <a href="#" class="mr-2 lg:hidden" wire:click.prevent="dispatch('toggle-sidebar')">
+ <a href="#" class="lg:hidden" wire:click.prevent="dispatch('toggle-sidebar')">
<x-ui::sprite src="menu" class="text-gray-100 w-5 h-5"></x-ui::sprite>
</a>
</x-slot:beforeTitle>
diff --git a/app/View/Page/SettingLayout.php b/app/View/Page/SettingLayout.php
index fb0498d6..2e40d536 100644
--- a/app/View/Page/SettingLayout.php
+++ b/app/View/Page/SettingLayout.php
@@ -27,6 +27,9 @@ class SettingLayout extends Component
<x-slot:right>
{{ $right ?? '' }}
</x-slot:right>
+ <x-slot:toolbar>
+ {{ $toolbar ?? '' }}
+ </x-slot:toolbar>
<div class="flex grow relative">
<x-ui::menulist :entries="$entries"></x-ui::menulist>
<div class="grow">
diff --git a/app/View/Ui/Badge.php b/app/View/Ui/Badge.php
new file mode 100644
index 00000000..5fa599b5
--- /dev/null
+++ b/app/View/Ui/Badge.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Ui;
+
+use App\View\Traits\HasColors;
+use Illuminate\View\Component;
+
+class Badge extends Component
+{
+
+ use HasColors;
+
+ public function __construct(
+ public string $icon,
+ public string $variant = 'primary'
+ ) {
+ }
+
+ public function render()
+ {
+ return <<<'HTML'
+ <button type="button" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 items-center rounded-full {{ $allColors($variant) }} hidden lg:flex">
+ <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
+ <span class="text-sm">
+ {{$slot}}
+ </span>
+ </button>
+ <button type="button" x-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 flex items-center rounded-full {{ $allColors($variant) }} lg:hidden">
+ <x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
+ </button>
+ HTML;
+ }
+}
diff --git a/modules/Mailgateway/Components/setting-view.blade.php b/modules/Mailgateway/Components/setting-view.blade.php
index bb3473e7..f2bb7b0d 100644
--- a/modules/Mailgateway/Components/setting-view.blade.php
+++ b/modules/Mailgateway/Components/setting-view.blade.php
@@ -1,4 +1,7 @@
<x-page::setting-layout :active="$settingClass">
+ <x-slot:toolbar>
+ <x-ui::badge wire:click.prevent="$dispatch('openModal', {component: 'modules.mailgateway.components.form', props: {}, title: 'Verbindung erstellen'})" icon="plus">Neue Verbindung</x-ui::badge>
+ </x-slot:toolbar>
<div>
<x-ui::table>
<thead>
@@ -9,7 +12,6 @@
<th>Aktion</th>
</thead>
- <x-ui::action wire:click.prevent="$dispatch('openModal', {component: 'modules.mailgateway.components.form', props: {}, title: 'Verbindung erstellen'})" icon="plus" variant="danger">Neu</x-ui::action>
@foreach ($data as $index => $gateway)
<tr wire:key="$index">