anki/ts/editor-toolbar/LabelButton.svelte

66 lines
1.6 KiB
Svelte
Raw Normal View History

2021-03-25 23:32:23 +01:00
<script lang="typescript">
import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey } from "./contextKeys";
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
2021-03-29 14:54:10 +02:00
export let label: string;
export let tooltip: string;
2021-04-01 18:55:34 +02:00
export let onClick: (event: MouseEvent) => void;
2021-03-31 03:34:08 +02:00
export let disables = true;
let buttonRef: HTMLButtonElement;
function extendClassName(className: string): string {
return `btn btn-secondary ${className}`;
}
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
const disabled = getContext(disabledKey);
$: _disabled = disables && $disabled;
2021-03-25 23:32:23 +01:00
</script>
2021-03-29 14:54:10 +02:00
2021-03-25 23:32:23 +01:00
<style lang="scss">
button {
display: inline-block;
vertical-align: middle;
width: auto;
height: var(--toolbar-size);
font-size: calc(var(--toolbar-size) / 2.3);
padding: 0 calc(var(--toolbar-size) / 3);
border-radius: 0;
border-color: var(--faint-border);
2021-03-25 23:32:23 +01:00
2021-03-29 14:54:10 +02:00
&:focus {
box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
2021-03-29 14:54:10 +02:00
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
border-color: var(--faint-border);
}
2021-03-25 23:32:23 +01:00
}
</style>
<button
tabindex="-1"
bind:this={buttonRef}
disabled={_disabled}
{id}
class={extendClassName(className)}
{...props}
on:click={onClick}
2021-03-31 22:05:24 +02:00
on:mousedown|preventDefault
title={tooltip}>
{label}
</button>