mirror of
https://github.com/penpot/penpot.git
synced 2025-06-25 17:26:59 +02:00
✨ Disable new fills in UI when the cap is reached
This commit is contained in:
Belén Albeza
parent
827d39a406
commit
170d35dde2
5 changed files with 247 additions and 11 deletions
|
|
@ -0,0 +1,215 @@
|
||||||
|
{
|
||||||
|
"~:id": "~ub3e5731a-c295-801d-8006-3fc3517249cf",
|
||||||
|
"~:file-id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b13",
|
||||||
|
"~:created-at": "~m1748353475008",
|
||||||
|
"~:data": {
|
||||||
|
"~:objects": {
|
||||||
|
"~u00000000-0000-0000-0000-000000000000": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 0,
|
||||||
|
"~:hide-fill-on-export": false,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:name": "Root Frame",
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:type": "~:frame",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.01,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 0.0,
|
||||||
|
"~:y": 0.01
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:r1": 0,
|
||||||
|
"~:id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 0,
|
||||||
|
"~:proportion": 1.0,
|
||||||
|
"~:r4": 0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 0,
|
||||||
|
"~:y": 0,
|
||||||
|
"~:width": 0.01,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:x1": 0,
|
||||||
|
"~:y1": 0,
|
||||||
|
"~:x2": 0.01,
|
||||||
|
"~:y2": 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#FFFFFF",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 0.01,
|
||||||
|
"~:flip-y": null,
|
||||||
|
"~:shapes": [
|
||||||
|
"~u893b7b23-26fe-80dd-8006-3fc33f3061f8"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~u893b7b23-26fe-80dd-8006-3fc33f3061f8": {
|
||||||
|
"~#shape": {
|
||||||
|
"~:y": 307,
|
||||||
|
"~:transform": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:rotation": 0,
|
||||||
|
"~:grow-type": "~:fixed",
|
||||||
|
"~:hide-in-viewer": false,
|
||||||
|
"~:name": "Rectangle",
|
||||||
|
"~:width": 141,
|
||||||
|
"~:type": "~:rect",
|
||||||
|
"~:points": [
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 673,
|
||||||
|
"~:y": 307
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 814,
|
||||||
|
"~:y": 307
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 814,
|
||||||
|
"~:y": 455
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~#point": {
|
||||||
|
"~:x": 673,
|
||||||
|
"~:y": 455
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:r2": 0,
|
||||||
|
"~:proportion-lock": false,
|
||||||
|
"~:transform-inverse": {
|
||||||
|
"~#matrix": {
|
||||||
|
"~:a": 1.0,
|
||||||
|
"~:b": 0.0,
|
||||||
|
"~:c": 0.0,
|
||||||
|
"~:d": 1.0,
|
||||||
|
"~:e": 0.0,
|
||||||
|
"~:f": 0.0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:r3": 0,
|
||||||
|
"~:r1": 0,
|
||||||
|
"~:id": "~u893b7b23-26fe-80dd-8006-3fc33f3061f8",
|
||||||
|
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||||
|
"~:strokes": [],
|
||||||
|
"~:x": 673,
|
||||||
|
"~:proportion": 1,
|
||||||
|
"~:r4": 0,
|
||||||
|
"~:selrect": {
|
||||||
|
"~#rect": {
|
||||||
|
"~:x": 673,
|
||||||
|
"~:y": 307,
|
||||||
|
"~:width": 141,
|
||||||
|
"~:height": 148,
|
||||||
|
"~:x1": 673,
|
||||||
|
"~:y1": 307,
|
||||||
|
"~:x2": 814,
|
||||||
|
"~:y2": 455
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:fills": [
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"~:fill-color": "#B1B2B5",
|
||||||
|
"~:fill-opacity": 1
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"~:flip-x": null,
|
||||||
|
"~:height": 148,
|
||||||
|
"~:flip-y": null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"~:id": "~ub3e5731a-c295-801d-8006-3fc33c3b1b14",
|
||||||
|
"~:name": "Page 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { test, expect } from "@playwright/test";
|
import { test, expect, describe } from "@playwright/test";
|
||||||
import { WorkspacePage } from "../pages/WorkspacePage";
|
import { WorkspacePage } from "../pages/WorkspacePage";
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
|
|
@ -38,7 +38,7 @@ const setupFileWithMultipeAttributes = async (workspace) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
test.describe("Constraints", () => {
|
describe("Constraints", () => {
|
||||||
test("Constraint dropdown shows 'Mixed' when multiple layers are selected with different constraints", async ({
|
test("Constraint dropdown shows 'Mixed' when multiple layers are selected with different constraints", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
|
|
@ -66,7 +66,25 @@ test.describe("Constraints", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test.describe("Multiple shapes attributes", () => {
|
describe("Shape attributes", () => {
|
||||||
|
test("Cannot add a new fill when the limit has been reached", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
const workspace = new WorkspacePage(page);
|
||||||
|
await workspace.setupEmptyFile();
|
||||||
|
|
||||||
|
await workspace.goToWorkspace({
|
||||||
|
fileId: "b3e5731a-c295-801d-8006-3fc33c3b1b13",
|
||||||
|
pageId: "b3e5731a-c295-801d-8006-3fc33c3b1b14",
|
||||||
|
});
|
||||||
|
|
||||||
|
await workspace.clickLeafLayer("Rectangle");
|
||||||
|
|
||||||
|
expect(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Multiple shapes attributes", () => {
|
||||||
test("User selects multiple shapes with sames fills, strokes, shadows and blur", async ({
|
test("User selects multiple shapes with sames fills, strokes, shadows and blur", async ({
|
||||||
page,
|
page,
|
||||||
}) => {
|
}) => {
|
||||||
|
|
|
||||||
|
|
@ -222,7 +222,6 @@
|
||||||
(update :fills #(into [attrs] %))))
|
(update :fills #(into [attrs] %))))
|
||||||
undo-id
|
undo-id
|
||||||
(js/Symbol)]
|
(js/Symbol)]
|
||||||
|
|
||||||
(rx/concat
|
(rx/concat
|
||||||
(rx/of (dwu/start-undo-transaction undo-id))
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
(transform-fill state ids color change-fn options)
|
(transform-fill state ids color change-fn options)
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,8 @@
|
||||||
([attrs fill-data render-id index type]
|
([attrs fill-data render-id index type]
|
||||||
(add-fill! attrs fill-data render-id index type "none"))
|
(add-fill! attrs fill-data render-id index type "none"))
|
||||||
([attrs fill-data render-id index type fill-default]
|
([attrs fill-data render-id index type fill-default]
|
||||||
|
;; TODO: check for MAX-FILLS
|
||||||
|
(js/console.log "add_fill!" (clj->js fill-data))
|
||||||
(let [index (if (some? index) (dm/str "-" index) "")]
|
(let [index (if (some? index) (dm/str "-" index) "")]
|
||||||
(cond
|
(cond
|
||||||
(contains? fill-data :fill-image)
|
(contains? fill-data :fill-image)
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
[app.common.colors :as clr]
|
[app.common.colors :as clr]
|
||||||
[app.common.data :as d]
|
[app.common.data :as d]
|
||||||
[app.common.types.color :as ctc]
|
[app.common.types.color :as ctc]
|
||||||
|
[app.common.types.shape :as shp]
|
||||||
[app.common.types.shape.attrs :refer [default-color]]
|
[app.common.types.shape.attrs :refer [default-color]]
|
||||||
[app.main.data.workspace.colors :as dc]
|
[app.main.data.workspace.colors :as dc]
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
|
|
@ -54,7 +55,7 @@
|
||||||
values (d/without-nils values)
|
values (d/without-nils values)
|
||||||
fills (:fills values)
|
fills (:fills values)
|
||||||
has-fills? (or (= :multiple fills) (some? (seq fills)))
|
has-fills? (or (= :multiple fills) (some? (seq fills)))
|
||||||
|
can-add-fills? (and (not (= :multiple fills)) (< (count fills) shp/MAX-FILLS))
|
||||||
|
|
||||||
state* (mf/use-state has-fills?)
|
state* (mf/use-state has-fills?)
|
||||||
open? (deref state*)
|
open? (deref state*)
|
||||||
|
|
@ -73,12 +74,12 @@
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps ids fills)
|
(mf/deps ids fills)
|
||||||
(fn [_]
|
(fn [_]
|
||||||
(st/emit! (dc/add-fill ids {:color default-color
|
(when can-add-fills?
|
||||||
:opacity 1}))
|
(st/emit! (dc/add-fill ids {:color default-color
|
||||||
|
:opacity 1}))
|
||||||
(when (or (= :multiple fills)
|
(when (or (= :multiple fills)
|
||||||
(not (some? (seq fills))))
|
(not (some? (seq fills))))
|
||||||
(open-content))))
|
(open-content)))))
|
||||||
|
|
||||||
on-change
|
on-change
|
||||||
(fn [index]
|
(fn [index]
|
||||||
|
|
@ -151,6 +152,7 @@
|
||||||
:aria-label (tr "workspace.options.fill.add-fill")
|
:aria-label (tr "workspace.options.fill.add-fill")
|
||||||
:on-click on-add
|
:on-click on-add
|
||||||
:data-testid "add-fill"
|
:data-testid "add-fill"
|
||||||
|
:disabled (not can-add-fills?)
|
||||||
:icon "add"}])]]
|
:icon "add"}])]]
|
||||||
|
|
||||||
(when open?
|
(when open?
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue