mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
Try to fix notification icon
This commit is contained in:
parent
7531e6f12b
commit
a4525bacb6
2 changed files with 14 additions and 44 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue