Minor code reorganization and wip of colors page.

frontend/uxbox/data/dashboard.cljs

@@ -0,0 +1,60 @@
+(ns uxbox.data.dashboard
+  (:require [uxbox.rstore :as rs]
+            [uxbox.router :as r]
+            [uxbox.state :as st]
+            [uxbox.schema :as sc]
+            [uxbox.time :as time]
+            [bouncer.validators :as v]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Helpers
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn assoc-page
+  "A reduce function for assoc the page
+  to the state map."
+  [state page]
+  (let [uuid (:id page)]
+    (update-in state [:pages-by-id] assoc uuid page)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Events
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn initialize
+  [section]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (assoc state :dashboard {:section section
+                               :collection-type :builtin
+                               :collection-id nil}))
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.d/initialize>"))))
+
+(defn set-collection-type
+  [type]
+  {:pre [(contains? #{:builtin :own} type)]}
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (as-> state $
+        (assoc-in $ [:dashboard :collection-type] type)
+        (assoc-in $ [:dashboard :collection-id] nil)))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.d/set-collection-type>"))))
+
+(defn set-collection
+  [id]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (println "set-collection" id)
+      (assoc-in state [:dashboard :collection-id] id))
+
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.d.d/set-collection>"))))

frontend/uxbox/data/projects.cljs

@@ -119,36 +119,11 @@
       (-pr-writer [mv writer _]
         (-write writer "#<event:u.s.p/create-project>")))))
 
-(defn initialize-workspace
-  [projectid pageid]
-  (reify
-    rs/UpdateEvent
-    (-apply-update [_ state]
-      (let [s {:project projectid
-               :toolboxes #{}
-               :page pageid}]
-        (assoc state :workspace s)))
-
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/initialize-workspace>"))))
-
-(defn set-dashboard-section
-  [section]
-  (reify
-    rs/UpdateEvent
-    (-apply-update [_ state]
-      (assoc-in state [:dashboard :section] section))
-
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/go-to-project"))))
-
-(defn go-to-project
+(defn go-to
   "A shortcut event that redirects the user to the
   first page of the project."
   ([projectid]
-   (go-to-project projectid nil))
+   (go-to projectid nil))
   ([projectid pageid]
    (reify
      rs/EffectEvent
@@ -162,4 +137,4 @@
                                                   :page-uuid pageid})))))
      IPrintWithWriter
      (-pr-writer [mv writer _]
-       (-write writer "#<event:u.s.p/go-to-project")))))
+       (-write writer "#<event:u.s.p/go-to")))))

frontend/uxbox/data/workspace.cljs

@@ -36,6 +36,18 @@
 
     IPrintWithWriter
     (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/toggle-tool>"))))
+      (-write writer "#<event:u.s.p/toggle-toolbox>"))))
 
+(defn initialize
+  [projectid pageid]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (let [s {:project projectid
+               :toolboxes #{}
+               :page pageid}]
+        (assoc state :workspace s)))
 
+    IPrintWithWriter
+    (-pr-writer [mv writer _]
+      (-write writer "#<event:u.s.p/initialize>"))))

frontend/uxbox/state.cljs

@@ -9,8 +9,11 @@
 (defonce stream
   (rs/init {:user {:fullname "Cirilla"
                    :avatar "http://lorempixel.com/50/50/"}
-            :dashboard {:section :dashboard/projects}
+            :dashboard {}
             :workspace {}
+            :elements-by-id {}
+            :colors-by-id {}
+            :icons-by-id {}
             :projects-by-id {}
             :pages-by-id {}}))
 

frontend/uxbox/ui/dashboard.cljs

@@ -7,6 +7,7 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.util :as util]
+            [uxbox.data.dashboard :as dd]
             [uxbox.ui.library-bar :as ui.library-bar]
             [uxbox.ui.dashboard.header :refer (header)]
             [uxbox.ui.dashboard.projects :as projects]
@@ -28,9 +29,21 @@
      (projects/menu)
      (projects/grid)]]))
 
+(defn projects-page-will-mount
+  [own]
+  (rs/emit! (dd/initialize :dashboard/projects))
+  own)
+
+(defn projects-page-transfer-state
+  [old-state state]
+  (rs/emit! (dd/initialize :dashboard/projects))
+  state)
+
 (def ^:static projects-page
   (util/component
    {:render projects-page-render
+    :will-mount projects-page-will-mount
+    :transfer-state projects-page-transfer-state
     :name "projects-page"
     :mixins [rum/static]}))
 
