From 459e6841179979188b119be406e030e1afaf5516 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:00:28 +0100
Subject: [PATCH] fixed some of the issues with it
---
packages/frontend/src/ui/_common_/common.vue | 37 ++++++++++----------
1 file changed, 19 insertions(+), 18 deletions(-)
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 78fd2d2172..a5e5d19a35 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -75,28 +75,29 @@ class NotificationFavIconDot {
src : string | null = null;
ctx : CanvasRenderingContext2D | null = null;
favconImage : HTMLImageElement | null = null;
- loaded = false;
+ faviconEL : HTMLLinkElement;
+ hasLoaded : Promise;
constructor() {
this.canvas = document.createElement('canvas');
+ this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
this.src = this.faviconEL.getAttribute('href');
this.ctx = this.canvas.getContext('2d');
-
+
this.favconImage = document.createElement('img');
this.favconImage.src = this.faviconEL.href;
+ this.hasLoaded = new Promise((resolve, reject) => {
+ this.favconImage.onload = () => {
+ this.canvas.width = this.favconImage.width;
+ this.canvas.height = this.favconImage.height;
- this.favconImage.onload = () => {
- if (!this.favconImage) return;
-
- this.canvas.width = this.favconImage.width;
- this.canvas.height = this.favconImage.height;
- this.loaded = true;
- };
+ // resolve();
+ setTimeout(() => resolve(), 500);
+ };
+ });
}
- faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
-
private _createFaviconElem() {
const newLink = document.createElement('link');
newLink.rel = 'icon';
@@ -107,6 +108,7 @@ class NotificationFavIconDot {
private _drawIcon() {
if (!this.ctx || !this.favconImage) return;
+ this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
}
@@ -114,24 +116,23 @@ class NotificationFavIconDot {
if (!this.ctx || !this.favconImage) return;
this.ctx.beginPath();
this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
- this.ctx.fillStyle = 'red';
- this.ctx.strokeStyle = this.ctx.fillStyle;
+ this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
+ this.ctx.strokeStyle = 'white';
this.ctx.fill();
this.ctx.stroke();
}
- private _drawFavicon() {
+ private _setFavicon() {
this.faviconEL.href = this.canvas.toDataURL('image/png');
}
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);
+ await this.hasLoaded;
+ console.log(this.hasLoaded);
this._drawIcon();
if (isVisible) this._drawDot();
- this._drawFavicon();
+ this._setFavicon();
}
}