graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-22 18:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

made notification dot appear if you load the page and there are already notifs

Browse source
This commit is contained in:
KevinWh0 2024-03-16 01:08:08 +01:00
parent a0c63c8cc4
commit 395ea9ab9f
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/ui/_common_/common.vue
View file

@ -75,6 +75,7 @@ class NotificationFavIconDot {
src : string | null = null; src : string | null = null;
ctx : CanvasRenderingContext2D | null = null; ctx : CanvasRenderingContext2D | null = null;
favconImage : HTMLImageElement | null = null; favconImage : HTMLImageElement | null = null;
loaded = false;
constructor() { constructor() {
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
@ -92,6 +93,7 @@ class NotificationFavIconDot {
this.canvas.width = this.favconImage.width; this.canvas.width = this.favconImage.width;
this.canvas.height = this.favconImage.height; this.canvas.height = this.favconImage.height;
this.loaded = true;
}; };
} }
@ -120,11 +122,14 @@ class NotificationFavIconDot {
this.ctx.stroke(); this.ctx.stroke();
} }
_drawFavicon() { private _drawFavicon() {
this.faviconEL.href = this.canvas.toDataURL('image/png'); this.faviconEL.href = this.canvas.toDataURL('image/png');
} }
setVisible(isVisible : boolean) { async setVisible(isVisible : boolean) {
//Wait for it to have loaded the icon
const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500));
await new Promise(waiter);
this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
this._drawIcon(); this._drawIcon();
if (isVisible) this._drawDot(); if (isVisible) this._drawDot();
@ -158,9 +163,9 @@ if ($i) {
const connection = useStream().useChannel('main', null, 'UI'); const connection = useStream().useChannel('main', null, 'UI');
connection.on('notification', onNotification); connection.on('notification', onNotification);
watch(() => $i?.hasUnreadNotification, (hasAny) => { watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible(hasAny ?? false));
notificationDot.setVisible(hasAny ?? false);
}); if ($i.hasUnreadNotification) notificationDot.setVisible(true);
globalEvents.on('clientNotification', notification => onNotification(notification, true)); globalEvents.on('clientNotification', notification => onNotification(notification, true));