Merge pull request #2316 from penpot/superalex-fix-colors

🐛 Fix several issues in colors #2303

CHANGES.md

@@ -11,6 +11,11 @@
 - Fix problem with snap to grids [#2221](https://github.com/penpot/penpot/issues/2221)
 - Fix issue when scaling to value 0 [#2252](https://github.com/penpot/penpot/issues/2252)
 - Fix problem when moving shapes inside nested frames [Taiga #4113](https://tree.taiga.io/project/penpot/issue/4113)
+- Fix color type icon does not change [Taiga #4133](https://tree.taiga.io/project/penpot/issue/4133)
+- Fix recent colors are not working [Taiga #4153](https://tree.taiga.io/project/penpot/issue/4153)
+- Fix change opacity in colorpicker cause bugged color [Taiga #4154](https://tree.taiga.io/project/penpot/issue/4154)
+- Fix gradient colors don't arrive in recent colors palette (https://tree.taiga.io/project/penpot/issue/4155)
+- Fix selected colors allow gradients in shadows [Taiga #4156](https://tree.taiga.io/project/penpot/issue/4156)
 
 ## 1.15.3-beta
 

frontend/src/app/main/data/workspace/colors.cljs

@@ -13,6 +13,7 @@
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.layout :as layout]
+   [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.util.color :as uc]
@@ -242,7 +243,10 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (rx/of (dch/update-shapes ids (fn [shape]
-                                      (let [new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
+                                      (let [;; If we try to set a gradient to a shadow (for example using the color selection from multiple shapes) let's use the first stop color
+                                            attrs (cond-> attrs
+                                                    (:gradient attrs) (get-in [:gradient :stops 0]))
+                                            new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
                                         (assoc-in shape [:shadow index :color] new-attrs))))))))
 
 (defn add-stroke
@@ -487,7 +491,7 @@
                         (dissoc :stops)))))))))
 
 (defn update-colorpicker-color
-  [changes]
+  [changes add-recent?]
   (ptk/reify ::update-colorpicker-color
     ptk/UpdateEvent
     (update [_ state]
@@ -495,14 +499,22 @@
               (fn [state]
                 (let [state (-> state
                                 (update :current-color merge changes)
-                                (update :current-color materialize-color-components))]
+                                (update :current-color materialize-color-components)
+                                ;; current color can be a library one I'm changing via colorpicker
+                                (d/dissoc-in [:current-color :id])
+                                (d/dissoc-in [:current-color :file-id]))]
                   (if-let [stop (:editing-stop state)]
                     (update-in state [:stops stop] (fn [data] (->> changes
                                                                    (merge data)
                                                                    (materialize-color-components))))
                     (-> state
                         (assoc :type :color)
-                        (dissoc :gradient :stops :editing-stop)))))))))
+                        (dissoc :gradient :stops :editing-stop)))))))
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when add-recent?
+        (let [formated-color  (get-color-from-colorpicker-state (:colorpicker state))]
+          (rx/of (dwl/add-recent-color formated-color)))))))
 
 (defn update-colorpicker-gradient
   [changes]

frontend/src/app/main/ui/workspace/colorpalette.cljs

@@ -36,7 +36,9 @@
 
 (mf/defc palette
   [{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}]
-  (let [state      (mf/use-state {:show-menu false})
+  (let [;; We had to do this due to a bug that leave some bugged colors
+        current-colors (filter #(or (:gradient %) (:color %)) current-colors)
+        state      (mf/use-state {:show-menu false})
 
         width      (:width @state 0)
         visible    (/ width 66)

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -67,11 +67,9 @@
         (mf/use-fn
          (mf/deps @drag?)
          (fn [color]
-           (let [recent-color (merge color)
+           (let [recent-color (merge current-color color)
                  recent-color (dc/materialize-color-components recent-color)]
-             (when (not @drag?)
+             (st/emit! (dc/update-colorpicker-color recent-color (not @drag?))))))
-               (st/emit! (dwl/add-recent-color recent-color)))
-             (st/emit! (dc/update-colorpicker-color color)))))
 
         handle-click-picker
         (mf/use-fn

frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs

@@ -131,6 +131,7 @@
         :width canvas-side
         :height canvas-side
         :on-pointer-down handle-start-drag
+        :on-pointer-up handle-stop-drag
         :on-lost-pointer-capture handle-stop-drag
         :on-click calculate-pos
         :on-mouse-move #(when @dragging? (calculate-pos %))}]

frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs

@@ -25,6 +25,7 @@
         shared-libs      (mf/deref refs/workspace-libraries)
         file-colors      (mf/deref refs/workspace-file-colors)
         recent-colors    (mf/deref refs/workspace-recent-colors)
+        recent-colors    (filter #(or (:gradient %) (:color %)) recent-colors)
 
         on-library-change
         (mf/use-fn

frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs

@@ -41,6 +41,7 @@
         ]
     [:div.value-saturation-selector
      {:on-pointer-down handle-start-drag
+      :on-pointer-up handle-stop-drag
       :on-lost-pointer-capture handle-stop-drag
       :on-click calculate-pos
       :on-mouse-move #(when @dragging? (calculate-pos %))}

frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs

@@ -52,6 +52,7 @@
     [:div.slider-selector
      {:class (str (if vertical? "vertical " "") class)
       :on-pointer-down handle-start-drag
+      :on-pointer-up handle-stop-drag
       :on-lost-pointer-capture handle-stop-drag
       :on-click calculate-pos
       :on-mouse-move #(when @dragging? (calculate-pos %))}

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -10,7 +10,9 @@
    [app.common.data.macros :as dm]
    [app.common.pages :as cp]
    [app.main.data.modal :as modal]
+   [app.main.data.workspace.libraries :as dwl]
    [app.main.refs :as refs]
+   [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input]]
    [app.main.ui.components.numeric-input :refer [numeric-input]]
@@ -73,18 +75,22 @@
         (mf/use-fn
          (mf/deps color on-change)
          (fn [new-value]
-           (on-change (-> color
+           (let [color (-> color
-                          (assoc :color new-value)
+                           (assoc :color new-value)
-                          (dissoc :gradient)))))
+                           (dissoc :gradient))]
+             (st/emit! (dwl/add-recent-color color)
+             (on-change color)))))
 
         handle-opacity-change
         (mf/use-fn
          (mf/deps color on-change)
          (fn [value]
-           (on-change (assoc color
+           (let [color (assoc color
-                             :opacity (/ value 100)
+                              :opacity (/ value 100)
-                             :id nil
+                              :id nil
-                             :file-id nil))))
+                              :file-id nil)]
+             (st/emit! (dwl/add-recent-color color)
+             (on-change color)))))
 
         handle-click-color
         (mf/use-fn