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

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