From 35f3125fff88f1109fed18e45700d57b1759163e Mon Sep 17 00:00:00 2001 From: Xaviju Date: Tue, 22 Jul 2025 14:06:06 +0200 Subject: [PATCH] :bug: Fix null when copying shadow color on inspect tab (#6923) Co-authored-by: Xavier Julian --- CHANGES.md | 1 + .../main/ui/inspect/attributes/shadow.cljs | 16 +++++++-- .../app/main/ui/inspect/attributes/text.cljs | 34 ++----------------- frontend/src/app/util/code_gen/style_css.cljs | 1 + .../app/util/code_gen/style_css_formats.cljs | 1 + 5 files changed, 19 insertions(+), 34 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 340df7330c..24d02dc4e6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -42,6 +42,7 @@ - Fix main component receives focus and is selected when using 'Show Main Component' [Taiga #11402](https://tree.taiga.io/project/penpot/issue/11402) - Fix duplicating pages with mainInstance shapes nested inside groups [Taiga #10774](https://tree.taiga.io/project/penpot/issue/10774) - Fix ESC key not closing Add/Manage Libraries modal [Taiga #11523](https://tree.taiga.io/project/penpot/issue/11523) +- Fix copying a shadow color from info tab [Taiga #11211](https://tree.taiga.io/project/penpot/issue/11211) ## 2.8.1 (Unreleased) diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs index 212f384795..ebda4bcd3b 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs @@ -13,6 +13,7 @@ [app.main.ui.components.title-bar :refer [inspect-title-bar*]] [app.main.ui.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] + [app.util.code-gen.style-css-formats :refer [format-color]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -22,8 +23,18 @@ (defn- shadow-copy-data [shadow] (css/shadow->css shadow)) +(defn- copy-color-data + "Converts a fill object to CSS color string in the specified format." + [color format] + (format-color color {:format format})) + (mf/defc shadow-block [{:keys [shadow]}] - (let [color-format (mf/use-state :hex)] + (let [color-format (mf/use-state :hex) + color-format* (deref color-format) + 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))] @@ -42,7 +53,8 @@ [:& color-row {:color (:color shadow) :format @color-format - :on-change-format #(reset! 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/attributes/text.cljs b/frontend/src/app/main/ui/inspect/attributes/text.cljs index 90239b12b3..f4a527058d 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/text.cljs @@ -7,10 +7,8 @@ (ns app.main.ui.inspect.attributes.text (:require-macros [app.main.style :as stl]) (:require - [app.common.colors :as cc] [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.math :as mth] [app.common.text :as txt] [app.common.types.color :as ctc] [app.main.fonts :as fonts] @@ -20,6 +18,7 @@ [app.main.ui.components.title-bar :refer [inspect-title-bar*]] [app.main.ui.formats :as fmt] [app.main.ui.inspect.attributes.common :refer [color-row]] + [app.util.code-gen.style-css-formats :refer [format-color]] [app.util.color :as uc] [app.util.i18n :refer [tr]] [cuerdas.core :as str] @@ -38,13 +37,6 @@ (get-in state [:viewer-libraries file-id :data :typographies]))] #(l/derived get-library st/state))) -(defn alpha->hex [alpha] - (-> (mth/round (* 255 alpha)) - (js/Number) - (.toString 16) - (.toUpperCase) - (.padStart 2 "0"))) - (defn- copy-style-data [style & properties] (->> properties @@ -58,35 +50,13 @@ "background-clip: text;" "color: transparent;")) -(defn- format-solid-color - "returns a CSS color string based on the provided color and format." - [color format] - (let [color-value (:color color) - opacity (:opacity color 1) - has-opacity? (not (= 1 opacity))] - (case format - :rgba - (let [[r g b a] (cc/hex->rgba color-value opacity)] - (str "color: rgba(" (cc/format-rgba [r g b a]) ");")) - - :hex - (str "color: " color-value - (when has-opacity? (alpha->hex opacity)) ";") - - :hsla - (let [[h s l a] (cc/hex->hsla color-value opacity)] - (str "color: hsla(" (cc/format-hsla [h s l a]) ");")) - - ;; Default fallback - (str "color: " color-value ";")))) - (defn- copy-color-data "Converts a fill object to CSS color string in the specified format." [fill format] (let [color (ctc/fill->color fill)] (if-let [gradient (:gradient color)] (format-gradient-css gradient) - (format-solid-color color format)))) + (format-color color {:format format})))) (mf/defc typography-block [{:keys [text style]}] diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 5cef9d456a..8845441723 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -172,6 +172,7 @@ body { (format-value property value options)))) (defn format-css-property + "Format a single CSS property in the format 'property: value;'." [[property value] options] (when (some? value) (let [formatted-value (format-css-value property value options) diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index 170ac280d2..c73593474e 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -53,6 +53,7 @@ :else value)) (defn format-color + "Format a color value to a CSS compatible string based on the given format." [value options] (let [format (get options :format :hex)] (cond