@@ -50,9 +63,21 @@
       (elements/page-title)
       (elements/grid)]]]))
 
+(defn elements-page-will-mount
+  [own]
+  (rs/emit! (dd/initialize :dashboard/elements))
+  own)
+
+(defn elements-page-transfer-state
+  [old-state state]
+  (rs/emit! (dd/initialize :dashboard/elements))
+  state)
+
 (def ^:static elements-page
   (util/component
    {:render elements-page-render
+    :will-mount elements-page-will-mount
+    :transfer-state elements-page-transfer-state
     :name "elements-page"
     :mixins [mx/static]}))
 
@@ -72,9 +97,21 @@
       (icons/page-title)
       (icons/grid)]]]))
 
+(defn icons-page-will-mount
+  [own]
+  (rs/emit! (dd/initialize :dashboard/icons))
+  own)
+
+(defn icons-page-transfer-state
+  [old-state state]
+  (rs/emit! (dd/initialize :dashboard/icons))
+  state)
+
 (def ^:static icons-page
   (util/component
    {:render icons-page-render
+    :will-mount icons-page-will-mount
+    :transfer-state icons-page-transfer-state
     :name "icons-page"
     :mixins [mx/static]}))
 
@@ -94,8 +131,20 @@
       (colors/page-title)
       (colors/grid)]]]))
 
+(defn colors-page-will-mount
+  [own]
+  (rs/emit! (dd/initialize :dashboard/colors))
+  own)
+
+(defn colors-page-transfer-state
+  [old-state state]
+  (rs/emit! (dd/initialize :dashboard/colors))
+  state)
+
 (def ^:static colors-page
   (util/component
    {:render colors-page-render
+    :will-mount colors-page-will-mount
+    :transfer-state colors-page-transfer-state
     :name "colors"
     :mixins [mx/static]}))

frontend/uxbox/ui/dashboard/builtins.cljs

@@ -0,0 +1,36 @@
+(ns uxbox.ui.dashboard.builtins)
+
+(def ^:static +colors+
+  [{:name "Generic 1"
+    :id 1
+    :colors
+    [{:hex "00f9ff"}
+     {:hex "009fff"}
+     {:hex "0078ff"}
+     {:hex "005eff"}
+     {:hex "0900ff"}
+     {:hex "7502f1"}
+     {:hex "ffe705"}
+     {:hex "00ffab"}
+     {:hex "f52105"}
+     {:hex "7502f1"}
+     {:hex "ffe705"}
+     {:hex "00ffab"}
+     {:hex "f52105"}]}
+   {:name "Generic 2"
+    :id 2
+    :colors
+    [{:hex "00f9ff"}
+     {:hex "009fff"}
+     {:hex "0078ff"}
+     {:hex "005eff"}
+     {:hex "0900ff"}
+     {:hex "7502f1"}
+     {:hex "ffe705"}
+     {:hex "00ffab"}
+     {:hex "f52105"}
+     {:hex "7502f1"}
+     {:hex "ffe705"}
+     {:hex "00ffab"}
+     {:hex "f52105"}]}])
+

frontend/uxbox/ui/dashboard/colors.cljs

@@ -1,13 +1,29 @@
 (ns uxbox.ui.dashboard.colors
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
-             [uxbox.ui.library-bar :as ui.library-bar]
+            [cats.labs.lens :as l]
+            [uxbox.state :as s]
+            [uxbox.rstore :as rs]
+            [uxbox.data.dashboard :as dd]
+            [uxbox.ui.dashboard.builtins :as builtins]
             [uxbox.ui.icons :as i]
             [uxbox.ui.lightbox :as lightbox]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.util :as util]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lenses
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:static dashboard-state
+  (as-> (l/in [:dashboard]) $
+    (l/focus-atom $ s/state)))
+
+(def ^:static colors-state
+  (as-> (l/in [:colors-by-id]) $
+    (l/focus-atom $ s/state)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Menu
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -53,25 +69,39 @@
 
 (defn nav-render
   [own]
-  (html
-   [:div.library-bar
-    [:div.library-bar-inside
-     [:ul.library-tabs
-      [:li.current "STANDARD"]
-      [:li "YOUR LIBRARIES"]]
-     [:ul.library-elements
-      #_[:li
-       [:a.btn-primary {:href "#"} "+ New library"]
-       ]
-      [:li
-       [:span.element-title "Library 1"]
-       [:span.element-subtitle "21 elements"]]]]]))
+  (let [dashboard (rum/react dashboard-state)
+        colors (rum/react colors-state)
+        collid (:collection-id dashboard)
+        own? (= (:collection-type dashboard) :own)
+        builtin? (= (:collection-type dashboard) :builtin)
+        collections (if own?
+                      (sort-by :id (vals colors))
+                      builtins/+colors+)]
+    (html
+     [:div.library-bar
+      [:div.library-bar-inside
+       [:ul.library-tabs
+        [:li (when builtin? {:class-name "current"})
+         "STANDARD"]
+        [:li (when own? {:class-name "current"})
+         "YOUR LIBRARIES"]]
+       [:ul.library-elements
+        ;; (when own?
+        ;;   [:li
+        ;;    [:a.btn-primary {:href "#"} "+ New library"]])
+        (for [props collections]
+          [:li {:key (str (:id props))
+                :on-click #(rs/emit! (dd/set-collection (:id props)))
+                :class-name (when (= (:id props) collid) "current")}
+           [:span.element-title (:name props)]
+           [:span.element-subtitle
+            (str (count (:colors props)) " elements")]])]]])))
 
 (def ^:static nav
   (util/component
    {:render nav-render
     :name "nav"
-    :mixins [mx/static]}))
+    :mixins [rum/reactive]}))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Nav

