GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Factor out ButtonToolbar from TagAutocomplete

Browse source
This commit is contained in:
Henrik Giesel 2021-06-25 18:14:32 +02:00
parent 808d01c4fb
commit 05120c79b0
2 changed files with 37 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ts/editor/TagAutocomplete.svelte
View file

@ -3,13 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import ButtonToolbar from "components/ButtonToolbar.svelte";
import WithDropdownMenu from "components/WithDropdownMenu.svelte";
import DropdownMenu from "components/DropdownMenu.svelte";
import DropdownItem from "components/DropdownItem.svelte";
export let suggestions: string[];
export let size: number;
let className: string = "";
export { className as class };
@ -32,14 +30,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<ButtonToolbar class={`dropup ${className}`} {size}>
<WithDropdownMenu let:menuId let:createDropdown let:activateDropdown>
<slot {createDropdown} {activateDropdown} />
<WithDropdownMenu let:menuId let:createDropdown let:activateDropdown>
<slot {createDropdown} {activateDropdown} />
<DropdownMenu id={menuId} class="d-flex flex-column-reverse">
{#each suggestions as tag}
<DropdownItem on:keydown={switchUpDown}>{tag}</DropdownItem>
{/each}
</DropdownMenu>
</WithDropdownMenu>
</ButtonToolbar>
<DropdownMenu id={menuId} class={className}>
{#each suggestions as tag}
<DropdownItem on:keydown={switchUpDown}>{tag}</DropdownItem>
{/each}
</DropdownMenu>
</WithDropdownMenu>

56
ts/editor/TagEditor.svelte
View file

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import AddTagBadge from "./AddTagBadge.svelte";
import Tag from "./Tag.svelte";
import TagAutocomplete from "./TagAutocomplete.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte";
import TagInput from "./TagInput.svelte";
import { attachId, getName } from "./tags";
@ -92,35 +93,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyBottom>
<div class="row-gap">
<TagAutocomplete
class="d-flex flex-wrap align-items-center"
{suggestions}
{size}
let:createDropdown
let:activateDropdown
>
<AddTagBadge on:click={focusNewInput} />
<ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
<TagAutocomplete
class="d-flex flex-column-reverse"
{suggestions}
let:createDropdown
let:activateDropdown
>
<AddTagBadge on:click={focusNewInput} />
{#each tags as tag, index (tag.id)}
<Tag
bind:name={tag.name}
on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)}
on:tagjoinprevious={() => joinWithPreviousTag(index)}
on:tagjoinnext={() => joinWithNextTag(index)}
{#each tags as tag, index (tag.id)}
<Tag
bind:name={tag.name}
on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)}
on:tagjoinprevious={() => joinWithPreviousTag(index)}
on:tagjoinnext={() => joinWithNextTag(index)}
/>
{/each}
<TagInput
bind:input={newInput}
bind:name={newName}
on:focus={(event) => createDropdown(event.currentTarget)}
on:tagupdate={appendTag}
on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag}
/>
{/each}
<TagInput
bind:input={newInput}
bind:name={newName}
on:focus={(event) => createDropdown(event.currentTarget)}
on:tagupdate={appendTag}
on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag}
/>
</TagAutocomplete>
</TagAutocomplete>
</ButtonToolbar>
</div>
</StickyBottom>