From 058a555594a9c85ef7e3b78c9ba683e1d2de6856 Mon Sep 17 00:00:00 2001 From: Xaviju Date: Wed, 22 Oct 2025 12:17:14 +0200 Subject: [PATCH] :tada: Add shadow panel to inspect styles tab (#7566) --- .../main/ui/inspect/attributes/shadow.cljs | 14 ++++---- frontend/src/app/main/ui/inspect/styles.cljs | 12 +++++++ .../main/ui/inspect/styles/panels/shadow.cljs | 33 +++++++++++++++++++ .../styles/property_detail_copiable.cljs | 6 ++-- .../styles/rows/color_properties_row.cljs | 2 +- frontend/src/app/util/code_gen/style_css.cljs | 2 +- 6 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/shadow.cljs diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs index 9a1ee8fd4f..55da3e552f 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs @@ -7,11 +7,10 @@ (ns app.main.ui.inspect.attributes.shadow (:require-macros [app.main.style :as stl]) (:require - [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button*]] [app.main.ui.components.title-bar :refer [inspect-title-bar*]] - [app.main.ui.inspect.attributes.common :refer [color-row]] + [app.main.ui.inspect.attributes.common :as cmm] [app.util.code-gen.style-css :as css] [app.util.code-gen.style-css-formats :refer [format-color-value]] [app.util.i18n :refer [tr]] @@ -31,13 +30,14 @@ (mf/defc shadow-block [{:keys [shadow]}] (let [color-format (mf/use-state :hex) color-format* (deref color-format) + label (cmm/get-css-rule-humanized (:style shadow)) on-change-format (mf/use-fn (fn [format] (reset! color-format format)))] [:div {:class (stl/css :attributes-shadow-block)} [:div {:class (stl/css :shadow-row)} - [:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))] + [:div {:class (stl/css :global/attr-label)} label] [:div {:class (stl/css :global/attr-value)} [:> copy-button* {:data (shadow-copy-data shadow) :class (stl/css :color-row-copy-btn)} @@ -51,10 +51,10 @@ (str (:blur shadow) "px") " " (str (:spread shadow) "px")]]]] - [:& color-row {:color (:color shadow) - :format @color-format - :copy-data (copy-color-data (:color shadow) color-format*) - :on-change-format on-change-format}]])) + [:& cmm/color-row {:color (:color shadow) + :format @color-format + :copy-data (copy-color-data (:color shadow) color-format*) + :on-change-format on-change-format}]])) (mf/defc shadow-panel [{:keys [shapes]}] (let [shapes (->> shapes (filter has-shadow?))] diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index d8b416530d..99267d04cb 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -20,6 +20,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.shadow :refer [shadow-panel*]] [app.main.ui.inspect.styles.panels.stroke :refer [stroke-panel*]] [app.main.ui.inspect.styles.panels.svg :refer [svg-panel*]] [app.main.ui.inspect.styles.panels.text :refer [text-panel*]] @@ -75,6 +76,9 @@ (defn- has-text? [shape] (:content shape)) +(defn- has-shadow? [shape] + (:shadow shape)) + (defn- get-shape-type [shapes first-shape first-component] (if (= (count shapes) 1) @@ -199,6 +203,7 @@ [:> style-box* {:panel :blur} [:> blur-panel* {:shapes shapes :objects objects}]])) + ;; TEXT PANEL :text (let [shapes (filter has-text? shapes)] (when (seq shapes) @@ -207,6 +212,13 @@ :color-space color-space :objects objects :resolved-tokens resolved-active-tokens}]])) + ;; SHADOW PANEL + :shadow + (let [shapes (filter has-shadow? shapes)] + (when (seq shapes) + [:> style-box* {:panel :shadow} + [:> shadow-panel* {:shapes shapes + :color-space color-space}]])) ;; DEFAULT WIP [:> style-box* {:panel panel} [:div color-space]])])])) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/shadow.cljs b/frontend/src/app/main/ui/inspect/styles/panels/shadow.cljs new file mode 100644 index 0000000000..d69a7186b1 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/panels/shadow.cljs @@ -0,0 +1,33 @@ +;; 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.shadow + (: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.color-properties-row :refer [color-properties-row*]] + [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 shadow-panel* + [{:keys [shapes color-space]}] + [:div {:class (stl/css :shadow-panel)} + (for [shape shapes] + (for [shadow (:shadow shape)] + [:div {:key (dm/str (:id shape) (:type shadow)) :class "shadow-shape"} + [:> color-properties-row* {:term "Shadow Color" + :color (:color shadow) + :format color-space + :copiable true}] + (let [value (dm/str (:offset-x shadow) "px" " " (:offset-y shadow) "px" " " (:blur shadow) "px" " " (:spread shadow) "px") + property-name (cmm/get-css-rule-humanized (:style shadow)) + property-value (css/shadow->css shadow)] + [:> properties-row* {:term property-name + :detail (dm/str value) + :property property-value + :copiable true}])]))]) diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs index cd524379fa..c5da8855c5 100644 --- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs +++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs @@ -8,8 +8,8 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.refs :as refs] - [app.main.ui.components.color-bullet :as bc] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] + [app.main.ui.ds.utilities.swatch :refer [swatch*]] [app.main.ui.inspect.common.colors :as isc] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -29,8 +29,8 @@ :property-detail-copiable-color (some? color)) :on-click on-click} (when color - [:> bc/color-bullet {:color color - :mini true}]) + [:> swatch* {:background color + :size "small"}]) (if token [:span {:class (stl/css :property-detail-text :property-detail-text-token)} (:name token)] diff --git a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs index b764452711..a651b428cb 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs @@ -50,7 +50,7 @@ (fmt/format-number)) "%")) formatted-color-value (mf/use-memo - (mf/deps color) + (mf/deps color format color-opacity) #(cond (some? (:color color)) (case format "hex" (dm/str color-value " " color-opacity) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 00d6ae7a94..e72fc9a9ee 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -332,4 +332,4 @@ body { (defn shadow->css [shadow] - (dm/str "box-shadow: " (format-shadow->css shadow {}))) + (dm/str "box-shadow: " (format-shadow->css shadow {}) ";"))