github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-30 03:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Blur info doesn't show on inspect in certain shapes (#10427)

Browse Source 
* 🐛 Blur info doesn't show on inspect in certain shapes

* 🎉 Add test
This commit is contained in:
Eva Marco 2026-06-26 14:10:41 +02:00 committed by GitHub
parent 10147b6abd
commit 6a79383082
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 118 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/playwright/ui/specs/inspect-tab.spec.js
View File

@ -284,6 +284,53 @@ test.describe("Inspect tab - Styles", () => {
await setupFile(workspacePage);
await selectLayer(workspacePage, shapeToLayerName.blur);
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Blur");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");
const propertyRowCount = await propertyRow.count();
expect(propertyRowCount).toBeGreaterThanOrEqual(1);
});
test("Shape - Blur on not svg compatible shape", async ({ page }) => {
const workspacePage = new WasmWorkspacePage(page);
await setupFile(workspacePage);
await selectLayer(workspacePage, shapeToLayerName.blur);
await workspacePage.page.getByTestId("add-stroke").click();
await workspacePage.page.getByTestId("stroke.alignment").click();
await workspacePage.page.getByRole("option", { name: "Center" }).click();
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Blur");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");
const propertyRowCount = await propertyRow.count();
expect(propertyRowCount).toBeGreaterThanOrEqual(1);
});
test("Shape - Background Blur on not svg compatible shape", async ({
page,
}) => {
const workspacePage = new WasmWorkspacePage(page);
await setupFile(workspacePage);
await selectLayer(workspacePage, shapeToLayerName.blur);
await workspacePage.page.getByRole('combobox', { name: 'Blur type select' }).click();
await workspacePage.page.getByRole('option', { name: 'Background blur' }).click();
await workspacePage.page.getByTestId("add-stroke").click();
await workspacePage.page.getByTestId("stroke.alignment").click();
await workspacePage.page.getByRole("option", { name: "Center" }).click();
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Blur");

28
frontend/src/app/main/ui/inspect/attributes.cljs
View File

@ -12,15 +12,15 @@
[app.common.types.components-list :as ctkl]
[app.main.ui.hooks :as hooks]
[app.main.ui.inspect.annotation :refer [annotation*]]
[app.main.ui.inspect.attributes.blur :refer [blur-panel]]
[app.main.ui.inspect.attributes.blur :refer [blur-panel*]]
[app.main.ui.inspect.attributes.fill :refer [fill-panel*]]
[app.main.ui.inspect.attributes.geometry :refer [geometry-panel]]
[app.main.ui.inspect.attributes.layout :refer [layout-panel]]
[app.main.ui.inspect.attributes.layout-element :refer [layout-element-panel]]
[app.main.ui.inspect.attributes.shadow :refer [shadow-panel]]
[app.main.ui.inspect.attributes.geometry :refer [geometry-panel*]]
[app.main.ui.inspect.attributes.layout :refer [layout-panel*]]
[app.main.ui.inspect.attributes.layout-element :refer [layout-element-panel*]]
[app.main.ui.inspect.attributes.shadow :refer [shadow-panel*]]
[app.main.ui.inspect.attributes.stroke :refer [stroke-panel*]]
[app.main.ui.inspect.attributes.svg :refer [svg-panel]]
[app.main.ui.inspect.attributes.text :refer [text-panel]]
[app.main.ui.inspect.attributes.svg :refer [svg-panel*]]
[app.main.ui.inspect.attributes.text :refer [text-panel*]]
[app.main.ui.inspect.attributes.variant :refer [variant-panel*]]
[app.main.ui.inspect.attributes.visibility :refer [visibility-panel*]]
[app.main.ui.inspect.exports :refer [exports]]
@ -61,16 +61,16 @@
:workspace-element-options (= from :workspace))}
(for [[idx option] (map-indexed vector options)]
[:> (case option
:geometry geometry-panel
:layout layout-panel
:layout-element layout-element-panel
:geometry geometry-panel*
:layout layout-panel*
:layout-element layout-element-panel*
:fill fill-panel*
:stroke stroke-panel*
:shadow shadow-panel
:blur blur-panel
:shadow shadow-panel*
:blur blur-panel*
:visibility visibility-panel*
:text text-panel
:svg svg-panel
:text text-panel*
:svg svg-panel*
:variant variant-panel*)
{:key idx
:shapes shapes

50
frontend/src/app/main/ui/inspect/attributes/blur.cljs
View File

@ -13,6 +13,7 @@
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.util.code-gen.style-css :as css]
[app.util.code-gen.style-css-formats :refer [format-blur]]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -20,8 +21,8 @@
(or (:blur shape)
(:background-blur shape)))
(mf/defc blur-panel
[{:keys [objects shapes]}]
(mf/defc blur-panel*
[{:keys [shapes]}]
(let [render-wasm? (features/use-feature "render-wasm/v1")
bg-blur? (and render-wasm?
(contains? cf/flags :background-blur))
@ -36,34 +37,51 @@
:class (stl/css :title-wrapper)
:title-class (stl/css :blur-attr-title)}
(when (= (count shapes) 1)
(let [background-blur (:background-blur (first shapes))
layer-blur (:blur (first shapes))]
(let [layer-blur (:blur (first shapes))
blur-property :filter
blue-value-raw (get-in (first shapes) [:blur :value])
blur-property-value (css/format-css-property [blur-property blue-value-raw] {})
background-blur (:background-blur (first shapes))
background-blur-property :backdrop-filter
background-blur-value-raw (get-in (first shapes) [:background-blur :value])
background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {})]
(when background-blur
[:> copy-button* {:data (css/get-css-property objects (first shapes) :backdrop-filter)
[:> copy-button* {:data (dm/str background-blur-property-value)
:class (stl/css :copy-btn-title)}])
(when layer-blur
[:> copy-button* {:data (css/get-css-property objects (first shapes) :filter)
[:> copy-button* {:data (dm/str blur-property-value)
:class (stl/css :copy-btn-title)}])))]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]
(let [background-blur (:background-blur (first shapes))
layer-blur (:blur (first shapes))]
[:div {:class (stl/css :blur-row)
:key (dm/str "block-" (:id shape) "-blur")}
(let [layer-blur (:blur (first shapes))
blur-property :filter
blue-value-raw (get-in (first shapes) [:blur :value])
blur-property-value (css/format-css-property [blur-property blue-value-raw] {})
blur-value-detail (format-blur blue-value-raw)
background-blur (:background-blur (first shapes))
background-blur-property :backdrop-filter
background-blur-value-raw (get-in (first shapes) [:background-blur :value])
background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {})
background-blur-value-detail (format-blur background-blur-value-raw)]
[:*
(when background-blur
[:div {:key (dm/str "block-" (:id shape) "-background-blur")}
[:div {:class (stl/css :blur-row)
:key (dm/str "block-" (:id shape) "-background-blur")}
[:div {:class (stl/css :global/attr-label)}
"Backdrop Filter"]
[:div {:class (stl/css :global/attr-value)}
[:> copy-button* {:data (css/get-css-property objects shape :backdrop-filter)}
[:> copy-button* {:data (dm/str background-blur-property-value)}
[:div {:class (stl/css :button-children)}
(css/get-css-value objects shape :backdrop-filter)]]]])
(dm/str background-blur-value-detail)]]]])
(when layer-blur
[:div {:key (dm/str "block-" (:id shape) "-layer-blur")}
[:div {:class (stl/css :blur-row)
:key (dm/str "block-" (:id shape) "-layer-blur")}
[:div {:class (stl/css :global/attr-label)}
"Filter"]
[:div {:class (stl/css :global/attr-value)}
[:> copy-button* {:data (css/get-css-property objects shape :filter)}
[:> copy-button* {:data (dm/str blur-property-value)}
[:div {:class (stl/css :button-children)}
(css/get-css-value objects shape :filter)]]]])]))]])))
(dm/str blur-value-detail)]]]])]))]])))

2
frontend/src/app/main/ui/inspect/attributes/geometry.cljs
View File

@ -39,7 +39,7 @@
[:div {:class (stl/css :button-children)} value]]]])))])
(mf/defc geometry-panel
(mf/defc geometry-panel*
[{:keys [objects shapes]}]
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*

2
frontend/src/app/main/ui/inspect/attributes/layout.cljs
View File

@ -49,7 +49,7 @@
[:> copy-button* {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-panel
(mf/defc layout-panel*
[{:keys [objects shapes]}]
(let [shapes (->> shapes (filter ctl/any-layout?))]

2
frontend/src/app/main/ui/inspect/attributes/layout_element.cljs
View File

@ -44,7 +44,7 @@
[:> copy-button* {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-element-panel
(mf/defc layout-element-panel*
[{:keys [objects shapes]}]
(let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes)

3
frontend/src/app/main/ui/inspect/attributes/shadow.cljs
View File

@ -56,7 +56,8 @@
:copy-data (copy-color-data (:color shadow) color-format*)
:on-change-format on-change-format}]]))
(mf/defc shadow-panel [{:keys [shapes]}]
(mf/defc shadow-panel*
[{:keys [shapes]}]
(let [shapes (->> shapes (filter has-shadow?))]
(when (and (seq shapes) (> (count shapes) 0))

2
frontend/src/app/main/ui/inspect/attributes/svg.cljs
View File

@ -47,7 +47,7 @@
(for [[attr-key attr-value] (:svg-attrs shape)]
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-block-key-" (d/name attr-key))}])])
(mf/defc svg-panel
(mf/defc svg-panel*
[{:keys [shapes]}]
(let [shape (first shapes)]
(when (seq (:svg-attrs shape))

2
frontend/src/app/main/ui/inspect/attributes/text.cljs
View File

@ -151,7 +151,7 @@
:style full-style
:text text}])))
(mf/defc text-panel
(mf/defc text-panel*
[{:keys [shapes]}]
(when-let [shapes (seq (filter has-text? shapes))]
[:div {:class (stl/css :attributes-block)}

3
frontend/src/app/main/ui/inspect/styles.cljs
View File

@ -246,8 +246,7 @@
(let [shapes (->> shapes (filter has-blur?))]
(when (seq shapes)
[:> style-box* {:panel :blur}
[:> blur-panel* {:shapes shapes
:objects objects}]]))
[:> blur-panel* {:shapes shapes}]]))
;; TEXT PANEL
:text
(let [shapes (filter has-text? shapes)]

24
frontend/src/app/main/ui/inspect/styles/panels/blur.cljs
View File

@ -11,31 +11,35 @@
[app.main.ui.inspect.attributes.common :as cmm]
[app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
[app.util.code-gen.style-css :as css]
[app.util.code-gen.style-css-formats :refer [format-blur]]
[rumext.v2 :as mf]))
(mf/defc blur-panel*
[{:keys [shapes objects]}]
[{:keys [shapes]}]
[:div {:class (stl/css :blur-panel)}
(for [shape shapes]
[:div {:key (:id shape) :class (stl/css :blur-shape)}
(let [blur-property :filter
blur-value (css/get-css-value objects shape blur-property)
background-blur-property :backdrop-filter
blue-value-raw (get-in shape [:blur :value])
blur-value-detail (format-blur blue-value-raw)
blur-property-name (cmm/get-css-rule-humanized blur-property)
blur-property-value (css/get-css-property objects shape blur-property)
background-blur-value (css/get-css-value objects shape background-blur-property)
blur-property-value (css/format-css-property [blur-property blue-value-raw] {})
background-blur-property :backdrop-filter
background-blur-value-raw (get-in shape [:background-blur :value])
background-blur-value-detail (format-blur background-blur-value-raw)
background-blur-property-name (cmm/get-css-rule-humanized background-blur-property)
background-blur-property-value (css/get-css-property objects shape background-blur-property)]
background-blur-property-value (css/format-css-property [background-blur-property background-blur-value-raw] {})]
[:div
(when blur-property-value
(when blue-value-raw
[:> properties-row* {:key (dm/str "blur-property-" blur-property)
:term blur-property-name
:detail (dm/str blur-value)
:detail blur-value-detail
:property blur-property-value
:copiable true}])
(when background-blur-property-value
(when background-blur-value-raw
[:> properties-row* {:key (dm/str "blur-property-" background-blur-property)
:term background-blur-property-name
:detail (dm/str background-blur-value)
:detail background-blur-value-detail
:property background-blur-property-value
:copiable true}])])])])

2
frontend/src/app/util/code_gen/style_css_formats.cljs
View File

@ -174,7 +174,7 @@
(map #(format-shadow->css % options))
(str/join ", ")))
(defn- format-blur
(defn format-blur
[value]
(dm/fmt "blur(%)" (fmt/format-pixels value)))