fef/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

a11y: draw gap around notification dot in favicon (#94)

Browse source 
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)