mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-26 00:08:12 +08:00
Add fill and stroke color choices to the Pen tool options bar (#1188)
* Add basic layout - WIP * Add color input min-width -> 80px * First pass implementation - WIP * Allow fill to be None * Fix null Fill color * refactor fill and stroke options into struct * toolbar progress - WIP * Switch is_working_color bool to PenColorType enum * Add todo * Add WorkingColorChanged event * remove unused import * Add WorkingColor[Primary/Secondary] icons * Allow new strokes to have no color * Set to base color when X is pressed (as per req) * Improve icons for new UI layout design * Add radio buttons * Fix menu bar Edit12px -> Edit * Add tooltips to radio buttons * Make the color selector only on custom * Fix edit icon correctly this time (whoops) * Fix working colors icons * Changes to improve the UX * Remove lines obviated by Default::default() * Make Eyedropper tool use working_color_changed event * Fix tests --------- Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Chase
committed by
Keavon Chambers
Keavon Chambers
co-authored by
Keavon Chambers
Keavon Chambers
parent
cef1cf7587
commit
1aaf2a521b
|
Before Width: | Height: | Size: 442 B After Width: | Height: | Size: 442 B |
|
Before Width: | Height: | Size: 271 B After Width: | Height: | Size: 271 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M15.2,2.3l-1.6-1.6C13.1,0.3,12.5,0,11.8,0c-0.7,0-1.4,0.3-1.9,0.8L2.2,8.5c-0.6,0.6-0.9,1.3-1.1,2L0,16l5.5-1.1c0.8-0.2,1.5-0.5,2-1.1l7.7-7.7C16.3,5.1,16.3,3.4,15.2,2.3z M6.6,12.9c-0.4,0.4-0.8,0.6-1.4,0.7l-0.1,0l-2.7-2.7l0-0.1c0.1-0.5,0.4-1,0.7-1.4l5.3-5.3l3.4,3.4L6.6,12.9z M14.3,5.2l-1.4,1.4L9.4,3.1l1.4-1.4c0.3-0.3,0.6-0.4,0.9-0.4s0.7,0.1,0.9,0.4l1.6,1.6C14.8,3.8,14.8,4.7,14.3,5.2z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M13,5c0-2.8-2.2-5-5-5S3,2.2,3,5c0,1.1,0.4,2.2,1,3c-0.6,0.8-1,1.9-1,3c0,2.8,2.2,5,5,5s5-2.2,5-5c0-1.1-0.4-2.2-1-3C12.6,7.2,13,6.1,13,5z M8,1.4c2,0,3.6,1.6,3.6,3.6S10,8.6,8,8.6S4.4,7,4.4,5S6,1.4,8,1.4z M2,5L0,7V3L2,5z M16,3v4l-2-2L16,3z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 317 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M13,5c0-2.8-2.2-5-5-5S3,2.2,3,5c0,1.1,0.4,2.2,1,3c-0.6,0.8-1,1.9-1,3c0,2.8,2.2,5,5,5s5-2.2,5-5c0-1.1-0.4-2.2-1-3C12.6,7.2,13,6.1,13,5z M8,1.4c2,0,3.6,1.6,3.6,3.6S10,8.6,8,8.6S4.4,7,4.4,5S6,1.4,8,1.4z M2,11l-2,2V9L2,11zM16,9v4l-2-2L16,9z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 319 B |
@@ -56,6 +56,7 @@
|
||||
border: 1px solid var(--color-5-dullgray);
|
||||
border-radius: 2px;
|
||||
padding: 1px;
|
||||
min-width: 80px;
|
||||
|
||||
> button {
|
||||
position: relative;
|
||||
|
||||
@@ -12,7 +12,7 @@ import Add from "@graphite-frontend/assets/icon-12px-solid/add.svg";
|
||||
import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg";
|
||||
import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg";
|
||||
import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg";
|
||||
import Edit from "@graphite-frontend/assets/icon-12px-solid/edit.svg";
|
||||
import Edit12px from "@graphite-frontend/assets/icon-12px-solid/edit-12px.svg";
|
||||
import Empty12px from "@graphite-frontend/assets/icon-12px-solid/empty-12px.svg";
|
||||
import FullscreenEnter from "@graphite-frontend/assets/icon-12px-solid/fullscreen-enter.svg";
|
||||
import FullscreenExit from "@graphite-frontend/assets/icon-12px-solid/fullscreen-exit.svg";
|
||||
@@ -33,7 +33,6 @@ import KeyboardTab from "@graphite-frontend/assets/icon-12px-solid/keyboard-tab.
|
||||
import Link from "@graphite-frontend/assets/icon-12px-solid/link.svg";
|
||||
import Overlays from "@graphite-frontend/assets/icon-12px-solid/overlays.svg";
|
||||
import Remove from "@graphite-frontend/assets/icon-12px-solid/remove.svg";
|
||||
import ResetColors from "@graphite-frontend/assets/icon-12px-solid/reset-colors.svg";
|
||||
import Snapping from "@graphite-frontend/assets/icon-12px-solid/snapping.svg";
|
||||
import Swap from "@graphite-frontend/assets/icon-12px-solid/swap.svg";
|
||||
import VerticalEllipsis from "@graphite-frontend/assets/icon-12px-solid/vertical-ellipsis.svg";
|
||||
@@ -42,13 +41,14 @@ import WindowButtonWinClose from "@graphite-frontend/assets/icon-12px-solid/wind
|
||||
import WindowButtonWinMaximize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-maximize.svg";
|
||||
import WindowButtonWinMinimize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-minimize.svg";
|
||||
import WindowButtonWinRestoreDown from "@graphite-frontend/assets/icon-12px-solid/window-button-win-restore-down.svg";
|
||||
import WorkingColors from "@graphite-frontend/assets/icon-12px-solid/working-colors.svg";
|
||||
|
||||
const SOLID_12PX = {
|
||||
Add: { svg: Add, size: 12 },
|
||||
Checkmark: { svg: Checkmark, size: 12 },
|
||||
CloseX: { svg: CloseX, size: 12 },
|
||||
DropdownArrow: { svg: DropdownArrow, size: 12 },
|
||||
Edit: { svg: Edit, size: 12 },
|
||||
Edit12px: { svg: Edit12px, size: 12 },
|
||||
Empty12px: { svg: Empty12px, size: 12 },
|
||||
FullscreenEnter: { svg: FullscreenEnter, size: 12 },
|
||||
FullscreenExit: { svg: FullscreenExit, size: 12 },
|
||||
@@ -69,7 +69,6 @@ const SOLID_12PX = {
|
||||
Link: { svg: Link, size: 12 },
|
||||
Overlays: { svg: Overlays, size: 12 },
|
||||
Remove: { svg: Remove, size: 12 },
|
||||
ResetColors: { svg: ResetColors, size: 12 },
|
||||
Snapping: { svg: Snapping, size: 12 },
|
||||
Swap: { svg: Swap, size: 12 },
|
||||
VerticalEllipsis: { svg: VerticalEllipsis, size: 12 },
|
||||
@@ -78,6 +77,7 @@ const SOLID_12PX = {
|
||||
WindowButtonWinMaximize: { svg: WindowButtonWinMaximize, size: 12 },
|
||||
WindowButtonWinMinimize: { svg: WindowButtonWinMinimize, size: 12 },
|
||||
WindowButtonWinRestoreDown: { svg: WindowButtonWinRestoreDown, size: 12 },
|
||||
WorkingColors: { svg: WorkingColors, size: 12 },
|
||||
} as const;
|
||||
|
||||
// 16px Solid
|
||||
@@ -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 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";
|
||||
import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg";
|
||||
@@ -133,6 +134,8 @@ import ViewModePixels from "@graphite-frontend/assets/icon-16px-solid/view-mode-
|
||||
import ViewportDesignMode from "@graphite-frontend/assets/icon-16px-solid/viewport-design-mode.svg";
|
||||
import ViewportGuideMode from "@graphite-frontend/assets/icon-16px-solid/viewport-guide-mode.svg";
|
||||
import ViewportSelectMode from "@graphite-frontend/assets/icon-16px-solid/viewport-select-mode.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 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";
|
||||
@@ -152,6 +155,7 @@ const SOLID_16PX = {
|
||||
CheckboxChecked: { svg: CheckboxChecked, size: 16 },
|
||||
CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 },
|
||||
Copy: { svg: Copy, size: 16 },
|
||||
Edit: { svg: Edit, size: 16 },
|
||||
Eyedropper: { svg: Eyedropper, size: 16 },
|
||||
EyeHidden: { svg: EyeHidden, size: 16 },
|
||||
EyeVisible: { svg: EyeVisible, size: 16 },
|
||||
@@ -190,6 +194,8 @@ const SOLID_16PX = {
|
||||
ViewportDesignMode: { svg: ViewportDesignMode, size: 16 },
|
||||
ViewportGuideMode: { svg: ViewportGuideMode, size: 16 },
|
||||
ViewportSelectMode: { svg: ViewportSelectMode, size: 16 },
|
||||
WorkingColorsPrimary: { svg: WorkingColorsPrimary, size: 16 },
|
||||
WorkingColorsSecondary: { svg: WorkingColorsSecondary, size: 16 },
|
||||
ZoomIn: { svg: ZoomIn, size: 16 },
|
||||
ZoomOut: { svg: ZoomOut, size: 16 },
|
||||
ZoomReset: { svg: ZoomReset, size: 16 },
|
||||
|
||||
Reference in New Issue
Block a user