Add UI implementation for colors collections.

frontend/uxbox/ui/dashboard.cljs

@@ -127,9 +127,7 @@
     [:section.dashboard-content
      (colors/menu)
      (colors/nav)
-     [:section.dashboard-grid.library
+     (colors/grid)]]))
-      (colors/page-title)
-      (colors/grid)]]]))
 
 (defn colors-page-will-mount
   [own]

frontend/uxbox/ui/dashboard/colors.cljs

@@ -1,10 +1,12 @@
 (ns uxbox.ui.dashboard.colors
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [sablono.core :refer-macros [html]]
             [rum.core :as rum]
+            [cuerdas.core :as str]
             [cats.labs.lens :as l]
-            [uxbox.state :as s]
+            [uxbox.state :as st]
             [uxbox.rstore :as rs]
             [uxbox.data.dashboard :as dd]
+            [uxbox.util.lens :as ul]
             [uxbox.ui.dashboard.builtins :as builtins]
             [uxbox.ui.icons :as i]
             [uxbox.ui.lightbox :as lightbox]
@@ -13,23 +15,31 @@
             [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
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (def ^:static dashboard-state
   (as-> (l/in [:dashboard]) $
-    (l/focus-atom $ s/state)))
+    (l/focus-atom $ st/state)))
 
-(def ^:static colors-state
+(def ^:static collections-state
   (as-> (l/in [:colors-by-id]) $
-    (l/focus-atom $ s/state)))
+    (l/focus-atom $ st/state)))
+
+(def ^:static collection-state
+  (as-> (ul/dep-in [:colors-by-id] [:dashboard :collection-id]) $
+    (l/focus-atom $ st/state)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Helpers
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- get-collection
+  [type id]
+  (case type
+    :builtin (get builtins/+color-collections-by-id+ id)
+    :own (get-in @st/state [:colors-by-id id])))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Menu
@@ -56,21 +66,28 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn page-title-render
-  []
+  [own coll]
-  (let [dashboard (rum/react dashboard-state)
+  (letfn [(on-title-edited [e]
-        own? (= (:collection-type dashboard) :own)
+            (let [content (.-innerText (.-target e))
-        coll (get-collection {}
+                  collid (:id coll)]
-                             (:collection-type dashboard)
+              (rs/emit! (dd/rename-color-collection collid content))))
-                             (:collection-id dashboard))]
+          (on-delete [e]
-    (html
+            (rs/emit! (dd/delete-color-collection (:id coll))))]
-     [:div.dashboard-title
+    (let [dashboard (rum/react dashboard-state)
-      (if coll
+          own? (:builtin coll false)]
-        [:h2 (str "Library: " (:name coll))]
+      (html
-        [:h2 "No library selected"])
+       [:div.dashboard-title {}
-      (when (and own? coll)
+        (if coll
-        [:div.edition
+          [:h2 {}
-         [:span i/pencil]
+           [:span "Library: "]
-         [:span i/trash]])])))
+           [:span {:content-editable ""
+                   :on-key-up on-title-edited}
+            (:name coll)]]
+          [:h2 "No library selected"])
+        (if (and (not own?) coll)
+          [:div.edition {}
+           #_[:span i/pencil]
+           [:span {:on-click on-delete} i/trash]])]))))
 
 (def ^:static page-title
   (util/component
@@ -85,7 +102,7 @@
 (defn nav-render
   [own]
   (let [dashboard (rum/react dashboard-state)
-        colors (rum/react colors-state)
+        colors (rum/react collections-state)
         collid (:collection-id dashboard)
         own? (= (:collection-type dashboard) :own)
         builtin? (= (:collection-type dashboard) :builtin)
@@ -105,7 +122,9 @@
        [:ul.library-elements
         (when own?
           [:li
-           [:a.btn-primary {:href "#"} "+ New library"]])
+           [:a.btn-primary
+            {:on-click #(rs/emit! (dd/mk-color-collection))}
+            "+ New library"]])
         (for [props collections]
           [:li {:key (str (:id props))
                 :on-click #(rs/emit! (dd/set-collection (:id props)))
@@ -127,67 +146,85 @@
 (defn grid-render
   [own]
   (let [dashboard (rum/react dashboard-state)
-        own? (= (:collection-type dashboard) :own)
+        coll-type (:collection-type dashboard)
-        coll (get-collection {}
+        coll-id (:collection-id dashboard)
-                             (:collection-type dashboard)
+        own? (= coll-type :own)
-                             (:collection-id dashboard))]
+        coll (case coll-type
+               :builtin (get builtins/+color-collections-by-id+ coll-id)
+               :own (rum/react collection-state))
+        edit-cb #(lightbox/open! :color-form {:coll coll :color %})
+        remove-cb #(rs/emit! (dd/remove-color {:id (:id coll) :color %}))]
     (when coll
       (html
-       [:div.dashboard-grid-content
+       [:section.dashboard-grid.library
-        (when own?
+        (page-title coll)
-          [:div.grid-item.small-item.add-project
+        [:div.dashboard-grid-content
-           {:on-click #(lightbox/set! :new-color)}
+         (when own?
-           [:span "+ New color"]])
+           [:div.grid-item.small-item.add-project
-        (for [color (:colors coll)
+            {:on-click #(lightbox/open! :color-form {:coll coll})}
-              :let [color-str (name color)
+            [:span "+ New color"]])
-                  color-hex (str "#" color-str)
+         (for [color (remove nil? (:colors coll))
-                    color-rgb (util/hex->rgb color-hex)]]
+               :let [color-rgb (util/hex->rgb color)]]
-          [:div.grid-item.small-item.project-th {:key color-str}
+           [:div.grid-item.small-item.project-th {:key color}
-           [:span.color-swatch {:style {:background-color color-hex}}]
+            [:span.color-swatch {:style {:background-color color}}]
-           [:span.color-data (str "#" color-str)]
+            [:span.color-data color]
-           [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
+            [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
-           (when own?
+            (if own?
-             [:div.project-th-actions
+              [:div.project-th-actions
-              [:div.project-th-icon.edit i/pencil]
+               [:div.project-th-icon.edit
-              [:div.project-th-icon.delete i/trash]])])]))))
+                {:on-click #(edit-cb color)} i/pencil]
+               [:div.project-th-icon.delete
+                {:on-click #(remove-cb color)}
+                i/trash]])])]]))))
 
 (def grid
   (util/component
    {:render grid-render
-    :name "colors"
+    :name "grid"
     :mixins [mx/static rum/reactive]}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Lightbox
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn- new-color-lightbox-render
+;; TODO: implement proper form validation
-  [own]
+
-   (html
+(defn- color-lightbox-render
-    [:div.lightbox-body
+  [own {:keys [coll color]}]
-      [:h3 "New color"]
+  (let [local (:rum/local own)]
-      [:form
+    (letfn [(submit [e]
-        [:div.row-flex
+              (let [params {:id (:id coll) :from color
+                            :to (:hex @local)}]
+                (rs/emit! (dd/replace-color params))
+                (lightbox/close!)))
+            (on-change [e]
+              (let [value (str/trim (.-value (.-target e)))]
+                (swap! local assoc :hex value)))]
+      (html
+       [:div.lightbox-body
+        [:h3 "New color"]
+        [:form
+         [:div.row-flex
           [:input#color-hex.input-text
-            {:placeholder "#"
+           {:placeholder "#"
-            :type "text"}]
+            :on-change on-change
-          [:input#color-rgb.input-text
+            :value (or (:hex @local) color "")
-            {:placeholder "RGB"
             :type "text"}]]
-       (colorpicker (fn [{:keys [rgb hex]}]
+         (colorpicker #(swap! local merge %))
-                      (println "HEX:" hex)
+         [:input#project-btn.btn-primary
-                      (println "RGB:" rgb)))
+          {:value "+ Add color"
-       [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
+           :on-click submit
-     [:a.close {:href "#"
+           :type "submit"}]]
-                :on-click #(do (dom/prevent-default %)
+        [:a.close {:on-click #(lightbox/close!)}
-                               (lightbox/close!))}
+       i/close]]))))
-      i/close]]))
 
-(def new-color-lightbox
+(def color-lightbox
   (util/component
-   {:render new-color-lightbox-render
+   {:render color-lightbox-render
-    :name "new-color-lightbox"}))
+    :name "color-lightbox"
+    :mixins [(rum/local {})
+             mx/static]}))
 
-(defmethod lightbox/render-lightbox :new-color
+(defmethod lightbox/render-lightbox :color-form
-  [_]
+  [params]
-  (new-color-lightbox))
+  (color-lightbox params))