From 31bcce2668ff31a73cfcf276535b56e11ad36c86 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 22 Dec 2015 10:19:20 +0200
Subject: [PATCH] Render builtin color collections.

---
 frontend/uxbox/ui/dashboard/builtins.cljs |  18 +--
 frontend/uxbox/ui/dashboard/colors.cljs   | 136 ++++++----------------
 2 files changed, 42 insertions(+), 112 deletions(-)

diff --git a/frontend/uxbox/ui/dashboard/builtins.cljs b/frontend/uxbox/ui/dashboard/builtins.cljs
index c37864120..8be1a67c8 100644
--- a/frontend/uxbox/ui/dashboard/builtins.cljs
+++ b/frontend/uxbox/ui/dashboard/builtins.cljs
@@ -15,15 +15,15 @@
               }}
    {:name "Generic 2"
     :id 2
-    :colors #{:00f9ff
-              :009fff
-              :0078ff
-              :005eff
-              :0900ff
-              :7502f1
-              :ffe705
-              :00ffab
-              :f52105
+    :colors #{:20f9ff
+              :209fff
+              :2078ff
+              :205eff
+              :2900ff
+              :3502f1
+              :3fe705
+              :30ffab
+              :352105
               }}])
 
 (def ^:static +color-collections-by-id+
diff --git a/frontend/uxbox/ui/dashboard/colors.cljs b/frontend/uxbox/ui/dashboard/colors.cljs
index 18301f43e..edab942cc 100644
--- a/frontend/uxbox/ui/dashboard/colors.cljs
+++ b/frontend/uxbox/ui/dashboard/colors.cljs
@@ -13,6 +13,12 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.util :as util]))
 
+(defn- get-collection
+  [state type id]
+  (case type
+    :builtin (get builtins/+color-collections-by-id+ id)
+    :own (get-in state [:colors-by-id id])))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Lenses
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -112,108 +118,34 @@
 
 (defn grid-render
   [own]
-  (html
-   [:div.dashboard-grid-content
-    [:div.grid-item.small-item.add-project
-     {on-click #(lightbox/set! :new-color)}
-     [:span "+ New color"]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#81dadd"}}]
-     [:span.color-data "#00f9ff"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#6eafd6"}}]
-     [:span.color-data "#009fff"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#0078ff"}}]
-     [:span.color-data "#0078ff"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#005eff"}}]
-     [:span.color-data "#005eff"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#0900ff"}}]
-     [:span.color-data "#0900ff"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#7502f1"}}]
-     [:span.color-data "#7502f1"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#ffe705"}}]
-     [:span.color-data "#ffe705"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#00ffab"}}]
-     [:span.color-data "#00ffab"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#d56c5e"}}]
-     [:span.color-data "#f52105"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#ae80df"}}]
-     [:span.color-data "#7502f1"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#e7ba64"}}]
-     [:span.color-data "#ffe705"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#73c2a8"}}]
-     [:span.color-data "#00ffab"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]
-    [:div.grid-item.small-item.project-th
-     [:span.color-swatch {:style {:background-color "#f52105"}}]
-     [:span.color-data "#f52105"]
-     [:span.color-data "RGB 31,31,31"]
-     [:div.project-th-actions
-      [:div.project-th-icon.edit i/pencil]
-      [:div.project-th-icon.delete i/trash]]]]))
+  (let [dashboard (rum/react dashboard-state)
+        own? (= (:collection-type dashboard) :own)
+        coll (get-collection {}
+                             (:collection-type dashboard)
+                             (:collection-id dashboard))]
+    (html
+     [:div.dashboard-grid-content
+      (when own?
+        [:div.grid-item.small-item.add-project
+         {:on-click #(lightbox/set! :new-color)}
+         [:span "+ New color"]])
+      (for [color (:colors coll)
+            :let [color-str (name color)
+                  color-hex (str "#" color-str)
+                  color-rgb (util/hex->rgb color-hex)]]
+        [:div.grid-item.small-item.project-th {:key color-str}
+         [:span.color-swatch {:style {:background-color color-hex}}]
+         [:span.color-data (str "#" color-str)]
+         [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
+         [:div.project-th-actions
+          [:div.project-th-icon.edit i/pencil]
+          [:div.project-th-icon.delete i/trash]]])])))
 
 (def grid
   (util/component
    {:render grid-render
     :name "colors"
-    :mixins [mx/static]}))
+    :mixins [mx/static rum/reactive]}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Lightbox
@@ -232,12 +164,10 @@
           [:input#color-rgb.input-text
             {:placeholder "RGB"
             :type "text"}]]
-        [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
-
-     (colorpicker (fn [{:keys [rgb hex]}]
-                    (println "HEX:" hex)
-                    (println "RGB:" rgb)))
-
+       (colorpicker (fn [{:keys [rgb hex]}]
+                      (println "HEX:" hex)
+                      (println "RGB:" rgb)))
+       [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
      [:a.close {:href "#"
                 :on-click #(do (dom/prevent-default %)
                                (lightbox/close!))}