mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-16 23:08:05 +08:00
e0212ca4b9
* Remove the svelte-preprocess dev dependency, keeping global styles with a custom Vite plugin * More robust style tag detection * Fix CSS regressions
48 lines
1.3 KiB
Svelte
48 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { IMAGE_BASE64_STRINGS } from "/src/utility-functions/images";
|
|
import type { ActionShortcut } from "/wrapper/pkg/graphite_wasm_wrapper";
|
|
|
|
let className = "";
|
|
export { className as class };
|
|
export let classes: Record<string, boolean> = {};
|
|
|
|
// Content
|
|
export let image: string;
|
|
export let width: string | undefined;
|
|
export let height: string | undefined;
|
|
// Tooltips
|
|
export let tooltipLabel: string | undefined = undefined;
|
|
export let tooltipDescription: string | undefined = undefined;
|
|
export let tooltipShortcut: ActionShortcut | undefined = undefined;
|
|
// Callbacks
|
|
export let action: (e?: MouseEvent) => void;
|
|
|
|
$: extraClasses = Object.entries(classes)
|
|
.flatMap(([className, stateName]) => (stateName ? [className] : []))
|
|
.join(" ");
|
|
</script>
|
|
|
|
<img
|
|
src={IMAGE_BASE64_STRINGS[image]}
|
|
style:width
|
|
style:height
|
|
class={`image-button ${className} ${extraClasses}`.trim()}
|
|
data-tooltip-label={tooltipLabel}
|
|
data-tooltip-description={tooltipDescription}
|
|
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
|
|
alt=""
|
|
on:click={action}
|
|
/>
|
|
|
|
<style lang="scss">
|
|
.image-button {
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 2px;
|
|
|
|
+ .image-button.image-button {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
</style>
|