AkkomaGang
/
akkoma-fe
4
13
Fork 56
Code Issues 71 Pull Requests 16 Projects Releases 1 Wiki Activity

a11y: draw gap around notification dot in favicon (#94)
ci/woodpecker/push/woodpecker Pipeline was successful Details 

Reviewed-on: AkkomaGang/pleroma-fe#94
Co-authored-by: sfr <sol@solfisher.com>
Co-committed-by: sfr <sol@solfisher.com>
This commit is contained in:
sfr 2022-08-02 09:14:42 +00:00 committed by floatingghost
parent 3cc0b44cb6
commit 7f61beff7a
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)