GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -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

6
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>

6
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,10 +93,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyBottom> <StickyBottom>
<div class="row-gap"> <div class="row-gap">
<ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
<TagAutocomplete <TagAutocomplete
class="d-flex flex-wrap align-items-center" class="d-flex flex-column-reverse"
{suggestions} {suggestions}
{size}
let:createDropdown let:createDropdown
let:activateDropdown let:activateDropdown
> >
@ -121,6 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagjoinprevious={joinWithLastTag} on:tagjoinprevious={joinWithLastTag}
/> />
</TagAutocomplete> </TagAutocomplete>
</ButtonToolbar>
</div> </div>
</StickyBottom> </StickyBottom>