From 0b6e89fb77c4b7c18d6a251d277edd6385601b37 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Fri, 26 Apr 2024 23:44:16 +0100 Subject: [PATCH 1/8] bell icon component --- resources/views/components/icons/bell.blade.php | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 resources/views/components/icons/bell.blade.php diff --git a/resources/views/components/icons/bell.blade.php b/resources/views/components/icons/bell.blade.php new file mode 100644 index 0000000..e69de29 From 7363ba99b2a0a84bce59581fd4935d6d961a7f19 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sat, 27 Apr 2024 00:25:10 +0100 Subject: [PATCH 2/8] moving svgs to anonymous components --- resources/views/components/icons/bell.blade.php | 3 +++ resources/views/components/icons/close.blade.php | 4 ++++ resources/views/icon.blade.php | 4 +--- resources/views/popout.blade.php | 10 ++-------- 4 files changed, 10 insertions(+), 11 deletions(-) create mode 100644 resources/views/components/icons/close.blade.php diff --git a/resources/views/components/icons/bell.blade.php b/resources/views/components/icons/bell.blade.php index e69de29..87d0a86 100644 --- a/resources/views/components/icons/bell.blade.php +++ b/resources/views/components/icons/bell.blade.php @@ -0,0 +1,3 @@ +merge(['class' => 'h-full w-full fill-black dark:fill-white', 'stroke' => 'currentColor', 'viewBox' => '0 0 24 24']) }} xmlns="http://www.w3.org/2000/svg"> + + diff --git a/resources/views/components/icons/close.blade.php b/resources/views/components/icons/close.blade.php new file mode 100644 index 0000000..5684163 --- /dev/null +++ b/resources/views/components/icons/close.blade.php @@ -0,0 +1,4 @@ +merge(['width' => '24', 'height' => '24', 'viewBox' => '0 0 24 24', 'fill' => 'none', 'stroke' => 'currentColor' ]) }} xmlns="http://www.w3.org/2000/svg"> + + + 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 From 785985a08fbaf9d1398c409637c3337aabd23872 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sun, 28 Apr 2024 00:12:08 +0100 Subject: [PATCH 3/8] WIP - "componentafying" --- .../components/notification/date.blade.php | 3 ++ .../components/notification/link.blade.php | 7 +++++ .../notification/notification.blade.php | 18 +++++++++++ .../components/notification/title.blade.php | 11 +++++++ resources/views/types/important.blade.php | 31 +++++++++++++++++-- src/Components/Display.php | 11 ++++++- 6 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 resources/views/components/notification/date.blade.php create mode 100644 resources/views/components/notification/link.blade.php create mode 100644 resources/views/components/notification/notification.blade.php create mode 100644 resources/views/components/notification/title.blade.php diff --git a/resources/views/components/notification/date.blade.php b/resources/views/components/notification/date.blade.php new file mode 100644 index 0000000..1aaf0c0 --- /dev/null +++ b/resources/views/components/notification/date.blade.php @@ -0,0 +1,3 @@ +

+ {{ $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..7232c9b --- /dev/null +++ b/resources/views/components/notification/link.blade.php @@ -0,0 +1,7 @@ +@if(! empty($link)) +

+ merge() }}> + {{ ! 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..d13fc2c --- /dev/null +++ b/resources/views/components/notification/title.blade.php @@ -0,0 +1,11 @@ +merge() }}> + @if(! empty($link)) + + @endif + + {{ $slot }} + + @if(! empty($link)) + + @endif + diff --git a/resources/views/types/important.blade.php b/resources/views/types/important.blade.php index 473b398..f1db22f 100644 --- a/resources/views/types/important.blade.php +++ b/resources/views/types/important.blade.php @@ -1,3 +1,28 @@ -@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, ]; From 3cb929559d6a3fa3abc68f1f934638fcaacedbd1 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sun, 28 Apr 2024 22:00:49 +0100 Subject: [PATCH 4/8] readme update for megaphone component line --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From 9ca6773d18d962f248561bb089acd36d061fc280 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sun, 28 Apr 2024 22:13:55 +0100 Subject: [PATCH 5/8] reworking template / components --- .../components/notification/date.blade.php | 4 ++- .../components/notification/link.blade.php | 9 +++-- .../components/notification/title.blade.php | 4 ++- resources/views/types/base.blade.php | 36 ------------------- resources/views/types/general.blade.php | 28 +++++++++++++-- resources/views/types/important.blade.php | 7 ++-- resources/views/types/new-feature.blade.php | 28 +++++++++++++-- 7 files changed, 65 insertions(+), 51 deletions(-) delete mode 100644 resources/views/types/base.blade.php diff --git a/resources/views/components/notification/date.blade.php b/resources/views/components/notification/date.blade.php index 1aaf0c0..e7f5d31 100644 --- a/resources/views/components/notification/date.blade.php +++ b/resources/views/components/notification/date.blade.php @@ -1,3 +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 index 7232c9b..6f0a359 100644 --- a/resources/views/components/notification/link.blade.php +++ b/resources/views/components/notification/link.blade.php @@ -1,7 +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))

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

