From 9af1339ef4f8c22e272db4fab0a7503132c26f52 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Tue, 30 Apr 2024 20:10:25 +0100 Subject: [PATCH 1/3] update styling of toast icon when larger height --- resources/assets/css/_toasts.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/assets/css/_toasts.css b/resources/assets/css/_toasts.css index e81d2422..37f2ceee 100644 --- a/resources/assets/css/_toasts.css +++ b/resources/assets/css/_toasts.css @@ -8,7 +8,7 @@ } .toast-icon { - @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-14; + @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-full; } .toast-button, From 011dcbf714fa80392996beb346e3766bd5ca7fb7 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Tue, 30 Apr 2024 20:11:39 +0100 Subject: [PATCH 2/3] update toast message output & add hide spinner property --- resources/views/toast.blade.php | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/resources/views/toast.blade.php b/resources/views/toast.blade.php index edcad8bd..63cda2d6 100644 --- a/resources/views/toast.blade.php +++ b/resources/views/toast.blade.php @@ -1,10 +1,11 @@ @props ([ 'type' => 'info', 'title' => null, - 'message' => '', + 'message' => null, 'wireClose' => false, 'alpineClose' => false, 'target' => null, + 'hideSpinner' => false, ]) @php @@ -27,13 +28,19 @@ ], $type); @endphp -
class('toast')->class($toastClass) }}> +
class(['toast', $toastClass]) }}> {{ $title ?? trans('ui::toasts.'.$type) }} -
{{ $message }}
+
+ @if ($message) + {{ $message }} + @else + {!! $slot !!} + @endif +
- + @unless ($hideSpinner) + + @endunless
From 1b861e5f25c5b5d662d7cc2c82eb56b3884066d9 Mon Sep 17 00:00:00 2001 From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Date: Wed, 1 May 2024 08:15:03 +0100 Subject: [PATCH 3/3] allow titled toast message variant --- resources/assets/css/_toasts.css | 28 +++++++++++++++++++---- resources/views/toast.blade.php | 39 +++++++++++++++++++++++++++----- 2 files changed, 56 insertions(+), 11 deletions(-) diff --git a/resources/assets/css/_toasts.css b/resources/assets/css/_toasts.css index 37f2ceee..ff5c4454 100644 --- a/resources/assets/css/_toasts.css +++ b/resources/assets/css/_toasts.css @@ -3,6 +3,10 @@ @apply relative inline-flex flex-col sm:flex-row items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden; } + .toast__titled { + @apply relative inline-flex flex-col items-center max-w-4xl text-sm select-none text-theme-secondary-900 dark:text-theme-secondary-200 dark:bg-theme-secondary-800 rounded-xl overflow-hidden; + } + .toast-body { @apply p-4 text-left mr-4 sm:mt-0; } @@ -11,11 +15,20 @@ @apply space-x-2 flex items-center px-4 sm:px-0 py-2 sm:py-0 sm:justify-center flex-shrink-0 text-white w-full sm:w-12 sm:h-full; } + .toast-icon__titled { + @apply space-x-2 flex items-center px-4 py-2 flex-shrink-0 text-white w-full; + } + .toast-button, .toast-spinner { @apply absolute sm:relative top-0 sm:top-auto right-0 sm:right-auto m-2.5 sm:my-0 sm:ml-0 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600; } + .toast-button__titled, + .toast-spinner__titled { + @apply absolute top-0 right-0 m-2.5 flex items-center justify-center flex-shrink-0 mr-4 rounded text-theme-secondary-900 dark:text-white sm:dark:text-theme-secondary-600; + } + .toast-info { @apply bg-theme-primary-50; } @@ -32,19 +45,24 @@ @apply bg-theme-success-50; } - .toast-info .toast-icon { + .toast-info .toast-icon, + .toast-info .toast-icon__titled { @apply bg-theme-primary-100 dark:bg-theme-primary-700 text-theme-primary-700 dark:text-white; } - .toast-warning .toast-icon { + .toast-warning .toast-icon, + .toast-warning .toast-icon__titled { @apply bg-theme-warning-100 dark:bg-theme-warning-700 text-theme-warning-900 dark:text-white; } - .toast-danger .toast-icon { + .toast-danger .toast-icon, + .toast-danger .toast-icon__titled { @apply bg-theme-danger-100 dark:bg-theme-danger-500 text-theme-danger-700 dark:text-white; } - .toast-hint .toast-icon { + .toast-hint .toast-icon, + .toast-hint .toast-icon__titled { @apply bg-theme-hint-100 dark:bg-theme-hint-700 text-theme-hint-700 dark:text-white; } - .toast-success .toast-icon { + .toast-success .toast-icon, + .toast-success .toast-icon__titled { @apply bg-theme-success-100 dark:bg-theme-success-700 text-theme-success-700 dark:text-white; } diff --git a/resources/views/toast.blade.php b/resources/views/toast.blade.php index 63cda2d6..dd7f84fe 100644 --- a/resources/views/toast.blade.php +++ b/resources/views/toast.blade.php @@ -6,6 +6,7 @@ 'alpineClose' => false, 'target' => null, 'hideSpinner' => false, + 'alwaysShowTitle' => false, ]) @php @@ -28,10 +29,30 @@ ], $type); @endphp -
class(['toast', $toastClass]) }}> - - - {{ $title ?? trans('ui::toasts.'.$type) }} +
class([ + 'toast' => ! $alwaysShowTitle, + 'toast__titled' => $alwaysShowTitle, + $toastClass, + ]) }} +> + ! $alwaysShowTitle, + 'toast-icon__titled' => $alwaysShowTitle, + ])> + + + ! $alwaysShowTitle, + ])> + {{ $title ?? trans('ui::toasts.'.$type) }} +
@@ -46,7 +67,10 @@ @if ($wireClose) wire:click="{{ $wireClose }}" @endif @if ($alpineClose) @click="{{ $alpineClose }}" @endif type="button" - class="toast-button" + @class([ + 'toast-button' => ! $alwaysShowTitle, + 'toast-button__titled' => $alwaysShowTitle, + ]) @if ($target) wire:loading.remove wire:target="{{ $target }}" @@ -57,7 +81,10 @@ class="toast-button" @unless ($hideSpinner)