GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-07 05:07:10 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Scroll selected deck/notetype into view

Browse source
This commit is contained in:
Abdo 2025-10-26 18:59:49 +03:00
parent 3a0c3ef4e7
commit 60af80ba9d
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ts/lib/components/ItemChooser.svelte
View file

@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
item.name.toLowerCase().includes(searchQuery.toLowerCase()), item.name.toLowerCase().includes(searchQuery.toLowerCase()),
), ),
); );
const filteredElements: HTMLButtonElement[] = $state([]);
function onSelect(item: Item) { function onSelect(item: Item) {
selectedItem = item; selectedItem = item;
@ -69,6 +70,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
function onShown() {
searchInput?.focus();
for(const element of filteredElements) {
if(element.classList.contains("selected")) {
element.scrollIntoView({block: "start"});
}
}
}
$effect(() => { $effect(() => {
if (!selectedItem && items.length > 0) { if (!selectedItem && items.length > 0) {
selectedItem = items[0]; selectedItem = items[0];
@ -81,7 +91,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</LabelButton> </LabelButton>
<Shortcut {keyCombination} on:action={toggleModal} /> <Shortcut {keyCombination} on:action={toggleModal} />
<Modal bind:this={modal} onShown={() => searchInput?.focus()} dialogClass="modal-lg"> <Modal bind:this={modal} onShown={onShown} dialogClass="modal-lg">
<div slot="header" class="modal-header"> <div slot="header" class="modal-header">
<IconConstrain iconSize={90}> <IconConstrain iconSize={90}>
<Icon {icon} /> <Icon {icon} />
@ -125,8 +135,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
</div> </div>
<div class="item-grid"> <div class="item-grid">
{#each filteredItems as item (item.id)} {#each filteredItems as item, i (item.id)}
<button <button
bind:this={filteredElements[i]}
class="item-card" class="item-card"
class:selected={selectedItem?.id === item.id} class:selected={selectedItem?.id === item.id}
onclick={() => onSelect(item)} onclick={() => onSelect(item)}