Add 3 new views (Card, Grouped, Detail) and view dropdown
Replace view toggle buttons with dropdown menu containing all 7 views. Card view: 2-column grid with bigger cards. Grouped view: entries grouped by folder with sticky headers. Detail view: single entry at a time, large text, prev/next navigation. Arrow key navigation for detail view.
This commit is contained in:
+11
-5
@@ -156,11 +156,17 @@
|
||||
<div style="display:flex;gap:.4rem;align-items:center;flex-wrap:wrap">
|
||||
<button class="btn btn-outline btn-sm" id="trashBtn" onclick="toggleTrash()" title="Trash">🗑️</button>
|
||||
<button class="btn btn-outline btn-sm" onclick="showShortcutsHelp()" title="Shortcuts">⌨️</button>
|
||||
<div class="view-toggle" id="viewToggle">
|
||||
<button class="view-btn active" data-view="grid">🟫 Grid</button>
|
||||
<button class="view-btn" data-view="compact">📝 Compact</button>
|
||||
<button class="view-btn" data-view="table">📊 Table</button>
|
||||
<button class="view-btn" data-view="list">📋 List</button>
|
||||
<div class="view-dropdown" id="viewDropdown">
|
||||
<button class="btn btn-outline btn-sm" id="viewDropdownBtn">🟫 Grid ▾</button>
|
||||
<div class="view-dropdown-menu hidden" id="viewDropdownMenu">
|
||||
<button class="view-opt" data-view="grid">🟫 Grid</button>
|
||||
<button class="view-opt" data-view="compact">📝 Compact</button>
|
||||
<button class="view-opt" data-view="list">📋 List</button>
|
||||
<button class="view-opt" data-view="table">📊 Table</button>
|
||||
<button class="view-opt" data-view="card">🃏 Card</button>
|
||||
<button class="view-opt" data-view="grouped">📂 Grouped</button>
|
||||
<button class="view-opt" data-view="detail">🔍 Detail</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user