jazzymc/unraid-glass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix 23 theme bugs across all pages: toggles, text visibility, icons, bars, shadows, layout

Browse Source 
Phase 1: Fix toggle switch knob positioning (absolute + translateY centering)
Phase 2: Fix text visibility on Main/Shares thead td, Plugins descriptions, Settings/Tools PanelText labels
Phase 3: Fix icon coloring - JS replacement for Tailscale/ZFS Master with selfh.st light SVGs, CSS invert for remaining plugin imgs
Phase 4: Softer box-shadow on inner tables, stacked Panel rounding for Array Op
Phase 5: Browse table styling, form glass containers, Apps detail panel transparency
Phase 6: Main page usage bars (8px thin + gradient), plugin/VM button visibility
Phase 7: Header overflow fix, Docker folder-preview softening, Apps ribbon clipping, ZFS Master toggle spacing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
2026-02-24 22:07:24 +02:00
parent a898c8fea2
commit 55ad7c66bc
3 changed files with 391 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
sidebar.js
View File

@@ -324,7 +324,10 @@
var replaceTimer = null;
function debouncedReplace() {
if (replaceTimer) clearTimeout(replaceTimer);
replaceTimer = setTimeout(replaceIcons, 200);
replaceTimer = setTimeout(function() {
replaceIcons();
replacePluginIcons();
}, 200);
}
// Watch for DOM changes (AJAX loads, FolderView manipulation)
@@ -343,14 +346,48 @@
observer.observe(target, { childList: true, subtree: true });
}
// Replace Tailscale sidebar icon with light SVG
function replaceTailscaleIcon() {
var imgs = document.querySelectorAll('img[alt="Tailscale"]');
// Plugin icon source → selfh.st light SVG replacement
// Maps partial src paths to icon names in /custom/assets/icons/
var PLUGIN_ICON_MAP = {
'/plugins/tailscale/': 'tailscale',
'/plugins/zfs.master/': 'openzfs',
// SNMP has no selfh.st icon — leave for CSS invert filter
};
// Replace plugin icons on Settings/Plugins/Tools pages with selfh.st light SVGs.
// Also replaces Tailscale sidebar icon (img[alt="Tailscale"]).
function replacePluginIcons() {
// Settings/Tools/Plugins grid icons
var imgs = document.querySelectorAll('#displaybox img, img[alt="Tailscale"]');
imgs.forEach(function(img) {
var url = CDN_SVG + '/tailscale-light.svg';
if (img.getAttribute('src') !== url) {
img.src = url;
img.removeAttribute('onerror');
// Skip container icons (handled by replaceIcons)
if (img.classList.contains('img')) return;
// Skip sidebar logo
if (img.id === 'sidebar-logo') return;
// Skip already replaced
if (img.getAttribute('data-glass-icon')) return;
var src = img.getAttribute('src') || '';
var keys = Object.keys(PLUGIN_ICON_MAP);
for (var i = 0; i < keys.length; i++) {
if (src.indexOf(keys[i]) !== -1) {
var iconName = PLUGIN_ICON_MAP[keys[i]];
var url = CDN_SVG + '/' + iconName + '-light.svg';
img.src = url;
img.setAttribute('data-glass-icon', iconName);
img.removeAttribute('onerror');
return;
}
}
// Also handle Tailscale by alt attribute (sidebar)
if (img.alt === 'Tailscale') {
var tsUrl = CDN_SVG + '/tailscale-light.svg';
if (src !== tsUrl) {
img.src = tsUrl;
img.setAttribute('data-glass-icon', 'tailscale');
img.removeAttribute('onerror');
}
}
});
}
@@ -359,10 +396,10 @@
function initIcons() {
// Initial replacement
setTimeout(replaceIcons, 500);
setTimeout(replaceTailscaleIcon, 500);
setTimeout(replacePluginIcons, 500);
// Second pass after FolderView finishes its DOM work
setTimeout(replaceIcons, 2000);
setTimeout(replaceTailscaleIcon, 2000);
setTimeout(replacePluginIcons, 2000);
// Start watching for future changes
startObserver();
}