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

Revamp the ColorPicker popover and ColorInput widget (#830)

Browse Source 
* Add cancel hint to Eyedropper tool

* Improve eyedropper overlay CSS

* Make CSS for transparent checkered background reusable

* Add color choice preview to color picker

* Draw text and markers as contrasting white or black

* Add reactive color updating and new/initial swapping

* Add Hex, RGB, HSV, and Opacity inputs

* Add none color and preset buttons

* Add eyedropper button and fix alignment (now visually done)

* Wire up none colors through the backend and style the ColorInput widget

* Add color info chip to ColorInput widget

* Fix all UX bugs

* Add more tooltips

* Fix FloatingMenu recursive loop

* Prevent mouse stray from closing color picker while dragging pickers

Closes #703

* Fix deselect all layers shortcut

* Add temporary eyedropper for Chromium browsers and a coming soon fallback
This commit is contained in:
Keavon Chambers
2022-10-28 18:36:04 -07:00
committed by GitHub
parent 803fa4a045
commit 7d2bdf11e1
23 changed files with 830 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floating-menus/EyedropperPreview.vue
+8 -10
View File
@@ -35,12 +35,11 @@
position: absolute;
width: 100%;
height: 100%;
top: -9px;
left: -9px;
top: -8px;
left: -8px;
padding: 8px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 8px rgba(0, 0, 0, 0.25);
}
.canvas-container {
@@ -52,18 +51,17 @@
height: 110px;
border-radius: 50%;
image-rendering: pixelated;
border: 1px solid rgba(255, 255, 255, 0.25);
}
&::after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.25);
}
.pixel-outline {