anki/ts/editor-toolbar/SquareButton.svelte

97 lines
2.1 KiB
Svelte
Raw Normal View History

2021-03-29 21:05:30 +02:00
<script lang="typescript">
2021-03-31 03:34:08 +02:00
import { getContext, onMount, createEventDispatcher } from "svelte";
import type { Readable } from "svelte/store";
import { disabledKey } from "./contextKeys";
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
2021-04-01 18:55:34 +02:00
export let onClick: (event: MouseEvent) => void;
export let active = false;
2021-03-31 03:34:08 +02:00
let buttonRef: HTMLButtonElement;
const disabled = getContext(disabledKey);
$: _disabled = $disabled;
2021-03-31 03:34:08 +02:00
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
2021-03-29 21:05:30 +02:00
</script>
<style lang="scss">
button {
display: inline-block;
padding: 0;
2021-03-29 21:05:30 +02:00
background-color: white;
2021-03-29 21:05:30 +02:00
2021-03-29 23:02:20 +02:00
&:hover {
background-color: #eee;
}
2021-03-29 21:05:30 +02:00
&:active,
&.active {
box-shadow: inset 0 0 calc(var(--toolbar-size) / 2.5)
calc(var(--toolbar-size) / 7.5) rgb(0 0 0 / 30%);
border-color: #aaa;
}
&.active:active {
box-shadow: none;
border-color: var(--border);
2021-03-29 21:05:30 +02:00
}
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
&:hover {
background-color: white;
}
&:active,
&.active {
box-shadow: none;
}
}
2021-03-29 21:05:30 +02:00
}
span {
display: inline-block;
vertical-align: middle;
/* constrain icon */
width: calc(var(--toolbar-size) - 2px);
height: calc(var(--toolbar-size) - 2px);
& > :global(svg),
& > :global(img) {
fill: currentColor;
vertical-align: unset;
width: 100%;
height: 100%;
}
}
/* for DropdownMenu */
:global(.dropdown-toggle)::after {
margin-right: 0.25rem;
}
2021-03-29 21:05:30 +02:00
</style>
<button
2021-03-31 03:34:08 +02:00
bind:this={buttonRef}
{id}
class={className}
{...props}
title={tooltip}
class:active
2021-03-30 03:05:21 +02:00
tabindex="-1"
disabled={_disabled}
on:click={onClick}
on:mousedown|preventDefault>
<span class="p-1"><slot /></span>
2021-03-29 21:05:30 +02:00
</button>