fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 21:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add properties panel entries for artboards (#572)

Browse Source 
* Artboards can have properties

* fix crash when renaming artboards

* moved target document to utility types

* moved import and added test for file version information

* fixed missing import

* fix error from merging

* - typed properties message handler data
- removed name from WidgetRow

* clippy warnings

* artboards have seperate properties section

* - color input can be forced to have selection
- crop tool shows on switch
- select tool shows on switch

* variable renamed

* change to use PropType<boolean> instead of PropType<Boolean>

* Add an artboard icon

* Add the "Delete Artboard" hint

* fix unselect glitch

* even better

* Remove the Transform properties group

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
mfish33
2022-04-20 18:42:32 -07:00
committed by Keavon Chambers
co-authored by Keavon Chambers
parent ca28bc3947
commit 916a575446
22 changed files with 367 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/16px-solid/new-layer.svg
-4
View File
@@ -1,4 +0,0 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13,6h-2V4h-1v2H8v1h2v2h1V7h2V6z" />
<path d="M1,2v6.3L6.7,14H15V2H1z M14,13H7V8H2V3h12V13z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 175 B

frontend/assets/16px-solid/node-artboard.svg
+7
View File
@@ -0,0 +1,7 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M13,4H5v1h7v9h1V4z" />
<path d="M4,11V2H3v10h8v-1H4z" />
<rect x="14" y="11" width="1" height="1" />
<rect x="1" y="4" width="1" height="1" />
<rect x="5" y="6" width="6" height="4" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 267 B

frontend/src/components/widgets/inputs/ColorInput.vue
+2 -1
View File
@@ -1,6 +1,6 @@
<template>
<LayoutRow class="color-input">
<OptionalInput :icon="'CloseX'" :checked="!!value" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
<OptionalInput v-if="canSetTransparent" :icon="'CloseX'" :checked="!!value" @update:checked="(val) => updateEnabled(val)"></OptionalInput>
<TextInput :value="displayValue" :label="label" :disabled="disabled || !value" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
<Separator :type="'Related'" />
<LayoutRow class="swatch">
@@ -84,6 +84,7 @@ export default defineComponent({
props: {
value: { type: String as PropType<string | undefined>, required: true },
label: { type: String as PropType<string>, required: false },
canSetTransparent: { type: Boolean as PropType<boolean>, required: false, default: true },
disabled: { type: Boolean as PropType<boolean>, default: false },
},
computed: {
frontend/src/dispatcher/js-messages.ts
+1 -1
View File
@@ -417,7 +417,7 @@ export function defaultWidgetLayout(): WidgetLayout {
export type LayoutRow = WidgetRow | WidgetSection;
export type WidgetRow = { name: string; widgets: Widget[] };
export type WidgetRow = { widgets: Widget[] };
export function isWidgetRow(layoutRow: WidgetRow | WidgetSection): layoutRow is WidgetRow {
return Boolean((layoutRow as WidgetRow).widgets);
}
frontend/src/utilities/icons.ts
+3 -3
View File
@@ -48,7 +48,7 @@ import File from "@/../assets/16px-solid/file.svg";
import FlipHorizontal from "@/../assets/16px-solid/flip-horizontal.svg";
import FlipVertical from "@/../assets/16px-solid/flip-vertical.svg";
import GraphiteLogo from "@/../assets/16px-solid/graphite-logo.svg";
import NewLayer from "@/../assets/16px-solid/new-layer.svg";
import NodeArtboard from "@/../assets/16px-solid/node-artboard.svg";
import NodeFolder from "@/../assets/16px-solid/node-folder.svg";
import NodeImage from "@/../assets/16px-solid/node-image.svg";
import NodeShape from "@/../assets/16px-solid/node-shape.svg";
@@ -156,12 +156,12 @@ export const ICON_LIST = {
FlipHorizontal: { component: FlipHorizontal, size: size16 },
FlipVertical: { component: FlipVertical, size: size16 },
GraphiteLogo: { component: GraphiteLogo, size: size16 },
NewLayer: { component: NewLayer, size: size16 },
Paste: { component: Paste, size: size16 },
NodeArtboard: { component: NodeArtboard, size: size16 },
NodeFolder: { component: NodeFolder, size: size16 },
NodeImage: { component: NodeImage, size: size16 },
NodeShape: { component: NodeShape, size: size16 },
NodeText: { component: NodeText, size: size16 },
Paste: { component: Paste, size: size16 },
Trash: { component: Trash, size: size16 },
ViewModeNormal: { component: ViewModeNormal, size: size16 },
ViewModeOutline: { component: ViewModeOutline, size: size16 },