fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-20 11:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add new icons to all menu bar entries

Browse Source
This commit is contained in:
Keavon Chambers
2025-02-07 19:08:06 -08:00
parent 0ec91bfe01
commit 0037f5158c
76 changed files with 484 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/floating-menus/MenuList.svelte
View File

@@ -429,7 +429,7 @@
on:pointerleave={() => !entry.disabled && onEntryPointerLeave(entry)}
>
{#if entry.icon && drawIcon}
<IconLabel icon={entry.icon} class="entry-icon" />
<IconLabel icon={entry.icon} iconSizeOverride={16} class="entry-icon" />
{:else if drawIcon}
<div class="no-icon" />
{/if}

8
frontend/src/components/widgets/WidgetSpan.svelte
View File

@@ -10,6 +10,7 @@
import BreadcrumbTrailButtons from "@graphite/components/widgets/buttons/BreadcrumbTrailButtons.svelte";
import ColorButton from "@graphite/components/widgets/buttons/ColorButton.svelte";
import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
import ImageButton from "@graphite/components/widgets/buttons/ImageButton.svelte";
import ParameterExposeButton from "@graphite/components/widgets/buttons/ParameterExposeButton.svelte";
import PopoverButton from "@graphite/components/widgets/buttons/PopoverButton.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
@@ -24,7 +25,6 @@
import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
import WorkingColorsInput from "@graphite/components/widgets/inputs/WorkingColorsInput.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import ImageLabel from "@graphite/components/widgets/labels/ImageLabel.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
@@ -124,9 +124,9 @@
{#if iconLabel}
<IconLabel {...exclude(iconLabel)} />
{/if}
{@const imageLabel = narrowWidgetProps(component.props, "ImageLabel")}
{#if imageLabel}
<ImageLabel {...exclude(imageLabel)} />
{@const imageButton = narrowWidgetProps(component.props, "ImageButton")}
{#if imageButton}
<ImageButton {...exclude(imageButton)} action={() => widgetValueCommitAndUpdate(index, undefined)} />
{/if}
{@const nodeCatalog = narrowWidgetProps(component.props, "NodeCatalog")}
{#if nodeCatalog}

4
frontend/src/components/widgets/labels/ImageLabel.svelte → frontend/src/components/widgets/buttons/ImageButton.svelte
View File

@@ -9,13 +9,15 @@
export let width: string | undefined;
export let height: string | undefined;
export let tooltip: string | 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-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" />
<img src={IMAGE_BASE64_STRINGS[image]} style:width style:height class={`image-label ${className} ${extraClasses}`.trim()} title={tooltip} alt="" on:click={action} />
<style lang="scss" global>
.image-label {

3
frontend/src/components/widgets/labels/IconLabel.svelte
View File

@@ -7,11 +7,12 @@
export { className as class };
export let classes: Record<string, boolean> = {};
export let icon: IconName;
export let iconSizeOverride: number | undefined = undefined;
export let disabled = false;
export let tooltip: string | undefined = undefined;
$: iconSizeClass = ((icon: IconName) => {
return `size-${ICONS[icon].size}`;
return `size-${iconSizeOverride || ICONS[icon].size}`;
})(icon);
$: extraClasses = Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))

6
frontend/src/components/widgets/labels/TextLabel.svelte
View File

@@ -8,6 +8,7 @@
export let disabled = false;
export let bold = false;
export let italic = false;
export let centerAlign = false;
export let tableAlign = false;
export let minWidth = 0;
export let multiline = false;
@@ -27,6 +28,7 @@
class:bold
class:italic
class:multiline
class:center-align={centerAlign}
class:table-align={tableAlign}
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
style={`${styleName} ${extraStyles}`.trim() || undefined}
@@ -59,6 +61,10 @@
margin: 4px 0;
}
&.center-align {
text-align: center;
}
&.table-align {
flex: 0 0 30%;
text-align: right;