CyberMind-FR
5902ac500a
Major Features: • Centralized theme system across SecuBox and System Hub • Three theme modes: dark (default), light, and system (auto-detect) • Single theme setting in SecuBox controls both plugins • Real-time theme switching with OS preference detection SecuBox Changes: • Added theme.js manager for centralized theme control • Implemented CSS variables for dark/light mode (secubox.css) • Fixed hardcoded colors in dashboard.css, alerts.css, monitoring.css • Integrated theme.js in all 7 views (dashboard, modules, alerts, monitoring, settings, etc.) • Added get_theme RPC method to luci.secubox backend • Updated ACL permissions to include get_theme (read access) • Version updated to 0.1.1 System Hub Changes: • Added theme.js manager using SecuBox theme API • Implemented CSS variables for dark/light mode (dashboard.css) • Integrated theme.js in all 9 views (overview, health, services, logs, backup, components, remote, settings, diagnostics) • Version updated to 0.1.1 • README updated with maintainer info Theme System Architecture: • Configuration: /etc/config/secubox (option theme: dark|light|system) • RPCD Backend: luci.secubox/get_theme method • Frontend: theme.js modules (secubox/theme.js, system-hub/theme.js) • CSS Variables: --sb-bg, --sb-bg-card, --sb-border, --sb-text, --sb-text-muted, --sb-shadow • Auto-detection: prefers-color-scheme media query for system mode Documentation: • Added LUCI_DEVELOPMENT_REFERENCE.md with comprehensive LuCI development patterns • Documented ubus/RPC types, baseclass.extend() patterns, ACL structure • Common errors and solutions from implementation experience Bug Fixes: • Fixed SecuBox theme not applying visually (CSS variables now used) • Fixed missing secubox.css in view imports • Fixed ACL access denied for get_theme method • Fixed hardcoded colors preventing theme switching Testing: • Verified theme switching works in all SecuBox tabs • Verified theme switching works in all System Hub tabs • Verified dark/light/system modes function correctly • Verified single setting controls both plugins 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
52 lines
2.3 KiB
JavaScript
52 lines
2.3 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require rpc';
|
|
'require secubox/theme as Theme';
|
|
|
|
// Initialize theme
|
|
Theme.init();
|
|
|
|
var callModules = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'modules',
|
|
expect: { modules: [] }
|
|
});
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return callModules();
|
|
},
|
|
render: function(data) {
|
|
var modules = Array.isArray(data) ? data : (data && data.modules ? data.modules : []);
|
|
|
|
if (modules.length === 0) {
|
|
return E('div', {'class':'cbi-map'}, [
|
|
E('h2', {}, '📦 SecuBox Modules'),
|
|
E('div', {'style':'color:#856404;padding:20px;background:#fff3cd;border:2px solid #ffc107;border-radius:8px'},
|
|
E('p', {}, '⚠️ No modules found. Please check your configuration.'))
|
|
]);
|
|
}
|
|
|
|
return E('div', {'class':'cbi-map'}, [
|
|
E('h2', {}, '📦 SecuBox Modules'),
|
|
E('p', {'style':'color:#64748b;margin-bottom:20px'},
|
|
modules.length + ' modules available • ' +
|
|
modules.filter(function(m) { return m.installed; }).length + ' installed • ' +
|
|
modules.filter(function(m) { return m.running; }).length + ' running'
|
|
),
|
|
E('div', {'style':'display:grid;gap:12px'}, modules.map(function(m) {
|
|
return E('div', {'style':'background:#1e293b;padding:16px;border-radius:8px;border-left:4px solid '+(m.color||'#64748b')}, [
|
|
E('div', {'style':'font-weight:bold;color:#f1f5f9'}, m.name || m.id || 'Unknown'),
|
|
E('div', {'style':'color:#94a3b8;font-size:14px;margin:4px 0'}, m.description || ''),
|
|
E('div', {'style':'display:flex;gap:8px;margin-top:8px'}, [
|
|
E('span', {'style':'padding:2px 8px;border-radius:4px;font-size:12px;background:'+(m.running?'#22c55e20;color:#22c55e':m.installed?'#f59e0b20;color:#f59e0b':'#64748b20;color:#64748b')},
|
|
m.running ? '✓ Running' : m.installed ? '○ Stopped' : '- Not Installed'),
|
|
E('span', {'style':'padding:2px 8px;border-radius:4px;font-size:12px;background:#1e293b;color:#94a3b8;border:1px solid #334155'},
|
|
m.category || 'other')
|
|
])
|
|
]);
|
|
}))
|
|
]);
|
|
}
|
|
});
|