Commit 63c0d797 authored by Jiří Helebrant's avatar Jiří Helebrant

New icon shape

parent 817534d3
......@@ -34,10 +34,10 @@ const getDomainStatusCount = async domains => {
}
const getTabIconColor = async tabId => {
// const color = await storage('tabColors', 'get', { id: tabId })
// if (color) {
// return color
// }
const color = await storage('tabColors', 'get', { id: tabId })
if (color) {
return color
}
const domains = await storage('tabDomains', 'get', { id: tabId })
if (domains && domains.length > 0) {
......@@ -57,24 +57,80 @@ const getTabIconColor = async tabId => {
return config.colors.outline
}
const drawIconHalf = (ctx, color, half = 'top') => {
const drawTabStatus = (ctx, color) => {
ctx.fillStyle = color
ctx.beginPath()
ctx.arc(24, 24, 22, 0, Math.PI, half === 'top')
ctx.moveTo(26.737, 5.661)
ctx.lineTo(26.737, 5.661)
ctx.quadraticCurveTo(35.445, 5.661, 40.722, 9.592)
ctx.lineTo(40.722, 9.592)
ctx.lineTo(40.722, 9.592)
ctx.quadraticCurveTo(46, 13.524, 46, 23.868)
ctx.lineTo(46, 23.868)
ctx.lineTo(46, 23.868)
ctx.quadraticCurveTo(46, 42.339, 27.476, 42.339)
ctx.lineTo(27.476, 42.339)
ctx.lineTo(15.76, 42.339)
ctx.lineTo(15.76, 5.661)
ctx.lineTo(26.737, 5.661)
ctx.closePath()
ctx.fillStyle = color
ctx.stroke()
ctx.fill()
ctx.fillStyle = config.colors.stroke
ctx.lineWidth = 3
ctx.strokeStyle = config.colors.stroke
}
const drawResolverStatus = (ctx, color) => {
ctx.fillStyle = color
ctx.beginPath()
ctx.moveTo(2.154, 5.661)
ctx.lineTo(11.826, 5.661)
ctx.lineTo(10.642, 27.935)
ctx.lineTo(3.338, 27.935)
ctx.lineTo(2.154, 5.661)
ctx.closePath()
ctx.moveTo(6.99, 32.411)
ctx.lineTo(6.99, 32.411)
ctx.quadraticCurveTo(9.048, 32.411, 10.514, 33.877)
ctx.lineTo(10.514, 33.877)
ctx.lineTo(10.514, 33.877)
ctx.quadraticCurveTo(11.98, 35.343, 11.98, 37.401)
ctx.lineTo(11.98, 37.401)
ctx.lineTo(11.98, 37.401)
ctx.quadraticCurveTo(11.98, 39.459, 10.514, 40.899)
ctx.lineTo(10.514, 40.899)
ctx.lineTo(10.514, 40.899)
ctx.quadraticCurveTo(9.048, 42.339, 6.99, 42.339)
ctx.lineTo(6.99, 42.339)
ctx.lineTo(6.99, 42.339)
ctx.quadraticCurveTo(4.932, 42.339, 3.466, 40.899)
ctx.lineTo(3.466, 40.899)
ctx.lineTo(3.466, 40.899)
ctx.quadraticCurveTo(2, 39.459, 2, 37.401)
ctx.lineTo(2, 37.401)
ctx.lineTo(2, 37.401)
ctx.quadraticCurveTo(2, 35.343, 3.466, 33.877)
ctx.lineTo(3.466, 33.877)
ctx.lineTo(3.466, 33.877)
ctx.quadraticCurveTo(4.932, 32.411, 6.99, 32.411)
ctx.lineTo(6.99, 32.411)
ctx.closePath()
ctx.stroke()
ctx.fill()
}
const drawIcon = async tabId => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
await drawIconHalf(ctx, await getResolverIconColor(), 'bottom')
await drawIconHalf(ctx, await getTabIconColor(tabId), 'top')
ctx.strokeStyle = colors.outline
ctx.lineWidth = 6
const resolverIconColor = await getResolverIconColor()
if (resolverIconColor !== colors.green) {
drawResolverStatus(ctx, resolverIconColor)
}
drawTabStatus(ctx, await getTabIconColor(tabId))
return ctx.getImageData(0, 0, 48, 48)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment