Add recent colors component.

src/uxbox/ui/workspace/options.cljs

@@ -8,6 +8,7 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.colorpicker :refer (colorpicker)]
+            [uxbox.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.ui.workspace.base :as wb]
             [uxbox.util.data :refer (parse-int parse-float)]))
 
@@ -43,13 +44,9 @@
 (defmulti -render-menu
   (fn [menu own shape] (:id menu)))
 
-(def ^:private ^:static toggle-colorpalette
-  #(rs/emit! (dw/toggle-tool :workspace/colorpalette)))
-
 (defmethod -render-menu :menu/fill
   [menu own shape]
   (letfn [(change-fill [value]
-            (println value)
             (let [sid (:id shape)]
               (-> (dw/update-shape-fill sid value)
                   (rs/emit!))))
@@ -78,16 +75,7 @@
           :value (:fill shape "")
           :on-change on-color-change}]]
 
-       ;; RECENT COLORS
+       (recent-colors shape)
-       [:span "Recent colors"]
-       [:div.row-flex
-        [:span.color-th]
-        [:span.color-th {:style {:background "#c5cb7f"}}]
-        [:span.color-th {:style {:background "#6cb533"}}]
-        [:span.color-th {:style {:background "#67c6b5"}}]
-        [:span.color-th {:style {:background "#a178e3"}}]
-        [:span.color-th.palette-th {:on-click toggle-colorpalette}
-         i/palette]]
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY
        [:span "Opacity"]

src/uxbox/ui/workspace/recent_colors.cljs

@@ -0,0 +1,69 @@
+(ns uxbox.ui.workspace.recent-colors
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [cats.labs.lens :as l]
+            [uxbox.rstore :as rs]
+            [uxbox.state :as st]
+            [uxbox.data.workspace :as dw]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.dom :as dom]
+            [uxbox.ui.workspace.base :as wb]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lenses
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:static ^:private shapes-by-id
+  (as-> (l/key :shapes-by-id) $
+    (l/focus-atom $ st/state)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Helpers
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private ^:static toggle-colorpalette
+  #(rs/emit! (dw/toggle-tool :workspace/colorpalette)))
+
+(defn- count-color
+  [state shape]
+  (let [color (:fill shape)]
+    (if (contains? state color)
+      (update state color inc)
+      (assoc state color 1))))
+
+(defn- calculate-colors
+  [shapes]
+  (let [result (reduce count-color {} shapes)]
+    (take 5 (map first (sort-by second (into [] result))))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Component
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- recent-colors-render
+  [own {:keys [page id] :as shape}]
+  (let [shapes-by-id (rum/react shapes-by-id)
+        shapes (->> (vals shapes-by-id)
+                    (filter #(= (:page %) page)))
+        colors (calculate-colors shapes)
+        on-click #(rs/emit! (dw/update-shape-fill id {:fill %}))]
+    (html
+     [:div
+      [:span "Recent colors"]
+      [:div.row-flex
+       (for [color colors]
+         [:span.color-th {:style {:background color}
+                          :on-click (partial on-click color)}])
+       (for [i (range (- 5 (count colors)))]
+         [:span.color-th])
+
+       [:span.color-th.palette-th {:on-click toggle-colorpalette}
+        i/palette]]])))
+
+(def ^:static recent-colors
+  (mx/component
+   {:render recent-colors-render
+    :name "recent-colors"
+    :mixins [mx/static rum/reactive]}))
+