WIP

frontend/uxbox/ui.cljs

@@ -1,8 +1,10 @@
 (ns uxbox.ui
-  (:require [rum.core :as rum]
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
             [cats.labs.lens :as l]
             [uxbox.state :as s]
             [uxbox.util :as util]
+            [uxbox.ui.lightbox :as ui.lb]
             [uxbox.ui.users :as ui.u]
             [uxbox.ui.dashboard :as ui.d]))
 
@@ -15,7 +17,7 @@
   (let [{:keys [location location-params] :as state} (rum/react state)]
     (html
      [:section
-      (lb/lightb
+      (ui.lb/lightbox)
       (case location
         :auth/login (ui.u/login)
         ;; :auth/register (u/register)
@@ -24,7 +26,7 @@
         ;; :main/project (w/workspace conn location-params)
         ;; :main/page (w/workspace conn location-params))))
         nil
-        )))
+        )])))
 
 (def app
   (util/component {:render app-render

frontend/uxbox/ui/dashboard.cljs

@@ -1,7 +1,7 @@
 (ns uxbox.ui.dashboard
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
-            [cuerdas.core :refer [trim]]
+            [cuerdas.core :as str]
             [uxbox.util :as util]
             [uxbox.router :as r]
             [uxbox.ui.icons :as i]
@@ -51,35 +51,34 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn layout-input
-  [layout local]
-  (let [human-name (get-in project-layouts [layout :name])
-        id (str "project-" (get-in project-layouts [layout :id]))
-        tag (str "input#" id)
-        tag (keyword tag)]
-    [[tag
+  [local layout-id]
+  (let [layout (get-in project-layouts [layout-id])
+        id (:id layout)
+        name (:name layout)
+        width (:width layout)
+        height (:height layout)]
+    (html
+     [:input
       {:type "radio"
        :key id
+       :id id
        :name "project-layout"
-       :value human-name
-       :checked (= layout (:layout @local))
-       :on-change #(swap! local merge {:layout layout
-                                       :width (get-in project-layouts [layout :width])
-                                       :height (get-in project-layouts [layout :height])})}]
-     [:label
-      {:value name
-       :for id}
-      human-name]]))
+       :value name
+       :checked (= layout-id (:layout @local))
+       :on-change #(swap! local merge {:layout layout-id :width width :height height})}]
+     [:label {:value (:name @local) :for id} name])))
 
 (defn- layout-selector
   [local]
   (html
    [:div.input-radio.radio-primary
     (vec (cons :div.input-radio.radio-primary
-               (mapcat #(layout-input % local) (keys project-layouts))))]))
+               (mapcat #(layout-input local %) (keys project-layouts))))]))
 
 (defn- new-project-lightbox-render
   [own]
   (let [local (:rum/local own)
+        name (:name @local)
         width (:width @local)
         height (:height @local)]
    (html
@@ -114,7 +113,7 @@
       ;; Layout selector
       (layout-selector local)
       ;; Submit
-      (when-not (empty? (trim name))
+      (when-not (empty? (str/trim name))
         [:input#project-btn.btn-primary
          {:value "Go go go!"
           :type "submit"}])]

frontend/uxbox/ui/lightbox.cljs

@@ -1,5 +1,6 @@
 (ns uxbox.ui.lightbox
-  (:require [rum.core :as rum]
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
             [uxbox.util :as util]
             [uxbox.ui.keyboard :as k]
             [goog.events :as events])
@@ -49,10 +50,11 @@
 (defn- lightbox-render
   [own]
   (let [name (rum/react +current+)]
-    [:div.lightbox {:class (when (nil? name) "hide")}
-     (render-lightbox name)]))
+    (html
+     [:div.lightbox {:class (when (nil? name) "hide")}
+      (render-lightbox name)])))
 
-(def lightbox
+(def ^:static lightbox
   (util/component
    {:name "lightbox"
     :render lightbox-render