fix: tabs closing, and appearance

This commit is contained in:
Artemy Egorov 2024-07-29 23:49:33 +03:00
parent 107a8245e4
commit 7d5d3dada9
5 changed files with 28 additions and 25 deletions

View file

@ -91,19 +91,24 @@ impl VigiState {
self.write_id_counter()?; self.write_id_counter()?;
write_tabs(&self.local_tabs_path, &self.tabs)?; write_tabs(&self.local_tabs_path, &self.tabs)?;
self.current_tab_index = self.tabs.len() - 1;
self.write_current_tab_index()?;
Ok(()) Ok(())
} }
pub fn remove_tab(&mut self, index: usize) -> Result<(), VigiError> { pub fn remove_tab(&mut self, index: usize) -> Result<(), VigiError> {
if self.tabs.len() == 1 { if self.tabs.len() - 1 == index && self.current_tab_index == index {
self.current_tab_index = 0; if self.current_tab_index > 0 {
} else { self.current_tab_index -= 1;
self.current_tab_index = self.current_tab_index + 1;
self.write_current_tab_index()?;
}
} }
self.tabs.remove(index); self.tabs.remove(index);
write_tabs(&self.local_tabs_path, &self.tabs)?; write_tabs(&self.local_tabs_path, &self.tabs)?;
self.write_current_tab_index()?;
Ok(()) Ok(())
} }

View file

@ -97,7 +97,7 @@ input::placeholder {
@apply hover:px-4; @apply hover:px-4;
@apply flex items-center justify-between gap-2 w-full; @apply flex items-center justify-between gap-2 w-full truncate;
} }
.close-button { .close-button {
@ -121,10 +121,6 @@ input::placeholder {
@apply hover:bg-vigi-45; @apply hover:bg-vigi-45;
} }
.tab-title {
@apply truncate;
}
::selection { ::selection {
@apply bg-vigi-60; @apply bg-vigi-60;
} }

View file

@ -16,7 +16,7 @@
let currentTabIndex = 0; let currentTabIndex = 0;
state.subscribe(async (state) => { state.subscribe(async (state) => {
tabs = state.tabs; tabs = state.tabs.toReversed();
currentTabIndex = state.current_tab_index; currentTabIndex = state.current_tab_index;
if (tabs.length === 0) { if (tabs.length === 0) {
@ -38,7 +38,11 @@
<div class="tabs"> <div class="tabs">
{#each tabs as tab, i (tab.id)} {#each tabs as tab, i (tab.id)}
<Tab {tab} active={currentTabIndex === i} id={i} /> <Tab
{tab}
active={currentTabIndex === tabs.length - 1 - i}
id={tabs.length - 1 - i}
/>
{/each} {/each}
</div> </div>
{/if} {/if}

View file

@ -3,7 +3,6 @@
import { removeTab, selectTab } from "$lib/utils"; import { removeTab, selectTab } from "$lib/utils";
import { slide } from "svelte/transition"; import { slide } from "svelte/transition";
import Close from "$lib/icons/Close.svelte"; import Close from "$lib/icons/Close.svelte";
import Button from "./Button.svelte";
export let active = false; export let active = false;
export let tab: StateTab; export let tab: StateTab;
@ -16,12 +15,20 @@
</script> </script>
<div <div
class="flex gap-1 items-center" class="flex gap-1 items-center shrink"
on:mouseenter={() => (hovered = true)} on:mouseenter={() => (hovered = true)}
on:mouseleave={() => (hovered = false)} on:mouseleave={() => (hovered = false)}
role="tab" role="tab"
tabindex={id} tabindex={id}
> >
{#if hovered}
<button
class="close-button"
transition:slide={{ duration: 100, axis: "x" }}
on:click={() => removeTab(id)}><Close /></button
>
{/if}
<button <button
class="tab" class="tab"
class:active class:active
@ -31,16 +38,6 @@
selectTab(id); selectTab(id);
}} }}
> >
<div class="tab-title">
{tab.title} {tab.title}
</div>
</button> </button>
{#if hovered}
<button
class="close-button"
transition:slide={{ duration: 100, axis: "x" }}
on:click={() => removeTab(id)}><Close /></button
>
{/if}
</div> </div>

View file

@ -20,6 +20,7 @@
topBarInput.subscribe((val) => { topBarInput.subscribe((val) => {
input = val; input = val;
currentInput = val;
}); });
let iEl: HTMLInputElement; let iEl: HTMLInputElement;