diff --git a/CHANGELOG.md b/CHANGELOG.md index ff7089d..df820c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [Unrelease] - TBC + +* Moved SVG icons into anonymous components for easier reuse / overwriting.[PR#35](https://github.com/mikebarlow/megaphone/pull/35) +* Reworked notification type templates into components. [PR#35](https://github.com/mikebarlow/megaphone/pull/35) + ## [2.0.0] - 2023-09-11 * Updated PHP requirement to 8.1 and above (7.4 and 8.0 dropped) [PR#28](https://github.com/mikebarlow/megaphone/pull/28) diff --git a/README.md b/README.md index 2505bf5..869aef0 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ If you are not using the default user model found at `App\Models\User`, you will To get started using megaphone, drop in the Megaphone Livewire component into your template. ```html - + ``` This will render a Bell Icon where the component has been placed. When clicked a static sidebar will appear on the right of the screen which will show all the existing and any new notifications to the user. diff --git a/resources/views/components/icons/bell.blade.php b/resources/views/components/icons/bell.blade.php new file mode 100644 index 0000000..343fc09 --- /dev/null +++ b/resources/views/components/icons/bell.blade.php @@ -0,0 +1,5 @@ +@props(['class' => 'h-full w-full fill-black dark:fill-white']) + + + + diff --git a/resources/views/components/icons/bells.blade.php b/resources/views/components/icons/bells.blade.php new file mode 100644 index 0000000..574e815 --- /dev/null +++ b/resources/views/components/icons/bells.blade.php @@ -0,0 +1,5 @@ +@props(['class' => 'w-4/5 h-4/5 fill-blue-600']) + + + + diff --git a/resources/views/components/icons/bullhorn.blade.php b/resources/views/components/icons/bullhorn.blade.php new file mode 100644 index 0000000..680ee7c --- /dev/null +++ b/resources/views/components/icons/bullhorn.blade.php @@ -0,0 +1,5 @@ +@props(['class' => 'w-4/5 h-4/5 fill-green-600']) + + + + diff --git a/resources/views/components/icons/close.blade.php b/resources/views/components/icons/close.blade.php new file mode 100644 index 0000000..631e192 --- /dev/null +++ b/resources/views/components/icons/close.blade.php @@ -0,0 +1,6 @@ +@props(['class' => '']) + + + + + diff --git a/resources/views/components/icons/exclaimation.blade.php b/resources/views/components/icons/exclaimation.blade.php new file mode 100644 index 0000000..6b9d0ba --- /dev/null +++ b/resources/views/components/icons/exclaimation.blade.php @@ -0,0 +1,5 @@ +@props(['class' => 'w-4/5 h-4/5 fill-red-600']) + + + + diff --git a/resources/views/components/notification/date.blade.php b/resources/views/components/notification/date.blade.php new file mode 100644 index 0000000..e7f5d31 --- /dev/null +++ b/resources/views/components/notification/date.blade.php @@ -0,0 +1,5 @@ +@props(['class' => 'focus:outline-none text-xs leading-3 pt-1 text-gray-500', 'createdAt',]) + +

+ {{ $createdAt->diffForHumans() }} +

diff --git a/resources/views/components/notification/link.blade.php b/resources/views/components/notification/link.blade.php new file mode 100644 index 0000000..6f0a359 --- /dev/null +++ b/resources/views/components/notification/link.blade.php @@ -0,0 +1,12 @@ +@props([ + 'class' => 'cursor-pointer no-underline bg-gray-100 text-gray-800 rounded-md border border-gray-300 p-2 hover:bg-gray-300', + 'link', 'newWindow', 'linkText', +]) + +@if(! empty($link)) +

+ + {{ ! empty($linkText) ? $linkText : 'View' }} + +

+@endif diff --git a/resources/views/components/notification/notification.blade.php b/resources/views/components/notification/notification.blade.php new file mode 100644 index 0000000..1160a2b --- /dev/null +++ b/resources/views/components/notification/notification.blade.php @@ -0,0 +1,18 @@ + +
+
+

+ {{ $title }} +

+

+ {{ $body }} +

+
+
+ {{ $date }} + + {{ $link }} +
+
diff --git a/resources/views/components/notification/title.blade.php b/resources/views/components/notification/title.blade.php new file mode 100644 index 0000000..c6494ba --- /dev/null +++ b/resources/views/components/notification/title.blade.php @@ -0,0 +1,13 @@ +@props(['class' => 'text-indigo-700 font-bold', 'link',]) + + + @if(! empty($link)) + + @endif + + {{ $slot }} + + @if(! empty($link)) + + @endif + diff --git a/resources/views/icon.blade.php b/resources/views/icon.blade.php index f2e011c..65e3f8f 100644 --- a/resources/views/icon.blade.php +++ b/resources/views/icon.blade.php @@ -4,9 +4,7 @@ class="font-sans text-gray-900" @click="open = true" > Show Notifications - - - + @if ($unread->count() > 0) @if($showCount) diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php index 152c2ae..d467ecc 100644 --- a/resources/views/popout.blade.php +++ b/resources/views/popout.blade.php @@ -5,10 +5,7 @@

Notifications

@@ -25,10 +22,7 @@ @endif diff --git a/resources/views/types/base.blade.php b/resources/views/types/base.blade.php deleted file mode 100644 index 2e329b1..0000000 --- a/resources/views/types/base.blade.php +++ /dev/null @@ -1,36 +0,0 @@ - -
-
-

- - @if(! empty($announcement['link'])) - - @endif - {{ $announcement['title'] }} - @if(! empty($announcement['link'])) - - @endif - -

-

- {{ $announcement['body'] }} -

-
-
-

- {{ $created_at->diffForHumans() }} -

- - @if(! empty($announcement['link'])) -

- - {{ ! empty($announcement['linkText']) ? $announcement['linkText'] : 'View' }} - -

- @endif -
-
diff --git a/resources/views/types/general.blade.php b/resources/views/types/general.blade.php index bb570ab..755bb08 100644 --- a/resources/views/types/general.blade.php +++ b/resources/views/types/general.blade.php @@ -1,3 +1,23 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + + diff --git a/resources/views/types/important.blade.php b/resources/views/types/important.blade.php index 473b398..c64cd16 100644 --- a/resources/views/types/important.blade.php +++ b/resources/views/types/important.blade.php @@ -1,3 +1,23 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + + diff --git a/resources/views/types/new-feature.blade.php b/resources/views/types/new-feature.blade.php index 45ac022..c980ff8 100644 --- a/resources/views/types/new-feature.blade.php +++ b/resources/views/types/new-feature.blade.php @@ -1,3 +1,23 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + + diff --git a/src/Components/Display.php b/src/Components/Display.php index 8ce26df..3b24553 100644 --- a/src/Components/Display.php +++ b/src/Components/Display.php @@ -27,7 +27,16 @@ public function render() } $params = [ - 'announcement' => $this->notification->data, + 'announcement' => array_merge( + [ + 'title' => '', + 'body' => '', + 'link' => '', + 'linkNewWindow' => false, + 'linkText' => 'View', + ], + $this->notification->data + ), 'read_at' => $this->notification->read_at, 'created_at' => $this->notification->created_at, ]; diff --git a/tests/MegaphoneComponentTest.php b/tests/MegaphoneComponentTest.php index 64e7a96..15836fb 100644 --- a/tests/MegaphoneComponentTest.php +++ b/tests/MegaphoneComponentTest.php @@ -114,8 +114,8 @@ ->assertViewIs('megaphone::megaphone') ->assertSeeHtml(''); }); @@ -133,8 +133,8 @@ ->assertViewIs('megaphone::megaphone') ->assertSeeHtml(''); }); @@ -152,8 +152,8 @@ ->assertViewIs('megaphone::megaphone') ->assertSeeHtml(''); }); @@ -178,8 +178,8 @@ ->assertViewIs('megaphone::megaphone') ->assertSeeHtml(''); }); diff --git a/tests/Setup/TestCase.php b/tests/Setup/TestCase.php index 376f583..7dd9a57 100644 --- a/tests/Setup/TestCase.php +++ b/tests/Setup/TestCase.php @@ -49,8 +49,8 @@ protected function createTestNotification($user, $notifClass) protected function bellSvgIcon(): string { return ' - - '; + +'; } protected function getPackageProviders($app) diff --git a/tests/Setup/views/custom-type.blade.php b/tests/Setup/views/custom-type.blade.php index 1ca2795..77abb7c 100644 --- a/tests/Setup/views/custom-type.blade.php +++ b/tests/Setup/views/custom-type.blade.php @@ -1,3 +1,25 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + +