3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-01 16:48:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix color picker position

Browse source
This commit is contained in:
Belén Albeza 2024-05-15 13:07:47 +02:00 • committed by Andrey Antukh
parent d073f51790
commit 804f4bb176
4 changed files with 31 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/playwright/ui/pages/WorkspacePage.js
View file

@ -44,6 +44,7 @@ export class WorkspacePage extends BaseWebSocketPage {
this.viewport = page.getByTestId("viewport"); this.viewport = page.getByTestId("viewport");
this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`); this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
this.colorpicker = page.getByTestId("colorpicker");
} }
async goToWorkspace() { async goToWorkspace() {

22
frontend/playwright/ui/specs/colorpicker.spec.js Normal file
View file

@ -0,0 +1,22 @@
import { test, expect } from "@playwright/test";
import { WorkspacePage } from "../pages/WorkspacePage";
test.beforeEach(async ({ page }) => {
await WorkspacePage.init(page);
});
// Fix for https://tree.taiga.io/project/penpot/issue/7549
test("Bug 7549 - User clicks on color swatch to display the color picker next to it", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile(page);
await workspacePage.goToWorkspace();
const swatch = workspacePage.page.getByRole("button", { name: "E8E9EA" });
const swatchBox = await swatch.boundingBox();
await swatch.click();
await expect(workspacePage.colorpicker).toBeVisible();
const pickerBox = await workspacePage.colorpicker.boundingBox();
const distance = swatchBox.x - (pickerBox.x + pickerBox.width);
expect(distance).toBeLessThan(60);
});

1
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -76,6 +76,7 @@
:is-transparent (and opacity (> 1 opacity)) :is-transparent (and opacity (> 1 opacity))
:grid-area area :grid-area area
:read-only read-only?) :read-only read-only?)
:role "button"
:data-readonly (str read-only?) :data-readonly (str read-only?)
:on-click on-click :on-click on-click
:title (color-title color)} :title (color-title color)}

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

@ -372,15 +372,14 @@
(defn calculate-position (defn calculate-position
"Calculates the style properties for the given coordinates and position" "Calculates the style properties for the given coordinates and position"
[{vh :height} position x y] [{vh :height} position x y]
(let [;; picker height in pixels (let [;; picker size in pixels
h 510 h 510
w 284
;; Checks for overflow outside the viewport height ;; Checks for overflow outside the viewport height
max-y (- vh h) max-y (- vh h)
rulers? (mf/deref refs/rulers?) rulers? (mf/deref refs/rulers?)
left-offset (if rulers? 40 18) left-offset (if rulers? 40 18)
right-offset (+ w 40)]
x-pos 400]
(cond (cond
(or (nil? x) (nil? y)) (or (nil? x) (nil? y))
@ -388,9 +387,9 @@
(= position :left) (= position :left)
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (- x x-pos) "px") #js {:left (dm/str (- x right-offset) "px")
:bottom "1rem"} :bottom "1rem"}
#js {:left (dm/str (- x x-pos) "px") #js {:left (dm/str (- x right-offset) "px")
:top (dm/str (- y 70) "px")}) :top (dm/str (- y 70) "px")})
(= position :right) (= position :right)
@ -440,6 +439,7 @@
(on-close @last-change))) (on-close @last-change)))
[:div {:class (stl/css :colorpicker-tooltip) [:div {:class (stl/css :colorpicker-tooltip)
:data-testid "colorpicker"
:style style} :style style}
[:& colorpicker {:data data [:& colorpicker {:data data