anki/ts/components/DropdownItem.svelte
Matthias Metelka 68fa661b53
Finish #2070: Single overlay instead of per field (#2144)
* Move up MathjaxOverlay to be initialized only once

* Move ImageOverlay to NoteEditor root

* Move Symbols Overlay to NoteEditor root

* Refactor image overlay to not require second mutation observer

* Use elevation + overflow:hidden  in Editorfield

* Make it possible to show input next to each other again

* Set handle background color to code bg

* Make Collapsible unmount the component

* Simplify how decorated elements are mounted

* Set RichTextInput background to frame-bg again

* Strip out FocusTrap code

* Revert "Make Collapsible unmount the component"

This reverts commit 52722065ea199fa57ae750fa34bf47ee1c5aab3c.

* Allow clicking on label container to unfocus field

* Fix mathjax overlay resetting too its api too soon

* Allow scrolling on overlays

* Set focus-border border-color in focused field

* Fix background color of fields

* Add back grid-gap

removed it during merge to see if margin-top would behave any differently - which is not the case.

* Fix double border issue within Collapsible.svelte

* Format

* Edit appearance of focused fields a bit

* Remove unused properties

* Include elevation in button_mixins_lib

* Give label-container a background color

Co-authored-by: Henrik Giesel <hengiesel@gmail.com>
2022-10-27 09:11:36 +10:00

66 lines
1.4 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
export let id: string | undefined = undefined;
let className = "";
export { className as class };
export let buttonRef: HTMLButtonElement | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let active = false;
export let disabled = false;
$: if (buttonRef && active) {
setTimeout(() =>
buttonRef.scrollIntoView({
behavior: "smooth",
block: "nearest",
}),
);
}
export let tabbable = false;
</script>
<button
bind:this={buttonRef}
{id}
tabindex={tabbable ? 0 : -1}
class="dropdown-item {className}"
class:active
class:disabled
title={tooltip}
on:mouseenter
on:focus
on:keydown
on:click
on:mousedown|preventDefault
>
<slot />
</button>
<style lang="scss">
button {
display: flex;
justify-content: start;
width: 100%;
font-size: var(--dropdown-font-size, calc(0.8 * var(--base-font-size)));
background: none;
box-shadow: none !important;
border: none;
border-radius: 0;
color: var(--fg);
&:hover {
background: var(--highlight-bg);
color: var(--highlight-fg);
}
}
</style>