Try to fix notification icon

This commit is contained in:
Armin Ronacher 2025-06-23 15:01:48 +02:00
parent 7531e6f12b
commit a4525bacb6
2 changed files with 14 additions and 44 deletions

View file

@ -66,7 +66,6 @@ export class NotificationStatus extends LitElement {
private getStatusConfig() { private getStatusConfig() {
if (!this.isSupported) { if (!this.isSupported) {
return { return {
icon: 'bell-slash',
color: 'text-dark-text-secondary', color: 'text-dark-text-secondary',
tooltip: 'Notifications not supported', tooltip: 'Notifications not supported',
}; };
@ -74,7 +73,6 @@ export class NotificationStatus extends LitElement {
if (this.permission === 'granted' && this.subscription) { if (this.permission === 'granted' && this.subscription) {
return { return {
icon: 'bell',
color: 'text-status-success', color: 'text-status-success',
tooltip: 'Notifications enabled', tooltip: 'Notifications enabled',
}; };
@ -82,59 +80,32 @@ export class NotificationStatus extends LitElement {
if (this.permission === 'denied') { if (this.permission === 'denied') {
return { return {
icon: 'bell-slash',
color: 'text-status-error', color: 'text-status-error',
tooltip: 'Notifications blocked', tooltip: 'Notifications blocked',
}; };
} }
return { return {
icon: 'bell',
color: 'text-status-warning', color: 'text-status-warning',
tooltip: 'Notifications available', tooltip: 'Notifications available',
}; };
} }
private renderIcon(iconName: string) { private renderIcon() {
switch (iconName) { return html`
case 'bell': <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
return html` <path
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> stroke-linecap="round"
<path stroke-linejoin="round"
stroke-linecap="round" stroke-width="2"
stroke-linejoin="round" d="M15 17h5l-3.5-3.5A7 7 0 0 1 17 10a7 7 0 0 0-14 0 7 7 0 0 1 .5 3.5L0 17h5m10 0v1a3 3 0 0 1-6 0v-1m6 0H9"
stroke-width="2" />
d="M15 17h5l-3.5-3.5A7 7 0 0 1 17 10a7 7 0 0 0-14 0 7 7 0 0 1 .5 3.5L0 17h5m10 0v1a3 3 0 0 1-6 0v-1m6 0H9" </svg>
/> `;
</svg>
`;
case 'bell-slash':
return html`
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5.586 5.586A2 2 0 0 0 5 7v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7a2 2 0 0 0-1.414.586zM3 3l18 18"
/>
</svg>
`;
default:
return html`
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-3.5-3.5A7 7 0 0 1 17 10a7 7 0 0 0-14 0 7 7 0 0 1 .5 3.5L0 17h5m10 0v1a3 3 0 0 1-6 0v-1m6 0H9"
/>
</svg>
`;
}
} }
render() { render() {
const { icon, color, tooltip } = this.getStatusConfig(); const { color, tooltip } = this.getStatusConfig();
return html` return html`
<button <button
@ -142,7 +113,7 @@ export class NotificationStatus extends LitElement {
class="p-2 ${color} hover:text-dark-text transition-colors relative" class="p-2 ${color} hover:text-dark-text transition-colors relative"
title="${tooltip}" title="${tooltip}"
> >
${this.renderIcon(icon)} ${this.renderIcon()}
<!-- Notification indicator dot --> <!-- Notification indicator dot -->
${this.permission === 'default' && this.isSupported ${this.permission === 'default' && this.isSupported

View file

@ -248,8 +248,7 @@ export class PushNotificationService {
return ( return (
'serviceWorker' in navigator && 'serviceWorker' in navigator &&
'PushManager' in window && 'PushManager' in window &&
'Notification' in window && 'Notification' in window
this.pushNotificationsAvailable
); );
} }