From 78551cea61221829dff479718ce9ffaf48f04bd5 Mon Sep 17 00:00:00 2001
From: Alejandro Alonso <alejandroalonsofernandez@gmail.com>
Date: Mon, 29 May 2023 12:13:47 +0200
Subject: [PATCH] :bug: Fix create color asset from selected layer

---
 CHANGES.md                                    |  1 +
 .../src/app/main/data/workspace/colors.cljs   | 34 +++++++++++++++++++
 .../app/main/ui/workspace/sidebar/assets.cljs | 20 ++---------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 80ace1cb1..733aeb72c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -12,6 +12,7 @@
 
 ### :bug: Bugs fixed
 - Fix files can be opened from multiple urls [Taiga #5310](https://tree.taiga.io/project/penpot/issue/5310)
+- Fix asset color item was created from the selected layer [Taiga #5180](https://tree.taiga.io/project/penpot/issue/5180)
 
 ### :arrow_up: Deps updates
 
diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs
index 53471eb08..aa272431d 100644
--- a/frontend/src/app/main/data/workspace/colors.cljs
+++ b/frontend/src/app/main/data/workspace/colors.cljs
@@ -12,6 +12,7 @@
    [app.common.pages.helpers :as cph]
    [app.common.schema :as sm]
    [app.main.broadcast :as mbc]
+   [app.main.data.events :as ev]
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.layout :as layout]
@@ -19,6 +20,7 @@
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.main.data.workspace.undo :as dwu]
+   [app.main.store :as st]
    [app.util.color :as uc]
    [beicon.core :as rx]
    [potok.core :as ptk]))
@@ -604,3 +606,35 @@
                                               (assoc :alpha 0)
                                               (assoc :offset 1)
                                               (materialize-color-components))]))))))))))
+
+(defn select-color
+  [position]
+  (ptk/reify ::select-color
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [selected   (wsh/lookup-selected state)
+            shapes     (wsh/lookup-shapes state selected)
+            shape      (first shapes)
+            fills      (if (cph/text-shape? shape)
+                         (:fills (dwt/current-text-values
+                                   {:editor-state (dm/get-in state [:workspace-editor-state (:id shape)])
+                                    :shape shape
+                                    :attrs (conj dwt/text-fill-attrs :fills)}))
+                         (:fills shape))
+            fill       (first fills)
+            single?    (and (= 1 (count selected))
+                         (= 1 (count fills)))
+            data       (if single?
+                         (d/without-nils {:color (:fill-color fill)
+                                          :opacity (:fill-opacity fill)
+                                          :gradient (:fill-color-gradient fill)})
+                         {:color "#406280"
+                          :opacity 1})]
+        (rx/of (md/show :colorpicker
+                 {:x (:x position)
+                  :y (:y position)
+                  :on-accept #(st/emit! (dwl/add-color data))
+                  :data data
+                  :position :right})
+          (ptk/event ::ev/event {::ev/name "add-asset-to-library"
+                                 :asset-type "color"}))))))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index e3fc89bb5..6e490c7aa 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -1546,25 +1546,11 @@
 
         read-only?      (mf/use-ctx ctx/workspace-read-only?)
 
-        add-color
-        (mf/use-fn
-         (fn [value _]
-           (st/emit! (dwl/add-color value))))
-
         add-color-clicked
         (mf/use-fn
-         (mf/deps file-id)
-         (fn [event]
-           (st/emit! (dw/set-assets-section-open file-id :colors true)
-                     (ptk/event ::ev/event {::ev/name "add-asset-to-library"
-                                            :asset-type "color"}))
-           (modal/show! :colorpicker
-                        {:x (.-clientX event)
-                         :y (.-clientY event)
-                         :on-accept add-color
-                         :data {:color "#406280"
-                                :opacity 1}
-                         :position :right})))
+          (fn [event]
+            (let [position (dom/get-client-position event)]
+              (st/emit! (dc/select-color position)))))
 
         create-group
         (mf/use-fn