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

Make styling of DropdownMenu easier by introducing dropdown-content

Browse source
This commit is contained in:
Henrik Giesel 2021-06-25 16:44:09 +02:00
parent 1ba6909495
commit 6c6062cc58
3 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ts/components/DropdownMenu.svelte
View file

@ -7,17 +7,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { dropdownKey } from "./context-keys"; import { dropdownKey } from "./context-keys";
export let id: string | undefined = undefined; export let id: string | undefined = undefined;
let className: string = "";
export { className as class };
export let labelledby: string | undefined = undefined; export let labelledby: string | undefined = undefined;
setContext(dropdownKey, null); setContext(dropdownKey, null);
</script> </script>
<div {id} class="dropdown-menu" aria-labelledby={labelledby}> <div {id} class="dropdown-menu" aria-labelledby={labelledby}>
<slot /> <div class={`dropdown-content ${className}`}>
<slot />
</div>
</div> </div>
<style lang="scss"> <style lang="scss">
div { .dropdown-menu {
background-color: var(--frame-bg); background-color: var(--frame-bg);
border-color: var(--medium-border); border-color: var(--medium-border);
} }

4
ts/editor/TagAutocomplete.svelte
View file

@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div bind:this={menu} class={`dropup dropdown-reverse ${className}`}> <div bind:this={menu} class={`dropup dropdown-reverse ${className}`}>
<slot /> <slot />
<DropdownMenu> <DropdownMenu class="d-flex flex-column-reverse">
{#each suggestions as tag} {#each suggestions as tag}
<DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown} <DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
>{tag}</DropdownItem >{tag}</DropdownItem
@ -47,8 +47,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
.dropdown-reverse :global(.dropdown-menu.show) { .dropdown-reverse :global(.dropdown-menu.show) {
display: flex;
flex-direction: column-reverse;
font-size: 13px; font-size: 13px;
} }
</style> </style>

4
ts/editor/TagEditor.svelte
View file

@ -3,6 +3,7 @@ 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 { isApplePlatform } from "lib/platform";
import StickyBottom from "components/StickyBottom.svelte"; import StickyBottom from "components/StickyBottom.svelte";
import AddTagBadge from "./AddTagBadge.svelte"; import AddTagBadge from "./AddTagBadge.svelte";
import Tag from "./Tag.svelte"; import Tag from "./Tag.svelte";
@ -11,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { attachId, getName } from "./tags"; import { attachId, getName } from "./tags";
export let initialNames = ["en::foobar", "test", "def"]; export let initialNames = ["en::foobar", "test", "def"];
export let size = isApplePlatform() ? 1.6 : 2.0;
let tags = initialNames.map(attachId); let tags = initialNames.map(attachId);
let newInput: HTMLInputElement; let newInput: HTMLInputElement;
@ -88,7 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyBottom> <StickyBottom>
<div class="font-size-13 row-gap"> <div class="font-size-13 row-gap">
<TagAutocomplete class="d-flex flex-wrap align-items-center row-gap"> <TagAutocomplete class="d-flex flex-wrap align-items-center">
<AddTagBadge on:click={focusNewInput} /> <AddTagBadge on:click={focusNewInput} />
{#each tags as tag, index (tag.id)} {#each tags as tag, index (tag.id)}