@endif diff --git a/resources/views/components/notification/title.blade.php b/resources/views/components/notification/title.blade.php index d13fc2c..c6494ba 100644 --- a/resources/views/components/notification/title.blade.php +++ b/resources/views/components/notification/title.blade.php @@ -1,4 +1,6 @@ -merge() }}> +@props(['class' => 'text-indigo-700 font-bold', 'link',]) + + @if(! empty($link)) @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..a894737 100644 --- a/resources/views/types/general.blade.php +++ b/resources/views/types/general.blade.php @@ -1,3 +1,25 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + + diff --git a/resources/views/types/important.blade.php b/resources/views/types/important.blade.php index f1db22f..fb71bbb 100644 --- a/resources/views/types/important.blade.php +++ b/resources/views/types/important.blade.php @@ -6,15 +6,13 @@ - + {{ $announcement['title'] }} - + @@ -22,7 +20,6 @@ class="focus:outline-none text-xs leading-3 pt-1 text-gray-500" /> :link="$announcement['link']" :newWindow="$announcement['linkNewWindow']" :linkText="$announcement['linkText']" - class="cursor-pointer no-underline bg-gray-100 text-gray-800 rounded-md border border-gray-300 p-2 hover:bg-gray-300" /> diff --git a/resources/views/types/new-feature.blade.php b/resources/views/types/new-feature.blade.php index 45ac022..c7ea279 100644 --- a/resources/views/types/new-feature.blade.php +++ b/resources/views/types/new-feature.blade.php @@ -1,3 +1,25 @@ -@include('megaphone::types.base', ['icon' => ' - - ']) + + + + + + + + + + {{ $announcement['title'] }} + + + + + + + + + + + From ebf5c572d4079fb73d47e1cbb24080635f958313 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sun, 28 Apr 2024 22:27:56 +0100 Subject: [PATCH 6/8] component / svg updates --- resources/views/components/icons/bell.blade.php | 4 +++- resources/views/components/icons/bells.blade.php | 5 +++++ resources/views/components/icons/bullhorn.blade.php | 5 +++++ resources/views/components/icons/close.blade.php | 4 +++- resources/views/components/icons/exclaimation.blade.php | 5 +++++ resources/views/types/general.blade.php | 4 +--- resources/views/types/important.blade.php | 4 +--- resources/views/types/new-feature.blade.php | 4 +--- 8 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 resources/views/components/icons/bells.blade.php create mode 100644 resources/views/components/icons/bullhorn.blade.php create mode 100644 resources/views/components/icons/exclaimation.blade.php diff --git a/resources/views/components/icons/bell.blade.php b/resources/views/components/icons/bell.blade.php index 87d0a86..343fc09 100644 --- a/resources/views/components/icons/bell.blade.php +++ b/resources/views/components/icons/bell.blade.php @@ -1,3 +1,5 @@ -merge(['class' => 'h-full w-full fill-black dark:fill-white', 'stroke' => 'currentColor', 'viewBox' => '0 0 24 24']) }} xmlns="http://www.w3.org/2000/svg"> +@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 index 5684163..631e192 100644 --- a/resources/views/components/icons/close.blade.php +++ b/resources/views/components/icons/close.blade.php @@ -1,4 +1,6 @@ -merge(['width' => '24', 'height' => '24', 'viewBox' => '0 0 24 24', 'fill' => 'none', 'stroke' => 'currentColor' ]) }} xmlns="http://www.w3.org/2000/svg"> +@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/types/general.blade.php b/resources/views/types/general.blade.php index a894737..755bb08 100644 --- a/resources/views/types/general.blade.php +++ b/resources/views/types/general.blade.php @@ -1,8 +1,6 @@ - - - + diff --git a/resources/views/types/important.blade.php b/resources/views/types/important.blade.php index fb71bbb..c64cd16 100644 --- a/resources/views/types/important.blade.php +++ b/resources/views/types/important.blade.php @@ -1,8 +1,6 @@ - - - + diff --git a/resources/views/types/new-feature.blade.php b/resources/views/types/new-feature.blade.php index c7ea279..c980ff8 100644 --- a/resources/views/types/new-feature.blade.php +++ b/resources/views/types/new-feature.blade.php @@ -1,8 +1,6 @@ - - - + From 0d98324c1e4a3746748838b1f4b328caef2bb28b Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Sun, 28 Apr 2024 22:32:46 +0100 Subject: [PATCH 7/8] changelog update --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) 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) From 39383e897289fbecf005619ade4774a4b98a1fbd Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Mon, 29 Apr 2024 20:57:20 +0100 Subject: [PATCH 8/8] fixing tests --- tests/MegaphoneComponentTest.php | 16 +++++++------- tests/Setup/TestCase.php | 4 ++-- tests/Setup/views/custom-type.blade.php | 28 ++++++++++++++++++++++--- 3 files changed, 35 insertions(+), 13 deletions(-) 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'] }} + + + + + + + + + + +