🐛 Fix problem with :multiple for colors and typographies

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
 

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

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

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)]
 

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

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)