feat(ui): zen mode and panel toggles
- z: toggle zen mode (hide both sidebars) - [: toggle tag rail - ]: toggle peek pane - Panel state persisted in localStorage - CSS grid transition for smooth collapse
This commit is contained in:
+30
@@ -1515,9 +1515,39 @@
|
|||||||
break;
|
break;
|
||||||
case '1': switchView('stream'); break;
|
case '1': switchView('stream'); break;
|
||||||
case '2': switchView('cards'); break;
|
case '2': switchView('cards'); break;
|
||||||
|
case 'z': toggleZen(); break;
|
||||||
|
case '[': togglePanel('rail'); break;
|
||||||
|
case ']': togglePanel('peek'); break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function togglePanel(panel) {
|
||||||
|
const m = $('main');
|
||||||
|
const cls = panel === 'rail' ? 'hide-rail' : 'hide-peek';
|
||||||
|
m.classList.toggle(cls);
|
||||||
|
localStorage.setItem('nib:' + cls, m.classList.contains(cls) ? '1' : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleZen() {
|
||||||
|
const m = $('main');
|
||||||
|
const isZen = m.classList.contains('hide-rail') && m.classList.contains('hide-peek');
|
||||||
|
if (isZen) {
|
||||||
|
m.classList.remove('hide-rail', 'hide-peek');
|
||||||
|
localStorage.setItem('nib:hide-rail', '');
|
||||||
|
localStorage.setItem('nib:hide-peek', '');
|
||||||
|
} else {
|
||||||
|
m.classList.add('hide-rail', 'hide-peek');
|
||||||
|
localStorage.setItem('nib:hide-rail', '1');
|
||||||
|
localStorage.setItem('nib:hide-peek', '1');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
(function restorePanels() {
|
||||||
|
const m = $('main');
|
||||||
|
if (localStorage.getItem('nib:hide-rail')) m.classList.add('hide-rail');
|
||||||
|
if (localStorage.getItem('nib:hide-peek')) m.classList.add('hide-peek');
|
||||||
|
})();
|
||||||
|
|
||||||
function scrollSelectedIntoView() {
|
function scrollSelectedIntoView() {
|
||||||
const el = $(`.entity-item[data-index="${state.selectedIndex}"], .card-row[data-index="${state.selectedIndex}"]`);
|
const el = $(`.entity-item[data-index="${state.selectedIndex}"], .card-row[data-index="${state.selectedIndex}"]`);
|
||||||
if (el) el.scrollIntoView({ block: 'nearest' });
|
if (el) el.scrollIntoView({ block: 'nearest' });
|
||||||
|
|||||||
@@ -179,8 +179,16 @@ main {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 192px 1fr 400px;
|
grid-template-columns: 192px 1fr 400px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transition: grid-template-columns var(--t-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main.hide-rail { grid-template-columns: 0px 1fr 400px; }
|
||||||
|
main.hide-peek { grid-template-columns: 192px 1fr 0px; }
|
||||||
|
main.hide-rail.hide-peek { grid-template-columns: 0px 1fr 0px; }
|
||||||
|
|
||||||
|
main.hide-rail #tag-rail { overflow: hidden; border-right: none; }
|
||||||
|
main.hide-peek #detail-pane { overflow: hidden; border-left: none; }
|
||||||
|
|
||||||
/* ── TAG RAIL ───────────────────────────────────────── */
|
/* ── TAG RAIL ───────────────────────────────────────── */
|
||||||
#tag-rail {
|
#tag-rail {
|
||||||
background: var(--surf);
|
background: var(--surf);
|
||||||
|
|||||||
Reference in New Issue
Block a user