From 7883fe1ceb0c133ad3300d6fdabec803d8083580 Mon Sep 17 00:00:00 2001 From: Patrick Kellar Date: Sun, 4 Dec 2022 11:45:39 -0500 Subject: [PATCH 1/4] Update bell icon and annoucement count badge Adds config option for showing only red dot when there are new announcements --- config/megaphone.php | 6 ++ public/css/megaphone.css | 109 ++++++++++++++++++++------------- resources/views/icon.blade.php | 24 +++++--- src/Livewire/Megaphone.php | 3 + 4 files changed, 92 insertions(+), 50 deletions(-) diff --git a/config/megaphone.php b/config/megaphone.php index 86396fe..c047eea 100644 --- a/config/megaphone.php +++ b/config/megaphone.php @@ -40,4 +40,10 @@ * Clear Megaphone notifications older than.... */ 'clearAfter' => '2 weeks', + + /* + * Option for setting the icon to show actual count of unread Notifications or + * show a dot instead + */ + 'showCount' => true, ]; diff --git a/public/css/megaphone.css b/public/css/megaphone.css index 748ca64..82e0f78 100644 --- a/public/css/megaphone.css +++ b/public/css/megaphone.css @@ -1,6 +1,17 @@ [x-cloak] { display: none !important; } +.megaphone .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} .megaphone .fixed { position: fixed; } @@ -10,23 +21,14 @@ .megaphone .relative { position: relative; } -.megaphone .-left-2 { - left: -0.5rem; -} -.megaphone .-top-2 { - top: -0.5rem; -} .megaphone .top-0 { top: 0px; } -.megaphone .right-0 { - right: 0px; -} .megaphone .left-0 { left: 0px; } -.megaphone .z-20 { - z-index: 20; +.megaphone .right-0 { + right: 0px; } .megaphone .z-50 { z-index: 50; @@ -47,39 +49,47 @@ .megaphone .block { display: block; } -.megaphone .inline-block { - display: inline-block; -} .megaphone .flex { display: flex; } -.megaphone .h-12 { - height: 3rem; -} -.megaphone .h-6 { - height: 1.5rem; +.megaphone .aspect-square { + aspect-ratio: 1 / 1; } .megaphone .h-full { height: 100%; } +.megaphone .h-2\/5 { + height: 40%; +} +.megaphone .h-12 { + height: 3rem; +} .megaphone .h-screen { height: 100vh; } +.megaphone .h-6 { + height: 1.5rem; +} .megaphone .h-8 { height: 2rem; } .megaphone .h-4\/5 { height: 80%; } +.megaphone .max-h-fit { + max-height: -webkit-fit-content; + max-height: -moz-fit-content; + max-height: fit-content; +} +.megaphone .w-full { + width: 100%; +} .megaphone .w-12 { width: 3rem; } .megaphone .w-6 { width: 1.5rem; } -.megaphone .w-full { - width: 100%; -} .megaphone .w-8 { width: 2rem; } @@ -123,6 +133,9 @@ .megaphone .rounded { border-radius: 0.25rem; } +.megaphone .border-2 { + border-width: 2px; +} .megaphone .border { border-width: 1px; } @@ -137,9 +150,9 @@ --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.megaphone .bg-red-600 { +.megaphone .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .megaphone .bg-gray-50 { --tw-bg-opacity: 1; @@ -153,8 +166,8 @@ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.megaphone .fill-white { - fill: #fff; +.megaphone .fill-transparent { + fill: transparent; } .megaphone .fill-blue-600 { fill: #2563eb; @@ -165,12 +178,6 @@ .megaphone .fill-green-600 { fill: #16a34a; } -.megaphone .p-1\.5 { - padding: 0.375rem; -} -.megaphone .p-1 { - padding: 0.25rem; -} .megaphone .p-8 { padding: 2rem; } @@ -180,6 +187,14 @@ .megaphone .p-2 { padding: 0.5rem; } +.megaphone .px-1\.5 { + padding-left: 0.375rem; + padding-right: 0.375rem; +} +.megaphone .px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} .megaphone .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -206,23 +221,23 @@ .megaphone .pt-1 { padding-top: 0.25rem; } -.megaphone .text-center { - text-align: center; -} .megaphone .text-right { text-align: right; } -.megaphone .text-sm { - font-size: 0.875rem; - line-height: 1.25rem; +.megaphone .font-sans { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +.megaphone .text-xs { + font-size: 0.75rem; + line-height: 1rem; } .megaphone .text-2xl { font-size: 1.5rem; line-height: 2rem; } -.megaphone .text-xs { - font-size: 0.75rem; - line-height: 1rem; +.megaphone .text-sm { + font-size: 0.875rem; + line-height: 1.25rem; } .megaphone .font-semibold { font-weight: 600; @@ -230,6 +245,9 @@ .megaphone .font-bold { font-weight: 700; } +.megaphone .leading-5 { + line-height: 1.25rem; +} .megaphone .leading-6 { line-height: 1.5rem; } @@ -242,6 +260,10 @@ .megaphone .leading-3 { line-height: .75rem; } +.megaphone .text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} .megaphone .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -271,6 +293,11 @@ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.megaphone .shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} .megaphone .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); diff --git a/resources/views/icon.blade.php b/resources/views/icon.blade.php index 9f61c59..b44b1ca 100644 --- a/resources/views/icon.blade.php +++ b/resources/views/icon.blade.php @@ -1,13 +1,19 @@ -
+
+ diff --git a/src/Livewire/Megaphone.php b/src/Livewire/Megaphone.php index 9e7171f..ec9e03e 100644 --- a/src/Livewire/Megaphone.php +++ b/src/Livewire/Megaphone.php @@ -14,6 +14,8 @@ class Megaphone extends Component public $unread; + public $showCount; + public $rules = [ 'unread' => 'required', 'announcements' => 'required', @@ -23,6 +25,7 @@ public function mount(Request $request) { $this->user = $request->user(); $this->loadAnnouncements($this->user); + $this->showCount = config('megaphone.showCount', true); } public function loadAnnouncements($user) From 921bcbe8527ec8a9fc49a15e7dec07bc7af6ef8f Mon Sep 17 00:00:00 2001 From: Patrick Kellar Date: Sun, 4 Dec 2022 11:47:50 -0500 Subject: [PATCH 2/4] Updates tests for new bell icon SVG Adds test for the showCount configuration option --- tests/MegaphoneComponentTest.php | 28 ++++++++++++++++++++++++---- tests/Setup/TestCase.php | 4 ++-- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/tests/MegaphoneComponentTest.php b/tests/MegaphoneComponentTest.php index 3848a1e..decdb77 100644 --- a/tests/MegaphoneComponentTest.php +++ b/tests/MegaphoneComponentTest.php @@ -30,11 +30,31 @@ $this->livewire(Megaphone::class) ->assertViewIs('megaphone::megaphone') - ->assertSeeHtml('
- + ->assertSeeHtml(' 1 - -
'); + '); +}); + +it('can render the megaphone component with notification dot', function () { + config()->set( + 'megaphone.showCount', false + ); + + $this->actingAs( + $user = $this->createTestUser() + ); + + $this->createTestNotification( + $user, + \MBarlow\Megaphone\Types\General::class + ); + + $this->livewire(Megaphone::class) + ->assertViewIs('megaphone::megaphone') + ->assertSeeHtml('') + ->assertDontSeeHtml(' + 1 + '); }); it('can load announcements', function () { diff --git a/tests/Setup/TestCase.php b/tests/Setup/TestCase.php index a520d7e..ccffe95 100644 --- a/tests/Setup/TestCase.php +++ b/tests/Setup/TestCase.php @@ -48,8 +48,8 @@ protected function createTestNotification($user, $notifClass) protected function bellSvgIcon(): string { - return ' - + return ' + '; } From 4777c6134815dee9b4b0fe94a3a638318bf4f700 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 27 Dec 2022 22:31:10 +0000 Subject: [PATCH 3/4] Changed default icon fill --- public/css/megaphone.css | 9 +++++++-- resources/views/icon.blade.php | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/public/css/megaphone.css b/public/css/megaphone.css index 82e0f78..7f1f73c 100644 --- a/public/css/megaphone.css +++ b/public/css/megaphone.css @@ -166,8 +166,8 @@ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.megaphone .fill-transparent { - fill: transparent; +.megaphone .fill-black { + fill: #000; } .megaphone .fill-blue-600 { fill: #2563eb; @@ -335,6 +335,11 @@ .megaphone .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } +@media (prefers-color-scheme: dark) { + .megaphone .dark\:fill-white { + fill: #fff; + } +} @media (min-width: 1536px) { .megaphone .\32xl\:w-4\/12 { width: 33.333333%; diff --git a/resources/views/icon.blade.php b/resources/views/icon.blade.php index b44b1ca..f2e011c 100644 --- a/resources/views/icon.blade.php +++ b/resources/views/icon.blade.php @@ -4,7 +4,7 @@ class="font-sans text-gray-900" @click="open = true" > Show Notifications - + @if ($unread->count() > 0) From d7e4bcfbf8038d3dcfb85572a37b3975d3c76642 Mon Sep 17 00:00:00 2001 From: Mike Barlow Date: Tue, 27 Dec 2022 22:51:39 +0000 Subject: [PATCH 4/4] fixing tests --- tests/Setup/TestCase.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Setup/TestCase.php b/tests/Setup/TestCase.php index ccffe95..03c1255 100644 --- a/tests/Setup/TestCase.php +++ b/tests/Setup/TestCase.php @@ -48,7 +48,7 @@ protected function createTestNotification($user, $notifClass) protected function bellSvgIcon(): string { - return ' + return ' '; }