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() {
if (!this.isSupported) {
return {
icon: 'bell-slash',
color: 'text-dark-text-secondary',
tooltip: 'Notifications not supported',
};
@ -74,7 +73,6 @@ export class NotificationStatus extends LitElement {
if (this.permission === 'granted' && this.subscription) {
return {
icon: 'bell',
color: 'text-status-success',
tooltip: 'Notifications enabled',
};
@ -82,59 +80,32 @@ export class NotificationStatus extends LitElement {
if (this.permission === 'denied') {
return {
icon: 'bell-slash',
color: 'text-status-error',
tooltip: 'Notifications blocked',
};
}
return {
icon: 'bell',
color: 'text-status-warning',
tooltip: 'Notifications available',
};
}
private renderIcon(iconName: string) {
switch (iconName) {
case 'bell':
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>
`;
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>
`;
}
private renderIcon() {
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() {
const { icon, color, tooltip } = this.getStatusConfig();
const { color, tooltip } = this.getStatusConfig();
return html`
<button
@ -142,7 +113,7 @@ export class NotificationStatus extends LitElement {
class="p-2 ${color} hover:text-dark-text transition-colors relative"
title="${tooltip}"
>
${this.renderIcon(icon)}
${this.renderIcon()}
<!-- Notification indicator dot -->
${this.permission === 'default' && this.isSupported

View file

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