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

18
src/public/index.html
View File

@ -204,7 +204,7 @@
<template v-if="searchedNodes.length > 0">
<div @click="onSearchResultNodeClick(node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
<div>
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]` ]">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]`, `text-[${getNodeTextColour(node.node_id)}]` ]">
<div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
</div>
</div>
@ -590,7 +590,7 @@
<div class="p-2 border-b border-gray-200 shadow">
<div class="flex">
<div class="my-auto mr-2">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]` ]">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]`, `text-[${getNodeTextColour(selectedNode.node_id)}]` ]">
<div class="mx-auto my-auto drop-shadow-sm">{{ selectedNode.short_name }}</div>
</div>
</div>
@ -2576,6 +2576,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";
},
},
computed: {
searchedNodes() {

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;')