mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-21 02:48:11 +08:00
Keavon Chambers
52d2b38a82
* Migrate Specta to Tsify to auto-generate messages.ts, working except colors and widgets * Adopt the generated FillColor/Color/GradientStops * Fix widget typing * Separate WidgetGroup enum variants into wrapper structs * Small rename * Simplify widgets further * Clean up message type references * Switch type imports to the auto-generated file * Remove lowercase serde rename * Fix FillChoice deserialization * Fix small regression from #3837 * Improve type safety * Make WidgetSpan type-safe * More cleanup and type safety * More type safety * More type safety * Get the rest to type-check without errors; improve widget builder macro to have optional icons; improve Svelte 5 configs * Cargo fmt * Fix imports * Update outdated readme info * Fix lint command rename references * Fix typos * One more typos fix * Remove unnecessary dep: prefix from the edited Cargo.toml files * Remove excess parts from Cargo.toml * Fix compiling on desktop * Revert "Remove excess parts from Cargo.toml" This reverts commit 6b711117b3a5d5d8a3ee20f36a43bc74930b7c82. * Update dev docs with simpler, more accurate instructions
48 lines
1.4 KiB
Svelte
48 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
|
|
|
|
let className = "";
|
|
export { className as class };
|
|
export let classes: Record<string, boolean> = {};
|
|
|
|
// Content
|
|
export let url: 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;
|
|
|
|
$: extraClasses = Object.entries(classes)
|
|
.flatMap(([className, stateName]) => (stateName ? [className] : []))
|
|
.join(" ");
|
|
</script>
|
|
|
|
<img
|
|
src={url}
|
|
style:width
|
|
style:height
|
|
class={`image-label ${className} ${extraClasses}`.trim()}
|
|
data-tooltip-label={tooltipLabel}
|
|
data-tooltip-description={tooltipDescription}
|
|
data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
|
|
alt=""
|
|
/>
|
|
|
|
<style lang="scss" global>
|
|
.image-label {
|
|
width: auto;
|
|
height: auto;
|
|
border-radius: 2px;
|
|
background-image: var(--color-transparent-checkered-background);
|
|
background-size: var(--color-transparent-checkered-background-size);
|
|
background-position: var(--color-transparent-checkered-background-position);
|
|
background-repeat: var(--color-transparent-checkered-background-repeat);
|
|
|
|
+ .image-label.image-label {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
</style>
|