Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

🐛 Fix colorpicker HSVA inputs

Browse source
This commit is contained in:
AzazelN28 2025-01-24 12:50:52 +01:00
parent 7458a35f31
commit 33192cfdb8
3 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/playwright/ui/specs/colorpicker.spec.js
View file

@ -22,3 +22,22 @@ test("Bug 7549 - User clicks on color swatch to display the color picker next to
const distance = swatchBox.x - (pickerBox.x + pickerBox.width);
expect(distance).toBeLessThan(60);
});
// Fix for https://tree.taiga.io/project/penpot/issue/9900
test("Bug 9900 - Color picker has no inputs for HSV values", async ({
page,
}) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile(page);
await workspacePage.goToWorkspace();
const swatch = workspacePage.page.getByRole("button", { name: "E8E9EA" });
await swatch.click();
const HSVA = await workspacePage.page.getByLabel("HSVA");
await HSVA.click();
await workspacePage.page.getByLabel("H", { exact: true }).isVisible();
await workspacePage.page.getByLabel("S", { exact: true }).isVisible();
await workspacePage.page.getByLabel("V", { exact: true }).isVisible();
});

4
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -97,6 +97,8 @@
active-color-tab (mf/use-state (dc/get-active-color-tab))
drag? (mf/use-state false)
type (if (= @active-color-tab "hsva") :hsv :rgb)
fill-image-ref (mf/use-ref nil)
selected-mode (get state :type :color)
@ -358,7 +360,7 @@
:on-change-tab on-change-tab}]]
[:& color-inputs
{:type (if (= @active-color-tab :hsva) :hsv :rgb)
{:type type
:disable-opacity disable-opacity
:color current-color
:on-change handle-change-color}]

16
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
View file

@ -120,7 +120,7 @@
(if (= type :rgb)
[:*
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "R"]
[:label {:for "red-value" :class (stl/css :input-label)} "R"]
[:input {:id "red-value"
:ref (:r refs)
:type "number"
@ -129,7 +129,7 @@
:default-value red
:on-change (on-change-property :r 255)}]]
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "G"]
[:label {:for "green-value" :class (stl/css :input-label)} "G"]
[:input {:id "green-value"
:ref (:g refs)
:type "number"
@ -138,7 +138,7 @@
:default-value green
:on-change (on-change-property :g 255)}]]
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "B"]
[:label {:for "blue-value" :class (stl/css :input-label)} "B"]
[:input {:id "blue-value"
:ref (:b refs)
:type "number"
@ -149,7 +149,7 @@
[:*
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "H"]
[:label {:for "hue-value" :class (stl/css :input-label)} "H"]
[:input {:id "hue-value"
:ref (:h refs)
:type "number"
@ -158,7 +158,7 @@
:default-value hue
:on-change (on-change-property :h 360)}]]
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "S"]
[:label {:for "saturation-value" :class (stl/css :input-label)} "S"]
[:input {:id "saturation-value"
:ref (:s refs)
:type "number"
@ -168,7 +168,7 @@
:default-value saturation
:on-change (on-change-property :s 100)}]]
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} "V"]
[:label {:for "value-value" :class (stl/css :input-label)} "V"]
[:input {:id "value-value"
:ref (:v refs)
:type "number"
@ -179,7 +179,7 @@
[:div {:class (stl/css :hex-alpha-wrapper)}
[:div {:class (stl/css-case :input-wrapper true
:hex true)}
[:span {:class (stl/css :input-label)} "HEX"]
[:label {:for "hex-value" :class (stl/css :input-label)} "HEX"]
[:input {:id "hex-value"
:ref (:hex refs)
:default-value hex
@ -187,7 +187,7 @@
:on-blur on-blur-hex}]]
(when (not disable-opacity)
[:div {:class (stl/css-case :input-wrapper true)}
[:span {:class (stl/css :input-label)} "A"]
[:label {:for "alpha-value" :class (stl/css :input-label)} "A"]
[:input {:id "alpha-value"
:ref (:alpha refs)
:type "number"