Merge remote-tracking branch 'origin/staging'

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/store.cljs

@@ -16,6 +16,10 @@
 (defonce loader (l/atom false))
 (defonce on-error (l/atom identity))
 
+(defmethod ptk/resolve :default
+  [type data]
+  (ptk/data-event type data))
+
 (defonce state
   (ptk/store {:resolve ptk/resolve
               :on-error (fn [e] (@on-error e))}))

frontend/src/app/main/ui/onboarding/questions.cljs

@@ -7,35 +7,61 @@
 (ns app.main.ui.onboarding.questions
   "External form for onboarding questions."
   (:require
+   [app.main.data.events :as ev]
    [app.main.data.users :as du]
    [app.main.store :as st]
    [app.util.dom :as dom]
-   [goog.events :as ev]
+   [goog.events :as gev]
+   [potok.core :as ptk]
    [promesa.core :as p]
    [rumext.alpha :as mf]))
 
 (defn load-arengu-sdk
   [container-ref email form-id]
-  (letfn [(on-init []
+  (letfn [(on-arengu-loaded [resolve reject]
-            (when-let [container (mf/ref-val container-ref)]
+            (let [container (mf/ref-val container-ref)]
               (-> (.embed js/ArenguForms form-id container)
                   (p/then (fn [form]
-                            (.setHiddenField ^js form "email" email))))))
+                            (.setHiddenField ^js form "email" email)
+                            (st/emit! (ptk/event ::ev/event {::ev/name "arengu-form-load-success"
+                                                                  ::ev/origin "onboarding-questions"
+                                                                  ::ev/type "fact"}))
+                            (resolve)))
+                  (p/catch reject))))
 
-          (on-submit-success [_event]
+          (mark-as-answered []
             (st/emit! (du/mark-questions-as-answered)))
+
+          (initialize [cleaners resolve reject]
+            (let [script (dom/create-element "script")
+                  head   (unchecked-get js/document "head")
+                  lkey1  (gev/listen js/document "af-submitForm-success" mark-as-answered)
+                  lkey2  (gev/listen js/document "af-getForm-error" reject)]
+
+              (unchecked-set script "src" "https://sdk.arengu.com/forms.js")
+              (unchecked-set script "onload" (partial on-arengu-loaded resolve reject))
+              (dom/append-child! head script)
+
+              (swap! cleaners conj
+                     #(do (gev/unlistenByKey lkey1)
+                          (gev/unlistenByKey lkey2)))
+
+              (swap! cleaners conj
+                     #(dom/remove-child! head script))))
+
+          (on-error [_]
+            (st/emit! (ptk/event ::ev/event {::ev/name "arengu-form-load-error"
+                                             ::ev/origin "onboarding-questions"
+                                             ::ev/type "fact"}))
+            (mark-as-answered))
           ]
 
-    (let [script (dom/create-element "script")
+    (let [cleaners (atom #{})]
-          head   (unchecked-get js/document "head")
+      (-> (p/create (partial initialize cleaners))
-          lkey1  (ev/listen js/document "af-submitForm-success" on-submit-success)]
+          (p/timeout 5000)
-
+          (p/catch on-error))
-      (unchecked-set script "src" "https://sdk.arengu.com/forms.js")
-      (unchecked-set script "onload" on-init)
-      (dom/append-child! head script)
-
       (fn []
-        (ev/unlistenByKey lkey1)))))
+        (run! (fn [clean-fn] (clean-fn)) @cleaners)))))
 
 (mf/defc questions
   [{:keys [profile form-id]}]

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

frontend/src/app/util/dom.cljs

@@ -264,6 +264,11 @@
   (when (some? el)
     (.appendChild ^js el child)))
 
+(defn remove-child!
+  [^js el child]
+  (when (some? el)
+    (.removeChild ^js el child)))
+
 (defn get-first-child
   [^js el]
   (when (some? el)