From 5ac123dc4b1a3979b9b5d5ac5c25761d3a68ee7e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 21 Sep 2022 09:29:03 +0200 Subject: [PATCH 1/9] :sparkles: Improve error handling on onboarding questions form --- frontend/src/app/main/store.cljs | 4 ++ .../src/app/main/ui/onboarding/questions.cljs | 54 ++++++++++++++----- frontend/src/app/util/dom.cljs | 5 ++ 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/store.cljs b/frontend/src/app/main/store.cljs index c8d274c1c..49f1e752a 100644 --- a/frontend/src/app/main/store.cljs +++ b/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))})) diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 7a70b8660..266d0d4bc 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/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 [] - (when-let [container (mf/ref-val container-ref)] + (letfn [(on-arengu-loaded [resolve reject] + (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") - head (unchecked-get js/document "head") - lkey1 (ev/listen js/document "af-submitForm-success" on-submit-success)] - - (unchecked-set script "src" "https://sdk.arengu.com/forms.js") - (unchecked-set script "onload" on-init) - (dom/append-child! head script) - + (let [cleaners (atom #{})] + (-> (p/create (partial initialize cleaners)) + (p/timeout 5000) + (p/catch on-error)) (fn [] - (ev/unlistenByKey lkey1))))) + (run! (fn [clean-fn] (clean-fn)) @cleaners))))) (mf/defc questions [{:keys [profile form-id]}] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 56d8c68a8..32be72f0b 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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) From bea96cb5865380be77be7199f571c42258859346 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 20 Sep 2022 14:43:00 +0200 Subject: [PATCH 2/9] :bug: Fix recent colors --- frontend/src/app/main/ui/workspace/colorpalette.cljs | 4 +++- frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs | 1 + frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs | 1 + .../app/main/ui/workspace/colorpicker/slider_selector.cljs | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 39b0e17bb..6ebb2bd65 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/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 #(some? (:color %)) current-colors) + state (mf/use-state {:show-menu false}) width (:width @state 0) visible (/ width 66) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs index b73e85843..3c6323a5b 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs +++ b/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 %))}] diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index 09a8cfa41..7684b0079 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs +++ b/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 %))} diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs index 9c47681d2..e6dafa65f 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs +++ b/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 %))} From f444d3d01d104ed8f791663a97bbb3a7cfbf896d Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 20 Sep 2022 15:42:57 +0200 Subject: [PATCH 3/9] :bug: Fix opacity in color picker --- frontend/src/app/main/ui/workspace/colorpicker.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index c7024ec61..bf15bcb36 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -67,7 +67,7 @@ (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! (dwl/add-recent-color recent-color))) From 199142045f0ea232fb4b22b84acb51f32817e2f1 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 21 Sep 2022 13:20:09 +0200 Subject: [PATCH 4/9] :bug: Remove bugged colors from recents --- frontend/src/app/main/ui/workspace/colorpalette.cljs | 2 +- frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 6ebb2bd65..501278cdc 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs @@ -37,7 +37,7 @@ (mf/defc palette [{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}] (let [;; We had to do this due to a bug that leave some bugged colors - current-colors (filter #(some? (:color %)) current-colors) + current-colors (filter #(or (:gradient %) (:color %)) current-colors) state (mf/use-state {:show-menu false}) width (:width @state 0) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 8e3b6e392..9825d5da6 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/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 From 4961991e18c021f337f3f6d3d075c885828fdd8a Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 21 Sep 2022 13:20:39 +0200 Subject: [PATCH 5/9] :bug: Fix gradient colors in recents --- frontend/src/app/main/data/workspace/colors.cljs | 10 ++++++++-- frontend/src/app/main/ui/workspace/colorpicker.cljs | 4 +--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index e6915bf1d..220567307 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/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] @@ -487,7 +488,7 @@ (dissoc :stops))))))))) (defn update-colorpicker-color - [changes] + [changes add-recent?] (ptk/reify ::update-colorpicker-color ptk/UpdateEvent (update [_ state] @@ -502,7 +503,12 @@ (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] diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index bf15bcb36..54d69318e 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -69,9 +69,7 @@ (fn [color] (let [recent-color (merge current-color color) recent-color (dc/materialize-color-components recent-color)] - (when (not @drag?) - (st/emit! (dwl/add-recent-color recent-color))) - (st/emit! (dc/update-colorpicker-color color))))) + (st/emit! (dc/update-colorpicker-color recent-color (not @drag?)))))) handle-click-picker (mf/use-fn From aed065eec18a943d3f042e70ca2d70797d5d338a Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 21 Sep 2022 08:43:21 +0200 Subject: [PATCH 6/9] :bug: Fix using gradient for shadow fill --- frontend/src/app/main/data/workspace/colors.cljs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 220567307..f40a5e1c5 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -243,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 From 3063725a62067f59b8b02e3d70a61e40a3836b47 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 21 Sep 2022 11:58:41 +0200 Subject: [PATCH 7/9] :bug: Fix color type icon doesn't change --- frontend/src/app/main/data/workspace/colors.cljs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index f40a5e1c5..18d8884e2 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -499,7 +499,10 @@ (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) From 726baefa251419c38b44acd2ca2f703678b7d68c Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 21 Sep 2022 12:21:58 +0200 Subject: [PATCH 8/9] :bug: Fix add to recent colors when changing fill or opacity manually --- .../sidebar/options/rows/color_row.cljs | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) 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 3f2200139..c16d88a27 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 @@ -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 - (assoc :color new-value) - (dissoc :gradient))))) + (let [color (-> color + (assoc :color new-value) + (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 - :opacity (/ value 100) - :id nil - :file-id nil)))) + (let [color (assoc color + :opacity (/ value 100) + :id nil + :file-id nil)] + (st/emit! (dwl/add-recent-color color) + (on-change color))))) handle-click-color (mf/use-fn From dfc1b03a602946aa93c248fe733c61bdbf6f3f68 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 21 Sep 2022 13:59:12 +0200 Subject: [PATCH 9/9] :paperclip: Update CHANGES.md file --- CHANGES.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 063ae3ec4..1108ac03e 100644 --- a/CHANGES.md +++ b/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