AkkomaGang
/
akkoma-fe
4
13
Fork 57
Code Issues 72 Pull Requests 17 Projects Releases 1 Wiki Activity

a11y: draw gap around notification dot in favicon
ci/woodpecker/pr/woodpecker Pipeline was successful Details

This commit is contained in:
Sol Fisher Romanoff 2022-08-01 10:42:57 +03:00
parent 7c675f1ded
commit 1e9b8f7ade
Signed by untrusted user who does not match committer: nbsp
GPG Key ID: 9D3F2B64F2341B62
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/services/favicon_service/favicon_service.js
View File

@ -3,6 +3,7 @@ const createFaviconService = () => {
const faviconWidth = 128
const faviconHeight = 128
const badgeRadius = 32
const gapWidth = 24
const initFaviconService = () => {
const nodes = document.querySelectorAll('link[rel="icon"]')
@ -47,6 +48,14 @@ const createFaviconService = () => {
if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
}
// draw bigger transparent circle to create gap
favcontext.globalCompositeOperation = 'destination-out'
favcontext.beginPath()
favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius + gapWidth, 0, 2 * Math.PI, false)
favcontext.fill()
favcontext.globalCompositeOperation = 'source-over'
favcontext.fillStyle = badgeColor
favcontext.beginPath()
favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)