github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-14 07:59:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Add blur panel to inspect styles tab (#7397)

Browse Source
This commit is contained in:
Xaviju 2025-09-30 13:08:52 +02:00 committed by GitHub
parent 7d16515eb7
commit f31e9b8ac9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.style-dictionary :as sd] [app.main.data.style-dictionary :as sd]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.inspect.styles.panels.blur :refer [blur-panel*]]
[app.main.ui.inspect.styles.panels.fill :refer [fill-panel*]] [app.main.ui.inspect.styles.panels.fill :refer [fill-panel*]]
[app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]] [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]]
[app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]] [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]]
@ -63,6 +64,8 @@
(not (contains? #{:text :group} (:type shape))) (not (contains? #{:text :group} (:type shape)))
(seq (:fills shape)))) (seq (:fills shape))))
(defn- has-blur? [shape]
(:blur shape))
(defn- get-shape-type (defn- get-shape-type
[shapes first-shape first-component] [shapes first-shape first-component]
@ -172,6 +175,13 @@
[:> style-box* {:panel :svg} [:> style-box* {:panel :svg}
[:> svg-panel* {:shape shape [:> svg-panel* {:shape shape
:objects objects}]])) :objects objects}]]))
;; BLUR PANEL
:blur
(let [shapes (->> shapes (filter has-blur?))]
(when (seq shapes)
[:> style-box* {:panel :blur}
[:> blur-panel* {:shapes shapes
:objects objects}]]))
;; DEFAULT WIP ;; DEFAULT WIP
[:> style-box* {:panel panel} [:> style-box* {:panel panel}
[:div color-space]])])])) [:div color-space]])])]))

29
frontend/src/app/main/ui/inspect/styles/panels/blur.cljs Normal file
View File

@ -0,0 +1,29 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.inspect.styles.panels.blur
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[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]
[rumext.v2 :as mf]))
(mf/defc blur-panel*
[{:keys [shapes objects]}]
[:div {:class (stl/css :blur-panel)}
(for [shape shapes]
[:div {:key (:id shape) :class "blur-shape"}
(let [property :filter
value (css/get-css-value objects shape property)
property-name (cmm/get-css-rule-humanized property)
property-value (css/get-css-property objects shape property)]
[:> properties-row* {:key (dm/str "blur-property-" property)
:term property-name
:detail (dm/str value)
:property property-value
:copiable true}])])])