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 #94

Merged
floatingghost merged 1 commits from nbsp/pleroma-fe:a11y/colorblind-favicon into develop 2022-08-02 09:14:42 +00:00
Conversation 0 Commits 1 Files Changed 1 +9
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)