diff --git a/CHANGES.md b/CHANGES.md index 063ae3ec4e..1108ac03ec 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 diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index e6915bf1d0..18d8884e2a 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] @@ -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] diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 39b0e17bbb..501278cdc8 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 #(or (:gradient %) (: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.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index c7024ec615..54d69318e5 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/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! (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 diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs index b73e85843a..3c6323a5bb 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/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 8e3b6e3925..9825d5da65 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 diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index 09a8cfa419..7684b00795 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 9c47681d26..e6dafa65f4 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 %))} 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 3f2200139a..c16d88a27a 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