mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add color choices to the options bar of tools (#1199)

Browse source 
* Generalize PenColorType -> ToolColorType

* impl default for ToolColorOptions

* Add stroke color option to the freehand tool

* Consolidate working color update messages

* Update tool working colours when switching tools

* Update working colors on tool activation

* Add stroke color option to line tool

* Add fill color option to freehand tool

* Add tool color options to spline tool

* Fix freehand tool

* Add color options to text

* Add tool color/weight options to rectangle

* Add tool color/weight options to ellipse

* Add tool color/weight options to shape

* Fix spline default fill/stroke

* Reorder widgets and code cleanup

* Add CustomColor icon

* Fix warnings

* Change color defaults to secondary fill, primary stroke

* Fix spacing between brush options number inputs

* Add toolbar color option to brush

* Implement allowNone on color input widget

* Rearrange widget and remove X from brush

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Chase 2023-05-08 18:00:10 +08:00 • committed by Keavon Chambers
parent ab2de96640
commit 7e1b452757
21 changed files with 929 additions and 310 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/assets/icon-16px-solid/custom-color.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M8.2,7.2L4.5,4.4l-0.8,1C3,6.2,3.2,7.5,4.1,8.2L5,8.9c-1.1,1.1-3.3,3.2-3.7,3.7c-0.5,0.7-0.4,1.6,0.3,2.1c0.7,0.5,1.6,0.4,2.1-0.3c0.4-0.5,1.9-3.2,2.7-4.5l0.9,0.7c0.9,0.7,2.1,0.5,2.8-0.4l0.8-1L8.2,7.2z" />
<path d="M11.7,8.1L16,2.5c-5.6,0.4-7.9-2.8-9.6-0.6l-1,1.3L11.7,8.1z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 352 B

4
frontend/src/components/widgets/inputs/ColorInput.svelte
View file

@ -15,8 +15,8 @@
export let value: Color;
// TODO: Implement
// export let allowTransparency = false;
// export let allowNone = false;
// export let disabled = false;
export let allowNone = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
@ -45,7 +45,7 @@
value = detail;
dispatch("value", detail);
}}
allowNone={true}
{allowNone}
/>
</LayoutRow>

2
frontend/src/utility-functions/icons.ts
View file

@ -95,6 +95,7 @@ import BooleanUnion from "@graphite-frontend/assets/icon-16px-solid/boolean-unio
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 Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg";
import CustomColor from "@graphite-frontend/assets/icon-16px-solid/custom-color.svg";
import Edit from "@graphite-frontend/assets/icon-16px-solid/edit.svg";
import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg";
import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg";
@ -155,6 +156,7 @@ const SOLID_16PX = {
CheckboxChecked: { svg: CheckboxChecked, size: 16 },
CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 },
Copy: { svg: Copy, size: 16 },
CustomColor: { svg: CustomColor, size: 16 },
Edit: { svg: Edit, size: 16 },
Eyedropper: { svg: Eyedropper, size: 16 },
EyeHidden: { svg: EyeHidden, size: 16 },

3
frontend/src/wasm-communication/messages.ts
View file

@ -832,9 +832,10 @@ export class ColorInput extends WidgetProps {
)
value!: Color;
allowNone!: boolean;
// TODO: Implement
// allowTransparency!: boolean;
// allowNone!: boolean;
// disabled!: boolean;
@Transform(({ value }: { value: string }) => value || undefined)