johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🎉 Add SVG panel to inspect styles tab (#7373)

Browse Source
This commit is contained in:
Xaviju
2025-09-29 09:53:15 +02:00
committed by GitHub
parent c1058c7fdb
commit 5e84bda404
2 changed files with 51 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@
[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-element :refer [layout-element-panel*]]
[app.main.ui.inspect.styles.panels.svg :refer [svg-panel*]]
[app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]]
[app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]]
[app.main.ui.inspect.styles.panels.visibility :refer [visibility-panel*]]
@@ -83,16 +84,11 @@
tokens-lib (mf/deref refs/tokens-lib)
active-themes (mf/deref refs/workspace-active-theme-paths-no-hidden)
active-sets
(mf/with-memo [tokens-lib]
(some-> tokens-lib (ctob/get-active-themes-set-names)))
active-tokens
(mf/with-memo [tokens-lib]
(if tokens-lib
(ctob/get-tokens-in-active-sets tokens-lib)
{}))
resolved-active-tokens
(sd/use-resolved-tokens* active-tokens)
active-sets (mf/with-memo [tokens-lib]
(some-> tokens-lib (ctob/get-active-themes-set-names)))
active-tokens (mf/with-memo [tokens-lib]
(some-> tokens-lib (ctob/get-tokens-in-active-sets)))
resolved-active-tokens (sd/use-resolved-tokens* active-tokens)
has-visibility-props? (mf/use-fn
(fn [shape]
(let [shape-type (:type shape)]
@@ -169,6 +165,13 @@
[:> visibility-panel* {:shapes shapes
:objects objects
:resolved-tokens resolved-active-tokens}]]))
;; SVG PANEL
:svg
(let [shape (first shapes)]
(when (seq (:svg-attrs shape))
[:> style-box* {:panel :svg}
[:> svg-panel* {:shape shape
:objects objects}]]))
;; DEFAULT WIP
[:> style-box* {:panel panel}
[:div color-space]])])]))

38
frontend/src/app/main/ui/inspect/styles/panels/svg.cljs Normal file
View File

@@ -0,0 +1,38 @@
;; 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.svg
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(defn- map->css [attr]
(->> attr
(map (fn [[attr-key attr-value]] (str (d/name attr-key) ":" attr-value)))
(str/join "; ")))
(mf/defc svg-panel*
[{:keys [shape _objects]}]
[:div {:class (stl/css :svg-panel)}
[:div {:key (:id shape) :class (stl/css :svg-shape)}
(for [[attr-key attr-value] (:svg-attrs shape)]
(if (map? attr-value)
(for [[sub-attr-key sub-attr-value] attr-value]
(let [property-value (map->css sub-attr-value)]
[:> properties-row* {:key (dm/str "svg-property-" (d/name sub-attr-key))
:term (d/name sub-attr-key)
:detail (dm/str sub-attr-value)
:property property-value
:copiable false}]))
[:> properties-row* {:key (dm/str "svg-property-" (d/name attr-key))
:term (d/name attr-key)
:detail (dm/str attr-value)
:property (dm/str attr-key ": " attr-value ";")
:copiable false}]))]])