gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): Add toggle buttons for KISS chrome visibility

Browse Source 
- Add two toggle buttons in bottom-right corner
- 📐/📏 button: Toggle sidebar & top bar on/off
- 👁️ button: Switch between KISS and LuCI mode
- Three viewing modes: Full KISS, Content Only, LuCI
- Add .kiss-chrome-hidden class for minimized mode

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-02-12 06:42:31 +01:00
parent 73dabec337
commit ea5880a76b
1 changed files with 62 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
package/secubox/luci-app-secubox-portal/htdocs/luci-static/resources/secubox/kiss-theme.js
View File

@ -231,16 +231,26 @@ var KissThemeClass = baseclass.extend({
.kiss-panel-red { border-left: 3px solid ${c.red}; }
.kiss-panel-blue { border-left: 3px solid ${c.blue}; }
/* === Toggle Button === */
#kiss-toggle {
/* === Toggle Buttons === */
.kiss-toggles {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
font-size: 24px; cursor: pointer; opacity: 0.7;
background: ${c.card}; border: 1px solid ${c.line};
border-radius: 50%; width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
display: flex; flex-direction: column; gap: 8px;
}
#kiss-toggle:hover { opacity: 1; transform: scale(1.1); }
.kiss-toggle-btn {
font-size: 20px; cursor: pointer; opacity: 0.7;
background: ${c.card}; border: 1px solid ${c.line};
border-radius: 50%; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.2s;
}
.kiss-toggle-btn:hover { opacity: 1; transform: scale(1.1); border-color: ${c.green}; }
.kiss-toggle-btn.active { border-color: ${c.green}; background: rgba(0,200,83,0.15); }
/* === Minimized mode === */
.kiss-chrome-hidden .kiss-topbar,
.kiss-chrome-hidden .kiss-sidebar,
.kiss-chrome-hidden .kiss-overlay { display: none !important; }
.kiss-chrome-hidden .kiss-main { margin-left: 0 !important; margin-top: 0 !important; }
/* === Responsive === */
@media (max-width: 1024px) {
@ -279,25 +289,61 @@ var KissThemeClass = baseclass.extend({
}
},
chromeVisible: true,
addToggle: function() {
var self = this;
if (document.querySelector('#kiss-toggle')) return;
var toggle = document.createElement('div');
toggle.id = 'kiss-toggle';
toggle.innerHTML = '👁️';
toggle.title = 'Toggle KISS/LuCI mode';
toggle.onclick = function() { self.toggleMode(); };
document.body.appendChild(toggle);
if (document.querySelector('.kiss-toggles')) return;
var container = document.createElement('div');
container.className = 'kiss-toggles';
// Toggle KISS chrome (sidebar/topbar)
var chromeToggle = document.createElement('div');
chromeToggle.className = 'kiss-toggle-btn active';
chromeToggle.innerHTML = '📐';
chromeToggle.title = 'Toggle sidebar & top bar';
chromeToggle.onclick = function() { self.toggleChrome(); };
// Toggle LuCI mode
var modeToggle = document.createElement('div');
modeToggle.id = 'kiss-mode-toggle';
modeToggle.className = 'kiss-toggle-btn';
modeToggle.innerHTML = '👁️';
modeToggle.title = 'Switch to LuCI mode';
modeToggle.onclick = function() { self.toggleMode(); };
container.appendChild(chromeToggle);
container.appendChild(modeToggle);
document.body.appendChild(container);
},
toggleChrome: function() {
this.chromeVisible = !this.chromeVisible;
var btn = document.querySelector('.kiss-toggles .kiss-toggle-btn');
var root = document.querySelector('.kiss-root');
if (this.chromeVisible) {
btn.classList.add('active');
btn.innerHTML = '📐';
if (root) root.classList.remove('kiss-chrome-hidden');
} else {
btn.classList.remove('active');
btn.innerHTML = '📏';
if (root) root.classList.add('kiss-chrome-hidden');
}
},
toggleMode: function() {
this.isKissMode = !this.isKissMode;
var toggle = document.getElementById('kiss-toggle');
var toggle = document.getElementById('kiss-mode-toggle');
if (this.isKissMode) {
toggle.innerHTML = '👁️';
toggle.title = 'Switch to LuCI mode';
this.hideChrome();
} else {
toggle.innerHTML = '👁️‍🗨️';
toggle.title = 'Switch to KISS mode';
this.showChrome();
}
},