fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 08:58:13 +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
frontend/src/components/floating-menus/MenuList.svelte
+1 -1
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}
frontend/src/components/widgets/WidgetSpan.svelte
+4 -4
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}
frontend/src/components/widgets/labels/ImageLabel.svelte → frontend/src/components/widgets/buttons/ImageButton.svelte
+3 -1
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 {
frontend/src/components/widgets/labels/IconLabel.svelte
+2 -1
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] : []))
frontend/src/components/widgets/labels/TextLabel.svelte
+6
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;
frontend/src/io-managers/localization.ts
+1 -1
View File
@@ -14,7 +14,7 @@ function localizeTimestamp(utc: string): { timestamp: string; year: string } {
const date = new Date(utc);
if (Number.isNaN(date.getTime())) return { timestamp: utc, year: `${new Date().getFullYear()}` };
const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "long" })
const timezoneName = Intl.DateTimeFormat(undefined, { timeZoneName: "longGeneric" })
.formatToParts(new Date())
.find((part) => part.type === "timeZoneName");
frontend/src/messages.ts
+4 -2
View File
@@ -1075,7 +1075,7 @@ export class IconLabel extends WidgetProps {
tooltip!: string | undefined;
}
export class ImageLabel extends WidgetProps {
export class ImageButton extends WidgetProps {
image!: IconName;
@Transform(({ value }: { value: string }) => value || undefined)
@@ -1289,6 +1289,8 @@ export class TextLabel extends WidgetProps {
italic!: boolean;
centerAlign!: boolean;
tableAlign!: boolean;
minWidth!: number;
@@ -1317,8 +1319,8 @@ const widgetSubTypes = [
{ value: DropdownInput, name: "DropdownInput" },
{ value: FontInput, name: "FontInput" },
{ value: IconButton, name: "IconButton" },
{ value: ImageButton, name: "ImageButton" },
{ value: IconLabel, name: "IconLabel" },
{ value: ImageLabel, name: "ImageLabel" },
{ value: NodeCatalog, name: "NodeCatalog" },
{ value: NumberInput, name: "NumberInput" },
{ value: ParameterExposeButton, name: "ParameterExposeButton" },
frontend/src/utility-functions/icons.ts
+58 -4
View File
@@ -104,25 +104,37 @@ import BooleanIntersect from "@graphite-frontend/assets/icon-16px-solid/boolean-
import BooleanSubtractBack from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@graphite-frontend/assets/icon-16px-solid/boolean-union.svg";
import Bug from "@graphite-frontend/assets/icon-16px-solid/bug.svg";
import CheckboxChecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-checked.svg";
import CheckboxUnchecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-unchecked.svg";
import CloseAll from "@graphite-frontend/assets/icon-16px-solid/close-all.svg";
import Close from "@graphite-frontend/assets/icon-16px-solid/close.svg";
import Code from "@graphite-frontend/assets/icon-16px-solid/code.svg";
import Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg";
import Credits from "@graphite-frontend/assets/icon-16px-solid/credits.svg";
import CustomColor from "@graphite-frontend/assets/icon-16px-solid/custom-color.svg";
import Cut from "@graphite-frontend/assets/icon-16px-solid/cut.svg";
import DeselectAll from "@graphite-frontend/assets/icon-16px-solid/deselect-all.svg";
import Edit from "@graphite-frontend/assets/icon-16px-solid/edit.svg";
import Empty from "@graphite-frontend/assets/icon-16px-solid/empty.svg";
import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg";
import EyeHide from "@graphite-frontend/assets/icon-16px-solid/eye-hide.svg";
import EyeShow from "@graphite-frontend/assets/icon-16px-solid/eye-show.svg";
import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg";
import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
import FileExport from "@graphite-frontend/assets/icon-16px-solid/file-export.svg";
import FileImport from "@graphite-frontend/assets/icon-16px-solid/file-import.svg";
import File from "@graphite-frontend/assets/icon-16px-solid/file.svg";
import FlipHorizontal from "@graphite-frontend/assets/icon-16px-solid/flip-horizontal.svg";
import FlipVertical from "@graphite-frontend/assets/icon-16px-solid/flip-vertical.svg";
import Folder from "@graphite-frontend/assets/icon-16px-solid/folder.svg";
import FrameAll from "@graphite-frontend/assets/icon-16px-solid/frame-all.svg";
import FrameSelected from "@graphite-frontend/assets/icon-16px-solid/frame-selected.svg";
import GraphViewClosed from "@graphite-frontend/assets/icon-16px-solid/graph-view-closed.svg";
import GraphViewOpen from "@graphite-frontend/assets/icon-16px-solid/graph-view-open.svg";
import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg";
import HistoryRedo from "@graphite-frontend/assets/icon-16px-solid/history-redo.svg";
import HistoryUndo from "@graphite-frontend/assets/icon-16px-solid/history-undo.svg";
import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg";
import Image from "@graphite-frontend/assets/icon-16px-solid/image.svg";
import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg";
@@ -148,16 +160,29 @@ import Paste from "@graphite-frontend/assets/icon-16px-solid/paste.svg";
import PinActive from "@graphite-frontend/assets/icon-16px-solid/pin-active.svg";
import PinInactive from "@graphite-frontend/assets/icon-16px-solid/pin-inactive.svg";
import Random from "@graphite-frontend/assets/icon-16px-solid/random.svg";
import Regenerate from "@graphite-frontend/assets/icon-16px-solid/regenerate.svg";
import Reload from "@graphite-frontend/assets/icon-16px-solid/reload.svg";
import Rescale from "@graphite-frontend/assets/icon-16px-solid/rescale.svg";
import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg";
import Resync from "@graphite-frontend/assets/icon-16px-solid/resync.svg";
import ReverseRadialGradientToLeft from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-left.svg";
import ReverseRadialGradientToRight from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-right.svg";
import Reverse from "@graphite-frontend/assets/icon-16px-solid/reverse.svg";
import Save from "@graphite-frontend/assets/icon-16px-solid/save.svg";
import SelectAll from "@graphite-frontend/assets/icon-16px-solid/select-all.svg";
import Settings from "@graphite-frontend/assets/icon-16px-solid/settings.svg";
import SmallDot from "@graphite-frontend/assets/icon-16px-solid/small-dot.svg";
import StackBottom from "@graphite-frontend/assets/icon-16px-solid/stack-bottom.svg";
import StackHollow from "@graphite-frontend/assets/icon-16px-solid/stack-hollow.svg";
import StackLower from "@graphite-frontend/assets/icon-16px-solid/stack-lower.svg";
import StackRaise from "@graphite-frontend/assets/icon-16px-solid/stack-raise.svg";
import StackReverse from "@graphite-frontend/assets/icon-16px-solid/stack-reverse.svg";
import Stack from "@graphite-frontend/assets/icon-16px-solid/stack.svg";
import TiltReset from "@graphite-frontend/assets/icon-16px-solid/tilt-reset.svg";
import Tilt from "@graphite-frontend/assets/icon-16px-solid/tilt.svg";
import TransformationGrab from "@graphite-frontend/assets/icon-16px-solid/transformation-grab.svg";
import TransformationRotate from "@graphite-frontend/assets/icon-16px-solid/transformation-rotate.svg";
import TransformationScale from "@graphite-frontend/assets/icon-16px-solid/transformation-scale.svg";
import Trash from "@graphite-frontend/assets/icon-16px-solid/trash.svg";
import UserManual from "@graphite-frontend/assets/icon-16px-solid/user-manual.svg";
import ViewModeNormal from "@graphite-frontend/assets/icon-16px-solid/view-mode-normal.svg";
import ViewModeOutline from "@graphite-frontend/assets/icon-16px-solid/view-mode-outline.svg";
import ViewModePixels from "@graphite-frontend/assets/icon-16px-solid/view-mode-pixels.svg";
@@ -168,6 +193,8 @@ import Volunteer from "@graphite-frontend/assets/icon-16px-solid/volunteer.svg";
import Website from "@graphite-frontend/assets/icon-16px-solid/website.svg";
import WorkingColorsPrimary from "@graphite-frontend/assets/icon-16px-solid/working-colors-primary.svg";
import WorkingColorsSecondary from "@graphite-frontend/assets/icon-16px-solid/working-colors-secondary.svg";
import Zoom1x from "@graphite-frontend/assets/icon-16px-solid/zoom-1x.svg";
import Zoom2x from "@graphite-frontend/assets/icon-16px-solid/zoom-2x.svg";
import ZoomIn from "@graphite-frontend/assets/icon-16px-solid/zoom-in.svg";
import ZoomOut from "@graphite-frontend/assets/icon-16px-solid/zoom-out.svg";
import ZoomReset from "@graphite-frontend/assets/icon-16px-solid/zoom-reset.svg";
@@ -186,25 +213,37 @@ const SOLID_16PX = {
BooleanSubtractBack: { svg: BooleanSubtractBack, size: 16 },
BooleanSubtractFront: { svg: BooleanSubtractFront, size: 16 },
BooleanUnion: { svg: BooleanUnion, size: 16 },
Bug: { svg: Bug, size: 16 },
CheckboxChecked: { svg: CheckboxChecked, size: 16 },
CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 },
Close: { svg: Close, size: 16 },
CloseAll: { svg: CloseAll, size: 16 },
Code: { svg: Code, size: 16 },
Copy: { svg: Copy, size: 16 },
Credits: { svg: Credits, size: 16 },
CustomColor: { svg: CustomColor, size: 16 },
Cut: { svg: Cut, size: 16 },
DeselectAll: { svg: DeselectAll, size: 16 },
Edit: { svg: Edit, size: 16 },
Empty: { svg: Empty, size: 16 },
Eyedropper: { svg: Eyedropper, size: 16 },
EyeHidden: { svg: EyeHidden, size: 16 },
EyeHide: { svg: EyeHide, size: 16 },
EyeShow: { svg: EyeShow, size: 16 },
EyeVisible: { svg: EyeVisible, size: 16 },
File: { svg: File, size: 16 },
FileExport: { svg: FileExport, size: 16 },
FileImport: { svg: FileImport, size: 16 },
FlipHorizontal: { svg: FlipHorizontal, size: 16 },
FlipVertical: { svg: FlipVertical, size: 16 },
Folder: { svg: Folder, size: 16 },
FrameAll: { svg: FrameAll, size: 16 },
FrameSelected: { svg: FrameSelected, size: 16 },
GraphiteLogo: { svg: GraphiteLogo, size: 16 },
GraphViewClosed: { svg: GraphViewClosed, size: 16 },
GraphViewOpen: { svg: GraphViewOpen, size: 16 },
HistoryRedo: { svg: HistoryRedo, size: 16 },
HistoryUndo: { svg: HistoryUndo, size: 16 },
IconsGrid: { svg: IconsGrid, size: 16 },
Image: { svg: Image, size: 16 },
Layer: { svg: Layer, size: 16 },
@@ -230,16 +269,29 @@ const SOLID_16PX = {
PinActive: { svg: PinActive, size: 16 },
PinInactive: { svg: PinInactive, size: 16 },
Random: { svg: Random, size: 16 },
Regenerate: { svg: Regenerate, size: 16 },
Reload: { svg: Reload, size: 16 },
Rescale: { svg: Rescale, size: 16 },
Reset: { svg: Reset, size: 16 },
Resync: { svg: Resync, size: 16 },
Reverse: { svg: Reverse, size: 16 },
ReverseRadialGradientToLeft: { svg: ReverseRadialGradientToLeft, size: 16 },
ReverseRadialGradientToRight: { svg: ReverseRadialGradientToRight, size: 16 },
Save: { svg: Save, size: 16 },
SelectAll: { svg: SelectAll, size: 16 },
Settings: { svg: Settings, size: 16 },
SmallDot: { svg: SmallDot, size: 16 },
Stack: { svg: Stack, size: 16 },
StackBottom: { svg: StackBottom, size: 16 },
StackHollow: { svg: StackHollow, size: 16 },
StackLower: { svg: StackLower, size: 16 },
StackRaise: { svg: StackRaise, size: 16 },
StackReverse: { svg: StackReverse, size: 16 },
Tilt: { svg: Tilt, size: 16 },
TiltReset: { svg: TiltReset, size: 16 },
TransformationGrab: { svg: TransformationGrab, size: 16 },
TransformationRotate: { svg: TransformationRotate, size: 16 },
TransformationScale: { svg: TransformationScale, size: 16 },
Trash: { svg: Trash, size: 16 },
UserManual: { svg: UserManual, size: 16 },
ViewModeNormal: { svg: ViewModeNormal, size: 16 },
ViewModeOutline: { svg: ViewModeOutline, size: 16 },
ViewModePixels: { svg: ViewModePixels, size: 16 },
@@ -250,6 +302,8 @@ const SOLID_16PX = {
Website: { svg: Website, size: 16 },
WorkingColorsPrimary: { svg: WorkingColorsPrimary, size: 16 },
WorkingColorsSecondary: { svg: WorkingColorsSecondary, size: 16 },
Zoom1x: { svg: Zoom1x, size: 16 },
Zoom2x: { svg: Zoom2x, size: 16 },
ZoomIn: { svg: ZoomIn, size: 16 },
ZoomOut: { svg: ZoomOut, size: 16 },
ZoomReset: { svg: ZoomReset, size: 16 },