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

* 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 GitHub
parent 6d1eff0437
commit eca018975c
21 changed files with 929 additions and 310 deletions

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>

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 },

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)