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
66 lines
1.7 KiB
Svelte
66 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
|
|
import { ICONS, ICON_SVG_STRINGS } from "@graphite/icons";
|
|
import type { IconName } from "@graphite/icons";
|
|
|
|
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
|
|
|
let className = "";
|
|
export { className as class };
|
|
export let classes: Record<string, boolean> = {};
|
|
|
|
export let iconSizeOverride: number | undefined = undefined;
|
|
|
|
// Content
|
|
export let icon: IconName;
|
|
export let disabled = false;
|
|
// Tooltips
|
|
export let tooltipLabel: string | undefined = undefined;
|
|
export let tooltipDescription: string | undefined = undefined;
|
|
export let tooltipShortcut: ActionShortcut | undefined = undefined;
|
|
|
|
$: iconSizeClass = ((icon: IconName) => {
|
|
const iconData = ICONS[icon];
|
|
if (!iconData) {
|
|
// eslint-disable-next-line no-console
|
|
console.warn(`Icon "${icon}" does not exist.`);
|
|
return "size-24";
|
|
}
|
|
if (iconData.size === undefined) return "";
|
|
return `size-${iconSizeOverride || iconData.size}`;
|
|
})(icon);
|
|
$: extraClasses = Object.entries(classes)
|
|
.flatMap(([className, stateName]) => (stateName ? [className] : []))
|
|
.join(" ");
|
|
</script>
|
|
|
|
<LayoutRow class={`icon-label ${iconSizeClass} ${className} ${extraClasses}`.trim()} classes={{ disabled }} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
|
|
{@html ICON_SVG_STRINGS[icon] || "�"}
|
|
</LayoutRow>
|
|
|
|
<style lang="scss" global>
|
|
.icon-label {
|
|
flex: 0 0 auto;
|
|
fill: var(--color-e-nearwhite);
|
|
|
|
&.disabled {
|
|
fill: var(--color-8-uppergray);
|
|
}
|
|
|
|
&.size-12 {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
&.size-16 {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
&.size-24 {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
</style>
|