romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 04:57:59 +00:00
Code Issues Releases Activity

Finish sliding active tab indicator

Browse Source
This commit is contained in:
Romein van Buren 2023-12-22 14:04:38 +01:00
parent 9eac9ae935
commit 2040a356fd
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
1 changed files with 3 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/tabbar.svelte
View File

@ -14,26 +14,18 @@
const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 }); const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 });
const liElements = {}; const liElements = {};
let navEl; let navEl;
let activeLiEl;
function select(tabKey, activeLi) { function select(tabKey) {
selectedKey = tabKey; selectedKey = tabKey;
activeLiEl = activeLi;
dispatch('select', tabKey); dispatch('select', tabKey);
} }
function moveActiveIndicator(target) { function moveActiveIndicator(target = liElements[selectedKey]) {
if (!compact) { if (!compact) {
return; return;
} }
const navRect = navEl.getBoundingClientRect(); const navRect = navEl.getBoundingClientRect();
if (!target) {
const activeLiRect = activeLiEl?.getBoundingClientRect() || navRect;
$activeIndicatorLeft = activeLiRect.x - navRect.x;
$activeIndicatorRight = navRect.right - activeLiRect.right;
}
const itemRect = target.getBoundingClientRect(); const itemRect = target.getBoundingClientRect();
$activeIndicatorLeft = itemRect.x - navRect.x; $activeIndicatorLeft = itemRect.x - navRect.x;
$activeIndicatorRight = navRect.right - itemRect.right; $activeIndicatorRight = navRect.right - itemRect.right;
@ -57,7 +49,7 @@
on:mouseenter={event => moveActiveIndicator(event.target)} on:mouseenter={event => moveActiveIndicator(event.target)}
on:mouseleave={() => moveActiveIndicator()} on:mouseleave={() => moveActiveIndicator()}
> >
<button class="tab" on:click={event => select(tab.key, event.target.parentElement)}> <button class="tab" on:click={() => select(tab.key)}>
{#if tab.icon} <Icon name={tab.icon} /> {/if} {#if tab.icon} <Icon name={tab.icon} /> {/if}
<span class="label">{tab.title}</span> <span class="label">{tab.title}</span>
</button> </button>