github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 19:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Add visibility panel to inspect styles tab (#7362)

Browse Source
This commit is contained in:
Xaviju 2025-09-25 12:52:43 +02:00 committed by GitHub
parent 015bd9e453
commit adf7b0df50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 70 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,9 @@
;; 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
(:require-macros [app.main.style :as stl])
(:require
@ -15,6 +21,7 @@
[app.main.ui.inspect.styles.panels.layout-element :refer [layout-element-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*]]
[app.main.ui.inspect.styles.style-box :refer [style-box*]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
@ -85,7 +92,15 @@
(ctob/get-tokens-in-active-sets tokens-lib)
{}))
resolved-active-tokens
(sd/use-resolved-tokens* active-tokens)]
(sd/use-resolved-tokens* active-tokens)
has-visibility-props? (mf/use-fn
(fn [shape]
(let [shape-type (:type shape)]
(and
(not (or (= shape-type :text) (= shape-type :group)))
(or (:opacity shape)
(:blend-mode shape)
(:visibility shape))))))]
[:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
;; TOKENS PANEL
(when (or active-themes active-sets)
@ -146,6 +161,14 @@
:objects objects
:resolved-tokens resolved-active-tokens}]]))
;; VISIBILITY PANEL
:visibility
(let [shapes (filter has-visibility-props? shapes)]
(when (seq shapes)
[:> style-box* {:panel :visibility}
[:> visibility-panel* {:shapes shapes
:objects objects
:resolved-tokens resolved-active-tokens}]]))
;; DEFAULT WIP
[:> style-box* {:panel panel}
[:div color-space]])])]))

46
frontend/src/app/main/ui/inspect/styles/panels/visibility.cljs Normal file
View File

@ -0,0 +1,46 @@
;; 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.visibility
(: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]))
(def ^:private properties
[:opacity
:blend-mode])
(defn- get-applied-tokens-in-shape
[shape-tokens property]
(get shape-tokens property))
(defn- get-resolved-token
[property shape resolved-tokens]
(let [shape-tokens (:applied-tokens shape)
applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property)
token (get resolved-tokens applied-tokens-in-shape)]
token))
(mf/defc visibility-panel*
[{:keys [shapes objects resolved-tokens]}]
[:div {:class (stl/css :visibility-panel)}
(for [shape shapes]
[:div {:key (:id shape) :class "visibility-shape"}
(for [property properties]
(when-let [value (css/get-css-value objects shape property)]
(let [property-name (cmm/get-css-rule-humanized property)
resolved-token (get-resolved-token property shape resolved-tokens)
property-value (if (not resolved-token) (css/get-css-property objects shape property) "")]
[:> properties-row* {:key (dm/str "visibility-property-" property)
:term property-name
:detail (dm/str value)
:token resolved-token
:property property-value
:copiable true}])))])])