From 95cb6d132b5c9ee98a9a450e9b7dce2ccc766811 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 24 May 2021 21:28:37 +0200 Subject: [PATCH] :bug: Fix problem with :multiple for colors and typographies --- CHANGES.md | 1 + .../src/app/main/ui/shapes/text/styles.cljs | 3 +- .../workspace/sidebar/options/menus/text.cljs | 4 ++- .../sidebar/options/rows/color_row.cljs | 30 ++++++++++------- .../sidebar/options/shapes/multiple.cljs | 33 ++++++++++--------- frontend/src/app/util/color.cljs | 2 +- 6 files changed, 43 insertions(+), 30 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 504a776e6a..7d77486b6c 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -34,6 +34,7 @@ - Fix problem with color picker positioning - Fix order on color palette [#961](https://github.com/penpot/penpot/issues/961) - Fix issue when group creation leaves an empty group [#1724](https://tree.taiga.io/project/penpot/issue/1724) +- Fix problem with :multiple for colors and typographies [#1668](https://tree.taiga.io/project/penpot/issue/1668) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 7b436bccd4..8c15ccb43c 100644 --- a/frontend/src/app/main/ui/shapes/text/styles.cljs +++ b/frontend/src/app/main/ui/shapes/text/styles.cljs @@ -75,7 +75,8 @@ ;; (uc/hex->rgba fill-color fill-opacity)) [r g b a] (uc/hex->rgba fill-color fill-opacity) - text-color (str/format "rgba(%s, %s, %s, %s)" r g b a) + text-color (when (and (some? fill-color) (some? fill-opacity)) + (str/format "rgba(%s, %s, %s, %s)" r g b a)) fontsdb (deref fonts/fontsdb) base #js {:textDecoration text-decoration diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 2b46a3bf52..0d6ab25464 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -288,6 +288,8 @@ (fn [changes] (st/emit! (dwl/update-typography (merge typography changes) file-id)))) + multiple? (->> values vals (d/seek #(= % :multiple))) + opts #js {:ids ids :values values :on-change on-change}] @@ -295,7 +297,7 @@ [:div.element-set [:div.element-set-title [:span label] - (when (not typography) + (when (and (not typography) (not multiple?)) [:div.add-page {:on-click on-convert-to-typography} i/close])] (cond diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 96e5f40211..be8a067efd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -27,7 +27,19 @@ (defn color-picker-callback [color disable-gradient disable-opacity handle-change-color handle-open handle-close] (fn [event] - (let [x (.-clientX event) + (let [color + (cond + (uc/multiple? color) + {:color cp/default-color + :opacity 1} + + (= :multiple (:opacity color)) + (assoc color :opacity 1) + + :else + color) + + x (.-clientX event) y (.-clientY event) props {:x x :y y @@ -98,16 +110,12 @@ handle-click-color (mf/use-callback (mf/deps color) - (let [;; If multiple, we change to default color - color (if (uc/multiple? color) - {:color cp/default-color :opacity 1} - color)] - (color-picker-callback color - disable-gradient - disable-opacity - handle-pick-color - handle-open - handle-close))) + (color-picker-callback color + disable-gradient + disable-opacity + handle-pick-color + handle-open + handle-close)) prev-color (h/use-previous color)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 259ff36a6f..86a0490531 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -148,22 +148,23 @@ extract-attrs (fn [[ids values] {:keys [id type shapes content] :as shape}] - (let [props (get-in type->props [type attr-type]) - result (case props - :ignore [ids values] - :shape [(conj ids id) - (merge-attrs values (merge - (empty-map attrs) - (select-keys shape attrs)))] - :text [(conj ids id) - (-> values - (merge-attrs (select-keys shape attrs)) - (merge-attrs (attrs/get-attrs-multi (txt/node-seq content) attrs)))] - :children (let [children (->> (:shapes shape []) (map #(get objects %))) - [new-ids new-values] (get-attrs children objects attr-type)] - [(d/concat ids new-ids) (merge-attrs values new-values)]) - [])] - result))] + (let [props (get-in type->props [type attr-type])] + (case props + :ignore [ids values] + :shape [(conj ids id) + (merge-attrs values (merge + (empty-map attrs) + (select-keys shape attrs)))] + :text [(conj ids id) + (-> values + (merge-attrs (select-keys shape attrs)) + (merge-attrs (merge + (select-keys txt/default-text-attrs attrs) + (attrs/get-attrs-multi (txt/node-seq content) attrs))))] + :children (let [children (->> (:shapes shape []) (map #(get objects %))) + [new-ids new-values] (get-attrs children objects attr-type)] + [(d/concat ids new-ids) (merge-attrs values new-values)]) + [])))] (reduce extract-attrs [[] []] shapes))) (mf/defc options diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index 05183e2eb1..8899e6f23b 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -135,7 +135,7 @@ :else "transparent"))) -(defn multiple? [{:keys [id file-id value color gradient]}] +(defn multiple? [{:keys [id file-id value color gradient opacity]}] (or (= value :multiple) (= color :multiple) (= gradient :multiple)