From 0b6e89fb77c4b7c18d6a251d277edd6385601b37 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Fri, 26 Apr 2024 23:44:16 +0100 Subject: [PATCH 01/28] 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 02/28] 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 03/28] 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 04/28] 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 05/28] 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 @@ - -
- -
-

- {{ $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 06/28] 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 07/28] 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 08/28] 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'] }} + + + + + + + + + + + From f03dc326cf41ebaf244772c2c9abad2d5b2e86b3 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 3 Sep 2024 00:16:26 +0100 Subject: [PATCH 09/28] Added button to mark all items as read --- resources/views/popout.blade.php | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php index d467ecc..64ed312 100644 --- a/resources/views/popout.blade.php +++ b/resources/views/popout.blade.php @@ -10,9 +10,15 @@ @if ($unread->count() > 0) -

- Unread Notifications -

+
+

+ Unread Notifications +

+ + +
@foreach ($unread as $announcement)
From 2101f62cbb34cd6e07fc2eac9748cff4b843a866 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 3 Sep 2024 23:58:24 +0100 Subject: [PATCH 10/28] Added method to component to mark unread notifications as read. Updated the changelog --- CHANGELOG.md | 1 + resources/views/popout.blade.php | 4 ++-- src/Livewire/Megaphone.php | 11 +++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df820c6..cfc6cfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). * 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) +* Added "mark all as read" feature for unread notifications. [PR#37](https://github.com/mikebarlow/megaphone/pull/37) ## [2.0.0] - 2023-09-11 diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php index 64ed312..1d4ede8 100644 --- a/resources/views/popout.blade.php +++ b/resources/views/popout.blade.php @@ -11,11 +11,11 @@ @if ($unread->count() > 0)
-

+

Unread Notifications

-
diff --git a/src/Livewire/Megaphone.php b/src/Livewire/Megaphone.php index 2fcd79b..28c16a9 100644 --- a/src/Livewire/Megaphone.php +++ b/src/Livewire/Megaphone.php @@ -59,4 +59,15 @@ public function markAsRead(DatabaseNotification $notification) $notification->markAsRead(); $this->loadAnnouncements($this->getNotifiable()); } + + public function markAllRead() + { + DatabaseNotification::query() + ->where('notifiable_type', config('megaphone.model')) + ->where('notifiable_id', $this->notifiableId) + ->whereNull('read_at') + ->update(['read_at' => now()]); + + $this->loadAnnouncements($this->getNotifiable()); + } } From cdfa6b7327cac010b1115eb60362cac6f48f4966 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Wed, 4 Sep 2024 23:16:39 +0100 Subject: [PATCH 11/28] Only show mark as read if more than 1 unread notification --- resources/views/popout.blade.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php index 1d4ede8..3fe898a 100644 --- a/resources/views/popout.blade.php +++ b/resources/views/popout.blade.php @@ -15,9 +15,11 @@ Unread Notifications - + @if ($unread->count() > 1) + + @endif
@foreach ($unread as $announcement) From 3e56d5485fd075201a6b1a390ef39b9537511d06 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Wed, 4 Sep 2024 23:22:40 +0100 Subject: [PATCH 12/28] tests --- tests/MegaphoneComponentTest.php | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/tests/MegaphoneComponentTest.php b/tests/MegaphoneComponentTest.php index 15836fb..4834e80 100644 --- a/tests/MegaphoneComponentTest.php +++ b/tests/MegaphoneComponentTest.php @@ -100,6 +100,45 @@ ->assertSet('announcements', $user->readNotifications); }); +it('can mark all notifications as read', function () { + $this->actingAs( + $user = $this->createTestUser() + ); + + $this->createTestNotification( + $user, + \MBarlow\Megaphone\Types\General::class + ); + $this->createTestNotification( + $user, + \MBarlow\Megaphone\Types\Important::class + ); + + $this->livewire(Megaphone::class) + ->call('markAllRead') + ->assertSet('unread', $user->announcements()->get()->whereNull('read_at')) + ->assertSet('announcements', $user->readNotifications); +}); + +it('shows mark all as read if more than 1 notification', function () { + $this->actingAs( + $user = $this->createTestUser() + ); + + $this->createTestNotification( + $user, + \MBarlow\Megaphone\Types\General::class + ); + $this->createTestNotification( + $user, + \MBarlow\Megaphone\Types\Important::class + ); + + $this->livewire(Megaphone::class) + ->assertViewIs('megaphone::megaphone') + ->assertSeeHtml(''); +}); + it('can render the megaphone component with general notification', function () { $this->actingAs( $user = $this->createTestUser() From f5b6954cae43edbaab7f6d21518a9429a662b7f2 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Wed, 4 Sep 2024 23:30:18 +0100 Subject: [PATCH 13/28] tests --- resources/views/popout.blade.php | 4 +--- tests/MegaphoneComponentTest.php | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php index 3fe898a..ca51da5 100644 --- a/resources/views/popout.blade.php +++ b/resources/views/popout.blade.php @@ -16,9 +16,7 @@ @if ($unread->count() > 1) - + @endif diff --git a/tests/MegaphoneComponentTest.php b/tests/MegaphoneComponentTest.php index 4834e80..e0c653c 100644 --- a/tests/MegaphoneComponentTest.php +++ b/tests/MegaphoneComponentTest.php @@ -136,7 +136,7 @@ $this->livewire(Megaphone::class) ->assertViewIs('megaphone::megaphone') - ->assertSeeHtml(''); + ->assertSeeHtml(' - @if ($unread->count() > 0) -
-

- Unread Notifications -

+
+ @if ($unread->count() > 0) +
+

+ Unread Notifications +

+ + @if ($unread->count() > 1) + + @endif +
- @if ($unread->count() > 1) - + @foreach ($unread as $announcement) +
+ + + @if($announcement->read_at === null) + + @endif +
+ @endforeach + + @if ($announcements->count() > 0) +

+ Previous Notifications +

@endif -
+ @endif - @foreach ($unread as $announcement) -
+ @foreach ($announcements as $announcement) +
- - @if($announcement->read_at === null) - - @endif
@endforeach - @if ($announcements->count() > 0) -

- Previous Notifications -

+ @if ($unread->count() === 0 && $announcements->count() === 0) +
+
+

+ No new announcements +

+
+
@endif - @endif - - @foreach ($announcements as $announcement) -
- -
- @endforeach - - @if ($unread->count() === 0 && $announcements->count() === 0) -
-
-

- No new announcements -

-
-
- @endif +
From c4c69b4b48bd126814802a55b821542c7f4986b8 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 10 Sep 2024 22:25:20 +0100 Subject: [PATCH 25/28] Furter improved default styles. New notification icon --- public/css/megaphone.css | 55 ++++++++++++++++++++++++++++++++-- resources/views/icon.blade.php | 20 ++++++++++--- 2 files changed, 69 insertions(+), 6 deletions(-) diff --git a/public/css/megaphone.css b/public/css/megaphone.css index fd0cb3a..ed3f823 100644 --- a/public/css/megaphone.css +++ b/public/css/megaphone.css @@ -24,12 +24,24 @@ .megaphone .left-0 { left: 0px; } +.megaphone .left-1 { + left: 0.25rem; +} +.megaphone .left-2 { + left: 0.5rem; +} .megaphone .right-0 { right: 0px; } .megaphone .top-0 { top: 0px; } +.megaphone .top-1 { + top: 0.25rem; +} +.megaphone .top-2 { + top: 0.5rem; +} .megaphone .z-30 { z-index: 30; } @@ -39,6 +51,9 @@ .megaphone .z-50 { z-index: 50; } +.megaphone .-mt-1 { + margin-top: -0.25rem; +} .megaphone .mr-2 { margin-right: 0.5rem; } @@ -54,18 +69,24 @@ .megaphone .flex { display: flex; } +.megaphone .inline-flex { + display: inline-flex; +} .megaphone .aspect-square { aspect-ratio: 1 / 1; } .megaphone .h-12 { height: 3rem; } -.megaphone .h-2\/5 { - height: 40%; +.megaphone .h-3 { + height: 0.75rem; } .megaphone .h-4 { height: 1rem; } +.megaphone .h-5 { + height: 1.25rem; +} .megaphone .h-full { height: 100%; } @@ -79,9 +100,15 @@ .megaphone .w-12 { width: 3rem; } +.megaphone .w-3 { + width: 0.75rem; +} .megaphone .w-4 { width: 1rem; } +.megaphone .w-5 { + width: 1.25rem; +} .megaphone .w-full { width: 100%; } @@ -163,6 +190,10 @@ --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } +.megaphone .bg-red-400 { + --tw-bg-opacity: 1; + background-color: rgb(248 113 113 / var(--tw-bg-opacity)); +} .megaphone .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); @@ -207,9 +238,15 @@ .megaphone .pb-2 { padding-bottom: 0.5rem; } +.megaphone .pt-2 { + padding-top: 0.5rem; +} .megaphone .pt-8 { padding-top: 2rem; } +.megaphone .text-center { + text-align: center; +} .megaphone .font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -263,6 +300,9 @@ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } +.megaphone .opacity-75 { + opacity: 0.75; +} .megaphone .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -301,6 +341,17 @@ outline: 2px solid transparent; outline-offset: 2px; } +@media (prefers-reduced-motion: no-preference) { + @keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } + } + .megaphone .motion-safe\:animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + } +} @media (min-width: 640px) { .megaphone .sm\:duration-300 { transition-duration: 300ms; diff --git a/resources/views/icon.blade.php b/resources/views/icon.blade.php index 65e3f8f..d29e67b 100644 --- a/resources/views/icon.blade.php +++ b/resources/views/icon.blade.php @@ -7,11 +7,23 @@ class="font-sans text-gray-900" @if ($unread->count() > 0) @if($showCount) - - {{ $unread->count() }} - + + + + + + {{ $unread->count() > 9 ? '9+' : $unread->count() }} + + + + @else - + + + + + + @endif @endif From cf5b6a5a1b70e209e46a75f4617d16d17e747675 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 10 Sep 2024 22:31:34 +0100 Subject: [PATCH 26/28] fixing tests --- tests/MegaphoneComponentTest.php | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/tests/MegaphoneComponentTest.php b/tests/MegaphoneComponentTest.php index 2148eaf..e188b70 100644 --- a/tests/MegaphoneComponentTest.php +++ b/tests/MegaphoneComponentTest.php @@ -30,9 +30,16 @@ $this->livewire(Megaphone::class) ->assertViewIs('megaphone::megaphone') - ->assertSeeHtml(' - 1 - '); + ->assertSeeHtml(' + + + + + 1 + + + + '); }); it('can render the megaphone component with notification dot', function () { @@ -51,10 +58,12 @@ $this->livewire(Megaphone::class) ->assertViewIs('megaphone::megaphone') - ->assertSeeHtml('') - ->assertDontSeeHtml(' - 1 - '); + ->assertSeeHtml(' + + + + + '); }); it('can load announcements', function () { From f16b11c839b36ed757fec011c6cb669374e11724 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 10 Sep 2024 22:38:36 +0100 Subject: [PATCH 27/28] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65f1dd0..d8200fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). * Reworked notification type templates into components. [PR#35](https://github.com/mikebarlow/megaphone/pull/35) * Added "mark all as read" feature for unread notifications. [PR#37](https://github.com/mikebarlow/megaphone/pull/37) * Added support for `wire:poll` to give the impression of a live component. [PR#38](https://github.com/mikebarlow/megaphone/pull/38) -* Added `@megaphoneStyles` blade directive + improved slideout styles. [PR#39](https://github.com/mikebarlow/megaphone/pull/39) +* Added `@megaphoneStyles` blade directive + improved default styles. [PR#39](https://github.com/mikebarlow/megaphone/pull/39) ## [2.0.0] - 2023-09-11 From 14398cb9ff231171fe9a5460ba548333f0131d35 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 10 Sep 2024 22:51:04 +0100 Subject: [PATCH 28/28] Changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8200fe..bc660bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). -## [Unrelease] - TBC +## [2.1.0] - 2024-09-11 * 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)