ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ensure light background uses dark text

Browse Source
This commit is contained in:
liamcottle
2024-09-07 21:57:23 +12:00
parent 18c3ccb7cc
commit 954f10868f
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/public/text-messages-embed.html
View File

@ -54,7 +54,7 @@
<div class="mr-2 mt-2">
<a target="_blank" :href="`/?node_id=${message.from}`">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]` ]">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]`, `text-[${getNodeTextColour(message.from)}]` ]">
<div class="mx-auto my-auto drop-shadow-sm">{{ getNodeShortName(message.from) }}</div>
</div>
</a>
@ -326,6 +326,20 @@
// convert node id to a hex colour
return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
},
getNodeTextColour(nodeId) {
// extract rgb components
const r = (nodeId & 0xFF0000) >> 16;
const g = (nodeId & 0x00FF00) >> 8;
const b = nodeId & 0x0000FF;
// calculate brightness
const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
// determine text color based on brightness
return brightness > 0.5 ? "#000000" : "#FFFFFF";
},
escapeMessageText(text) {
return text.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')