make badge just a ball, make it use theming

This commit is contained in:
Shpuld Shpuldson 2020-11-02 16:45:15 +02:00
parent 350eb489c2
commit 1fa046126e
3 changed files with 6 additions and 7 deletions

View File

@ -4,9 +4,7 @@ const createFaviconService = () => {
let favimg, favcanvas, favcontext, favicon let favimg, favcanvas, favcontext, favicon
const faviconWidth = 48 const faviconWidth = 48
const faviconHeight = 48 const faviconHeight = 48
const strokeColor = 'rgb(200, 0, 0)' const badgeRadius = 14
const fillColor = 'rgb(255, 90, 90)'
const badgeRadius = 12
const initFaviconService = () => { const initFaviconService = () => {
const nodes = document.getElementsByTagName('link') const nodes = document.getElementsByTagName('link')
@ -34,13 +32,14 @@ const createFaviconService = () => {
clearFaviconBadge() clearFaviconBadge()
const style = getComputedStyle(document.body)
const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
favcontext.fillStyle = fillColor favcontext.fillStyle = badgeColor
favcontext.strokeStyle = strokeColor
favcontext.beginPath() favcontext.beginPath()
favcontext.arc(faviconWidth - badgeRadius, faviconHeight - badgeRadius, badgeRadius, 0, 2 * Math.PI, false) favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
favcontext.fill() favcontext.fill()
favcontext.stroke()
favicon.href = favcanvas.toDataURL('image/png') favicon.href = favcanvas.toDataURL('image/png')
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB