From 29b971b6d5451d0bba1fea21b981ea86a600aaaa Mon Sep 17 00:00:00 2001 From: Clar Fon Date: Wed, 25 Aug 2021 13:55:47 -0400 Subject: Actually compute proper foreground color for labels (#16729) --- web_src/js/components/ContextPopup.vue | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) (limited to 'web_src') diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue index df04f0d8d8..be428b4776 100644 --- a/web_src/js/components/ContextPopup.vue +++ b/web_src/js/components/ContextPopup.vue @@ -24,6 +24,22 @@ import {SvgIcon} from '../svg.js'; const {AppSubUrl} = window.config; +// NOTE: see models/issue_label.go for similar implementation +const srgbToLinear = (color) => { + color /= 255; + if (color <= 0.04045) { + return color / 12.92; + } + return ((color + 0.055) / 1.055) ** 2.4; +}; +const luminance = (colorString) => { + const r = srgbToLinear(parseInt(colorString.substring(0, 2), 16)); + const g = srgbToLinear(parseInt(colorString.substring(2, 4), 16)); + const b = srgbToLinear(parseInt(colorString.substring(4, 6), 16)); + return 0.2126 * r + 0.7152 * g + 0.0722 * b; +}; +const luminanceThreshold = 0.179; + export default { name: 'ContextPopup', @@ -74,14 +90,13 @@ export default { labels() { return this.issue.labels.map((label) => { - const red = parseInt(label.color.substring(0, 2), 16); - const green = parseInt(label.color.substring(2, 4), 16); - const blue = parseInt(label.color.substring(4, 6), 16); - let color = '#ffffff'; - if ((red * 0.299 + green * 0.587 + blue * 0.114) > 125) { - color = '#000000'; + let textColor; + if (luminance(label.color) < luminanceThreshold) { + textColor = '#ffffff'; + } else { + textColor = '#000000'; } - return {name: label.name, color: `#${label.color}`, textColor: color}; + return {name: label.name, color: `#${label.color}`, textColor}; }); } }, -- cgit v1.2.3