dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-04-26 16:57:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: badge colors always match TYPE_COLORS — single source of truth

Browse Source 
Badge CSS (.badge-advert etc.) was hardcoded in style.css with
different colors than TYPE_COLORS. Now roles.js generates badge
CSS from TYPE_COLORS on page load via syncBadgeColors(). Customizer
calls syncBadgeColors() after changes. Badges always match the
color pickers and TYPE_COLORS, in both light and dark mode.
This commit is contained in:
you
2026-03-23 02:24:51 +00:00
parent 918589fc8c
commit 5d20269d05
3 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/customize.js
View File

@@ -237,28 +237,13 @@
void nav.offsetHeight;
nav.style.background = '';
}
// Inject type color overrides for badges
applyTypeColorCSS();
// Sync badge CSS from TYPE_COLORS
if (window.syncBadgeColors) window.syncBadgeColors();
}
let typeColorStyleEl = null;
function applyTypeColorCSS() {
if (!typeColorStyleEl) {
typeColorStyleEl = document.createElement('style');
typeColorStyleEl.id = 'cust-type-colors';
document.head.appendChild(typeColorStyleEl);
}
var tc = state.typeColors || {};
var map = { ADVERT: 'advert', GRP_TXT: 'grp-txt', TXT_MSG: 'txt-msg', ACK: 'ack', REQUEST: 'req', RESPONSE: 'response', TRACE: 'trace', PATH: 'path' };
var css = '';
for (var type in map) {
if (tc[type]) {
var cls = map[type];
css += '.badge-' + cls + ' { background: ' + tc[type] + '22; color: ' + tc[type] + '; }\n';
css += '[data-theme="dark"] .badge-' + cls + ' { background: ' + tc[type] + '33; color: ' + tc[type] + '; }\n';
}
}
typeColorStyleEl.textContent = css;
// Now handled by syncBadgeColors in roles.js
if (window.syncBadgeColors) window.syncBadgeColors();
}
function resetPreview() {

4
public/index.html
View File

@@ -81,7 +81,7 @@
<main id="app" role="main"></main>
<script src="vendor/qrcode.js"></script>
<script src="roles.js?v=1774229396"></script>
<script src="roles.js?v=1774232691"></script>
<script src="region-filter.js?v=1774325000"></script>
<script src="hop-resolver.js?v=1774223973"></script>
<script src="hop-display.js?v=1774221932"></script>
@@ -101,6 +101,6 @@
<script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774232592" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774232691" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>

28
public/roles.js
View File

@@ -20,6 +20,34 @@
UNKNOWN: '#6b7280'
};
// Badge CSS class name mapping
const TYPE_BADGE_MAP = {
ADVERT: 'advert', GRP_TXT: 'grp-txt', TXT_MSG: 'txt-msg', ACK: 'ack',
REQUEST: 'req', RESPONSE: 'response', TRACE: 'trace', PATH: 'path',
ANON_REQ: 'anon-req', UNKNOWN: 'unknown'
};
// Generate badge CSS from TYPE_COLORS — single source of truth
window.syncBadgeColors = function() {
var el = document.getElementById('type-color-badges');
if (!el) { el = document.createElement('style'); el.id = 'type-color-badges'; document.head.appendChild(el); }
var css = '';
for (var type in TYPE_BADGE_MAP) {
var color = window.TYPE_COLORS[type];
if (!color) continue;
var cls = TYPE_BADGE_MAP[type];
css += '.badge-' + cls + ' { background: ' + color + '20; color: ' + color + '; }\n';
}
el.textContent = css;
};
// Auto-sync on load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', window.syncBadgeColors);
} else {
window.syncBadgeColors();
}
window.ROLE_LABELS = {
repeater: 'Repeaters', companion: 'Companions', room: 'Room Servers',
sensor: 'Sensors', observer: 'Observers'