super-buckets: split tab click (activate) from caret click (dropdown)
Clicking the super-bucket tab now activates the last-shown child directly. Only the caret arrow on the right opens the dropdown popover. Caret has its own hit area with accent hover highlight. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
04b52ecc19
commit
527305355c
5 files changed
+64
-16
No files matched your search
@@ -309,7 +309,7 @@ function renderBar() {
|
||||
const shown = tileFor(b);
|
||||
const c = shown.color || '#64748b';
|
||||
const groupActive = state.activeBucket == b.id || kids.some(k => k.id == state.activeBucket);
|
||||
return `<button class="${tab(groupActive)} bucket-super" data-bucket-super="${b.id}" data-super-shown="${shown.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${groupActive ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">${esc(shown.name)}</span><i class="ph ph-caret-down text-[10px] ml-0.5 opacity-70"></i></button>`;
|
||||
return `<button class="${tab(groupActive)} bucket-super" data-bucket-super="${b.id}" data-super-shown="${shown.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${groupActive ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">${esc(shown.name)}</span><span class="super-caret" data-super-caret="${b.id}"><i class="ph ph-caret-down text-[10px]"></i></span></button>`;
|
||||
}
|
||||
const c = b.color || '#64748b';
|
||||
const active = state.activeBucket == b.id;
|
||||
@@ -462,11 +462,21 @@ function renderBar() {
|
||||
const isUser = isSuperTile || !SPECIAL.includes(bid);
|
||||
|
||||
if (isSuperTile) {
|
||||
// Click opens the dropdown popover instead of activating the
|
||||
// parent directly. The dropdown lists parent + every child.
|
||||
t.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSuperDropdown(t, parseInt(bid, 10));
|
||||
// Caret arrow opens the dropdown; clicking the rest of the
|
||||
// tab activates the last-shown child (or parent).
|
||||
const caret = t.querySelector('[data-super-caret]');
|
||||
if (caret) {
|
||||
caret.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSuperDropdown(t, parseInt(bid, 10));
|
||||
});
|
||||
}
|
||||
t.addEventListener('click', () => {
|
||||
const shownId = t.dataset.superShown;
|
||||
setActiveBucket(shownId || bid);
|
||||
state.activeGroup = null;
|
||||
renderBar();
|
||||
window._renderBoard();
|
||||
});
|
||||
} else {
|
||||
t.addEventListener('click', () => { setActiveBucket(bid); state.activeGroup = null; renderBar(); window._renderBoard(); });
|
||||
|
||||
Reference in new issue
Block a user