-
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added bg-colors and button-colors to config
Added translation settings to config New Notification Trait New Notification Blade component
- Loading branch information
1 parent
d330f04
commit f988e7c
Showing
8 changed files
with
145 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <div | ||
| class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end" | ||
| style="margin-top: 50px" xmlns:x-bind="http://www.w3.org/1999/xhtml" | ||
| xmlns:x-transition="http://www.w3.org/1999/xhtml" xmlns:x-on="http://www.w3.org/1999/xhtml"> | ||
| <div x-cloak x-data="{ show: {{ $show ?? 'false' }}, message: '{{ $message ?? '' }}', bg: '{{ $bg ?? 'bg-aurora-green'}}' }" | ||
| x-on:notify.window=" | ||
| show = true; | ||
| message = $event.detail.message; | ||
| bg = $event.detail.bg; | ||
| setTimeout(() => { show = false }, 5000)" x-show="show" | ||
| x-description="Notification panel, show/hide based on alert state." | ||
| x-transition:enter="transform ease-out duration-300 transition" | ||
| x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" | ||
| x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0" | ||
| x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" | ||
| x-transition:leave-end="opacity-0" x-bind:class="bg" | ||
| class="w-full max-w-sm rounded-lg shadow-lg pointer-events-auto"> | ||
| <div class="overflow-hidden rounded-lg shadow-xs"> | ||
| <div class="p-4"> | ||
| <div class="flex items-start"> | ||
| <div class="flex-shrink-0"> | ||
| <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | ||
| d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | ||
| </svg> | ||
| </div> | ||
| <div class="ml-3 w-0 flex-1 pt-0.5"> | ||
| <p x-text="message" class="text-sm font-medium leading-5 text-white"></p> | ||
| </div> | ||
| <div class="flex flex-shrink-0 ml-4"> | ||
| <button x-on:click.stop="show = false" | ||
| class="inline-flex text-gray-100 transition duration-150 ease-in-out focus:outline-none focus:white"> | ||
| <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> | ||
| <path fill-rule="evenodd" | ||
| d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" | ||
| clip-rule="evenodd"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <?php | ||
|
|
||
| namespace Tanthammar\TallForms\Traits; | ||
|
|
||
| trait Notify | ||
| { | ||
| /* | ||
| You can use this trait in both php or in frontend js | ||
| It either sets a LiveWire property that calls the notify method or | ||
| you can call the notify method directly. | ||
| example use in js to update the property | ||
| @this.set('alert', { | ||
| type: 'negative', | ||
| message: Locale == 'sv' //locale is shared to window | ||
| ? "Bilden du valt överskrider max tillåten dokument storlek. Se 'Max file size' ovanför bilden." | ||
| : "The image you uploaded exceeds max allowed file size, stated above the picture" | ||
| }); | ||
| exeample use in js to call the notify function | ||
| @this.call('notify', 'negative', 'Oh No!'); | ||
| */ | ||
| public array $alert = []; | ||
|
|
||
| public function updatedAlert() | ||
| { | ||
| $this->notify( | ||
| array_get($this->alert, 'type', 'saved'), | ||
| array_get($this->alert, 'message', trans(config('tall-forms.message-updated-success'))) | ||
| ); | ||
| } | ||
|
|
||
| public function notify($type = "saved", $message = "") | ||
| { | ||
| $bg = null; | ||
| switch ($type) { | ||
| case 'saved': | ||
| $bg = config('tall-forms.positive'); | ||
| $message = trans(config('tall-forms.message-updated-success')); | ||
| $this->emitSelf('notify-saved'); | ||
| break; | ||
|
|
||
| case 'positive': | ||
| $bg = config('tall-forms.positive'); | ||
| break; | ||
|
|
||
| case 'negative': | ||
| $bg = config('tall-forms.negative'); | ||
| break; | ||
|
|
||
| case 'info': | ||
| $bg = config('tall-forms.info'); | ||
| break; | ||
|
|
||
| case 'warning': | ||
| $bg = config('tall-forms.warning'); | ||
| break; | ||
|
|
||
| default: | ||
| $bg = config('tall-forms.default'); | ||
| break; | ||
| } | ||
| $this->dispatchBrowserEvent( | ||
| 'notify', | ||
| [ | ||
| 'bg' => $bg, | ||
| 'message' => $message, | ||
| ] | ||
| ); | ||
| } | ||
| } |