frontend/uxbox/ui/dashboard/header.cljs

@@ -17,10 +17,9 @@
 
 (defn- header-link
   [section content]
-  (let [link (r/route-for section)
-        on-click #(rs/emit! (dp/set-dashboard-section section))]
+  (let [link (r/route-for section)]
     (html
-     [:a {:href (str "/#" link) :on-click on-click} content])))
+     [:a {:href (str "/#" link)} content])))
 
 (defn header-render
   [own]

frontend/uxbox/ui/dashboard/projects.cljs

@@ -8,6 +8,7 @@
             [uxbox.state :as s]
             [uxbox.time :as time]
             [uxbox.data.projects :as dp]
+            [uxbox.data.workspace :as dw]
             [uxbox.ui.icons :as i]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.dashboard.header :as dsh.header]
@@ -187,7 +188,7 @@
 
 (defn project-item-render
   [own project]
-  (let [on-click #(rs/emit! (dp/go-to-project (:id project)))]
+  (let [on-click #(rs/emit! (dp/go-to (:id project)))]
     (html
      [:div.grid-item.project-th {:on-click on-click
                                  :key (:id project)}

frontend/uxbox/ui/util.cljs

@@ -52,7 +52,6 @@
            (rest)
            (mapv #(js/parseInt % 16))))
 
-
 (defn rgb-to-hex
   [[r g b]]
   (letfn [(to-hex [c]

frontend/uxbox/ui/workspace.cljs

@@ -4,7 +4,7 @@
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.state :as s]
-            [uxbox.data.projects :as dp]
+            [uxbox.data.workspace :as dw]
             [uxbox.ui.util :as util]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.workspace.base :as wb]
@@ -43,17 +43,17 @@
        (when-not (empty? (:toolboxes workspace))
          (aside))]])))
 
-
 (defn workspace-will-mount
   [own]
   (let [[projectid pageid] (:rum/props own)]
-    (rs/emit! (dp/initialize-workspace projectid pageid))
+    (rs/emit! (dw/initialize projectid pageid))
     own))
 
 (defn workspace-transfer-state
   [old-state state]
   (let [[projectid pageid] (:rum/props state)]
-    (rs/emit! (dp/initialize-workspace projectid pageid))))
+   (rs/emit! (dw/initialize projectid pageid))
+   state))
 
 (def ^:static workspace
   (util/component

frontend/uxbox/ui/workspace/pagesmngr.cljs

@@ -4,6 +4,7 @@
             [cuerdas.core :as str]
             [uxbox.rstore :as rs]
             [uxbox.data.projects :as dp]
+            [uxbox.data.workspace :as dw]
             [uxbox.ui.icons :as i]
             [uxbox.ui.keyboard :as k]
             [uxbox.ui.mixins :as mx]
@@ -20,7 +21,7 @@
     (let [curpage (rum/react wb/page-state)
           active? (= (:id curpage) (:id page))
           deletable? (> numpages 1)
-          navigate #(rs/emit! (dp/go-to-project (:project page) (:id page)))
+          navigate #(rs/emit! (dp/go-to (:project page) (:id page)))
           delete #(rs/emit! (dp/delete-page (:id page)))]
       (html
        [:li.single-page

resources/public/styles/partials/library-bar.scss

@@ -68,7 +68,7 @@
         }
 
         &:hover,
-        .current {
+        &.current {
           background-color: $color-primary;
 
           .element-title,