gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 17:29:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Attempt to Fix Tab Boundaries

Browse Source
This commit is contained in:
Youwes09
2026-04-22 10:57:03 -05:00
parent 690f59c602
commit 7dd4f52308
4 changed files with 9 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/discover/components/Search.svelte
+2 -9
View File
@@ -30,17 +30,10 @@
if (!tabsEl) return;
const active = tabsEl.querySelector<HTMLElement>(".tab.tabActive");
if (!active) return;
const containerLeft = tabsEl.getBoundingClientRect().left;
tabIndicator = {
left: active.getBoundingClientRect().left - containerLeft,
width: active.offsetWidth,
};
tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
}
$effect(() => {
tab; // reactive on tab change
if (anims) requestAnimationFrame(updateIndicator);
});
$effect(() => { tab; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
const SEARCH_PAGES = 3;
const SEARCH_LIMIT = 200;
src/features/extensions/components/Extensions.svelte
+2 -3
View File
@@ -18,8 +18,7 @@
if (!tabsEl) return;
const active = tabsEl.querySelector<HTMLElement>(".tab.active");
if (!active) return;
const containerLeft = tabsEl.getBoundingClientRect().left;
tabIndicator = { left: active.getBoundingClientRect().left - containerLeft, width: active.offsetWidth };
tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
}
let extensions: Extension[] = $state([]);
@@ -33,7 +32,7 @@
let expanded = $state(new Set<string>());
let panel = $state<Panel>(null);
$effect(() => { filter; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
$effect(() => { filter; extensions; if (anims) requestAnimationFrame(() => requestAnimationFrame(updateIndicator)); });
let externalUrl = $state("");
let installing = $state(false);
src/features/library/components/Library.svelte
+3 -5
View File
@@ -166,7 +166,7 @@
if (!store.categories.some(c => c.id === id)) untrack(() => { store.libraryFilter = "library"; });
});
$effect(() => { tab; untrack(() => exitSelectMode()); });
$effect(() => { tab; setTimeout(updateTabIndicator); });
$effect(() => { tab; counts; requestAnimationFrame(updateTabIndicator); });
let prevChapterId: number | null = null;
$effect(() => {
@@ -179,9 +179,7 @@
if (!tabsEl) return;
const active = tabsEl.querySelector<HTMLElement>(".tab.active");
if (!active) return;
const parent = tabsEl.getBoundingClientRect();
const rect = active.getBoundingClientRect();
tabIndicator = { left: rect.left - parent.left, width: rect.width };
tabIndicator = { left: active.offsetLeft, width: active.offsetWidth };
}
function enterSelectMode(id?: number) { selectMode = true; if (id !== undefined) selectedIds = new Set([id]); }
@@ -459,7 +457,7 @@
window.addEventListener("keydown", onKeyDown);
document.addEventListener("mousedown", onDocMouseDown, true);
updateTabIndicator();
requestAnimationFrame(updateTabIndicator);
return () => {
ro.disconnect(); unsub();
src/features/library/components/LibraryToolbar.svelte
+2 -2
View File
@@ -202,8 +202,8 @@
.tab-slide-indicator { position: absolute; top: 2px; bottom: 2px; border-radius: var(--radius-sm); background: var(--accent-muted); border: 1px solid var(--accent-dim); pointer-events: none; z-index: 0; transition: left 0.22s cubic-bezier(0.16,1,0.3,1), width 0.22s cubic-bezier(0.16,1,0.3,1); }
.tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); cursor: grab; }
.tab:hover { color: var(--text-muted); }
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
.tabs-anims .tab.active { background: transparent; border-color: transparent; }
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid transparent; }
.tabs-anims .tab.active { background: transparent; }
.tab-dragging { opacity: 0.4; cursor: grabbing; }
.tab-drop-target { background: var(--accent-muted) !important; color: var(--accent-fg) !important; outline: 1px dashed var(--accent); }
.tab-insert-bar { width: 2px; height: 22px; background: var(--accent); border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 6px var(--accent); pointer-events: none; }