WIP: restructure dashboard source.

frontend/uxbox/ui/dashboard/elements.cljs

@@ -0,0 +1,510 @@
+(ns uxbox.ui.dashboard.elements
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.ui.dashboard.header :as dsh.header]
+            [uxbox.ui.library-bar :as ui.library-bar]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.lightbox :as lightbox]
+            [uxbox.ui.dom :as dom]
+            [uxbox.util :as util]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Elements
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn elements-render
+  [own]
+  (html
+   [:main.dashboard-main
+    (dsh.header/header)
+    [:section.dashboard-content
+      [:section#dashboard-bar.dashboard-bar.library-gap
+        [:div.dashboard-info
+          [:span.dashboard-projects "20 elements"]
+          [:span "Sort by"]
+            #_(project-sort-selector (atom :name))]
+          [:div.dashboard-search
+            i/search]]
+      (ui.library-bar/library-bar)
+      [:section.dashboard-grid.library
+        [:div.dashboard-title
+          [:h2 "Element library name"]
+          [:div.edition
+            [:span i/pencil]
+            [:span i/trash]
+          ]
+        ]
+        [:div.dashboard-grid-content
+          [:div.grid-item.add-project
+            {on-click #(lightbox/set! :new-element)}
+            [:span "+ New element"]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+          [:div.grid-item.project-th
+            [:span.grid-item-image i/image]
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+        ]
+      ]
+    ]
+   ]))
+
+(def elements
+  (util/component
+   {:render elements-render
+    :name "elements"
+    :mixins [rum/static]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Icons
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(defn icons-render
+  [own]
+  (html
+   [:main.dashboard-main
+    (dsh.header/header)
+    [:section.dashboard-content
+      [:section#dashboard-bar.dashboard-bar.library-gap
+        [:div.dashboard-info
+          [:span.dashboard-projects "20 icons"]
+          [:span "Sort by"]
+            #_(project-sort-selector (atom :name))]
+          [:div.dashboard-search
+            i/search]]
+      (ui.library-bar/library-bar)
+      [:section.dashboard-grid.library
+        [:div.dashboard-title
+          [:h2 "Icon library name"]
+          [:div.edition
+            [:span i/pencil]
+            [:span i/trash]
+          ]
+        ]
+        [:div.dashboard-grid-content
+          [:div.grid-item.small-item.add-project
+            {on-click #(lightbox/set! :new-icon)}
+            [:span "+ New icon"]]
+          [:div.grid-item.small-item.project-th
+            [:span.grid-item-image i/logo-icon]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/pencil]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/trash]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/search]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/image]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/toggle]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/chat]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/close]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/page]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/folder]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/infocard]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/fill]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/stroke]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/action]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/undo]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/redo]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/export]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/exit]
+            [:h3 "Custom icon"]
+            [: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.grid-item-image i/user]
+            [:h3 "Custom icon"]
+            [:div.project-th-actions
+              [:div.project-th-icon.edit i/pencil]
+              [:div.project-th-icon.delete i/trash]]]
+        ]
+      ]
+    ]
+   ]))
+
+(def icons
+  (util/component
+   {:render icons-render
+    :name "icons"
+    :mixins [rum/static]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Colors
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn colors-render
+  [own]
+  (html
+   [:main.dashboard-main
+    (dsh.header/header)
+    [:section.dashboard-content
+      [:section#dashboard-bar.dashboard-bar.library-gap
+        [:div.dashboard-info
+          [:span.dashboard-projects "20 colors"]
+          [:span "Sort by"]
+            #_(project-sort-selector (atom :name))]
+          [:div.dashboard-search
+            i/search]]
+      (ui.library-bar/library-bar)
+      [:section.dashboard-grid.library
+        [:div.dashboard-title
+          [:h2 "Colors library name"]
+          [:div.edition
+            [:span i/pencil]
+            [:span i/trash]
+          ]
+        ]
+        [: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]]]
+        ]
+      ]
+    ]
+   ]))
+
+(def colors
+  (util/component
+   {:render colors-render
+    :name "colors"
+    :mixins [rum/static]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lightbox
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; ADD ELEMENT LIGHTBOX
+
+(defn- new-element-lightbox-render
+  [own]
+
+   (html
+    [:div.lightbox-body
+      [:h3 "New element"]
+        [:div.row-flex
+          [:div.lightbox-big-btn
+            [:span.big-svg i/shapes]
+            [:span.text "Go to workspace"]
+          ]
+          [:div.lightbox-big-btn
+            [:span.big-svg.upload i/exit]
+            [:span.text "Upload file"]
+          ]
+        ]
+      [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (lightbox/close!))}
+                               i/close]]))
+
+(def new-element-lightbox
+  (util/component
+   {:render new-element-lightbox-render
+    :name "new-element-lightbox"}))
+
+(defmethod lightbox/render-lightbox :new-element
+  [_]
+  (new-element-lightbox))
+
+;; ADD ICON LIGHTBOX
+
+(defn- new-icon-lightbox-render
+  [own]
+
+   (html
+    [:div.lightbox-body
+      [:h3 "New icon"]
+        [:div.row-flex
+          [:div.lightbox-big-btn
+            [:span.big-svg i/shapes]
+            [:span.text "Go to workspace"]
+          ]
+          [:div.lightbox-big-btn
+            [:span.big-svg.upload i/exit]
+            [:span.text "Upload file"]
+          ]
+        ]
+      [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (lightbox/close!))}
+                               i/close]]))
+
+(def new-icon-lightbox
+  (util/component
+   {:render new-icon-lightbox-render
+    :name "new-icon-lightbox"}))
+
+;; ADD COLOR LIGHTBOX
+
+(defmethod lightbox/render-lightbox :new-icon
+  [_]
+  (new-icon-lightbox))(defn- new-color-lightbox-render
+  [own]
+   (html
+    [:div.lightbox-body
+      [:h3 "New color"]
+      [:form
+        [:div.row-flex
+          [:input#color-hex.input-text
+            {:placeholder "#"
+            :type "text"}]
+          [:input#color-rgb.input-text
+            {:placeholder "RGB"
+            :type "text"}]]
+        [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
+      [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (lightbox/close!))}
+      i/close]]))
+
+(def new-color-lightbox
+  (util/component
+   {:render new-color-lightbox-render
+    :name "new-color-lightbox"}))
+
+(defmethod lightbox/render-lightbox :new-color
+  [_]
+  (new-color-lightbox))

frontend/uxbox/ui/dashboard/header.cljs

@@ -0,0 +1,37 @@
+(ns uxbox.ui.dashboard.header
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.util :as util]
+            [uxbox.router :as r]
+            [uxbox.ui.navigation :as nav]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.users :as ui.u]))
+
+(defn header-render
+  [own]
+  (let [local (:rum/local own)
+        projects? (= (:section local) :projects)
+        elements? (= (:section local) :elements)
+        icons? (= (:section local) :icons)
+        colors? (= (:section local) :colores)]
+    (html
+     [:header#main-bar.main-bar
+      [:div.main-logo
+       (nav/link "/" i/logo)]
+      [:ul.main-nav
+       [:li {:class (when projects? "current")}
+        (nav/link (r/route-for :dashboard/projects) "PROJECTS")]
+       [:li {:class (when elements? "current")}
+        (nav/link (r/route-for :dashboard/elements) "ELEMENTS")]
+       [:li {:class (when icons? "current")}
+        (nav/link (r/route-for :dashboard/icons) "ICONS")]
+       [:li {:class (when colors? "current")}
+        (nav/link (r/route-for :dashboard/colors) "COLORS")]]
+      (ui.u/user)])))
+
+(def ^:static header
+  (util/component
+   {:render header-render
+    :name "header"
+    :mixins [rum/static
+             (rum/local {:section :projects})]}))

frontend/uxbox/ui/dashboard/projects.cljs

@@ -0,0 +1,271 @@
+(ns uxbox.ui.dashboard.projects
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [cats.labs.lens :as l]
+            [cuerdas.core :as str]
+            [uxbox.util :as util]
+            [uxbox.router :as r]
+            [uxbox.rstore :as rs]
+            [uxbox.state :as s]
+            [uxbox.data.projects :as dp]
+            [uxbox.ui.icons.dashboard :as icons]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.dom :as dom]
+            [uxbox.ui.dashboard.header :as dsh.header]
+            [uxbox.ui.lightbox :as lightbox]
+            [uxbox.time :refer [ago]]))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Helpers & Constants
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; FIXME rename
+(def +ordering-options+ {:name "name"
+                         :last-updated "date updated"
+                         :created "date created"})
+
+(def +layouts+ {:mobile {:name "Mobile"
+                         :id "mobile"
+                         :width 320
+                         :height 480}
+                :tablet {:name "Tablet"
+                         :id "tablet"
+                         :width 1024
+                         :height 768}
+                :notebook {:name "Notebook"
+                           :id "notebook"
+                           :width 1366
+                           :height 768}
+                :desktop {:name "Desktop"
+                          :id "desktop"
+                          :width 1920
+                          :height 1080}})
+
+(def ^:static ^:private
+  +project-defaults+ {:name ""
+                      :width 1920
+                      :height 1080
+                      :layout :desktop})
+
+;; (def name->order (into {} (for [[k v] project-orderings] [v k])))
+
+;; Views
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lightbox
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn layout-input
+  [local layout-id]
+  (let [layout (get-in +layouts+ [layout-id])
+        id (:id layout)
+        name (:name layout)
+        width (:width layout)
+        height (:height layout)]
+    (html
+     [:div
+      [:input
+       {:type "radio"
+        :key id
+        :id id
+        :name "project-layout"
+        :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
+    (layout-input local :mobile)
+    (layout-input local :tablet)
+    (layout-input local :notebook)
+    (layout-input local :desktop)]))
+
+(defn- new-project-lightbox-render
+  [own]
+  (let [local (:rum/local own)
+        name (:name @local)
+        width (:width @local)
+        height (:height @local)]
+   (html
+    [:div.lightbox-body
+     [:h3 "New project"]
+     [:form {:on-submit (constantly nil)}
+      [:input#project-name.input-text
+        {:placeholder "New project name"
+         :type "text"
+         :value name
+         :auto-focus true
+         :on-change #(swap! local assoc :name (.-value (.-target %)))}]
+      [:div.project-size
+       [:input#project-witdh.input-text
+        {:placeholder "Width"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value width
+         :on-change #(swap! local assoc :width (.-value (.-target %)))}]
+       [:a.toggle-layout
+        {:href "#"
+         :on-click #(swap! local assoc :width width :height height)}
+        i/toggle]
+       [:input#project-height.input-text
+        {:placeholder "Height"
+         :type "number"
+         :min 0 ;;TODO check this value
+         :max 666666 ;;TODO check this value
+         :value height
+         :on-change #(swap! local assoc :height (.-value (.-target %)))}]]
+      ;; Layout selector
+      (layout-selector local)
+      ;; Submit
+      (when-not (empty? (str/trim name))
+        [:input#project-btn.btn-primary
+         {:value "Go go go!"
+          :on-click #(do
+                       (dom/prevent-default %)
+                       (rs/emit! (dp/create-project @local))
+                       (lightbox/close!))
+
+          :type "submit"}])]
+     [:a.close {:href "#"
+                :on-click #(do (dom/prevent-default %)
+                               (lightbox/close!))}
+      i/close]])))
+
+(def new-project-lightbox
+  (util/component
+   {:render new-project-lightbox-render
+    :name "new-project-lightbox"
+    :mixins [(rum/local +project-defaults+)]}))
+
+(defmethod lightbox/render-lightbox :new-project
+  [_]
+  (new-project-lightbox))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Menu
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:static menu-state
+  (as-> (l/select-keys [:projects]) $
+    (l/focus-atom $ s/state)))
+
+(rum/defc project-sort-selector < rum/reactive
+  [sort-order]
+  nil)
+  ;; (let [sort-name (get project-orderings (rum/react sort-order))]
+  ;;   [:select.input-select
+  ;;    {:on-change #(reset! sort-order (name->order (.-value (.-target %))))
+  ;;     :value sort-name}
+  ;;    (for [order (keys project-orderings)
+  ;;          :let [name (get project-orderings order)]]
+  ;;      [:option {:key name} name])]))
+
+(defn menu-render
+  []
+  (let [state (rum/react menu-state)
+        pcount (count (:projects state))]
+    (html
+     [:section#dashboard-bar.dashboard-bar
+      [:div.dashboard-info
+       [:span.dashboard-projects pcount " projects"]
+       [:span "Sort by"]
+       #_(project-sort-selector (atom :name))]
+      [:div.dashboard-search
+       icons/search]])))
+
+(def menu
+  (util/component
+   {:render menu-render
+    :name "dashboard-menu"
+    :mixins [rum/reactive]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Project Item
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn project-render
+  [own project]
+  (let [on-click #(rs/emit! (dp/go-to-project (:id project)))]
+    (html
+     [:div.grid-item.project-th {:on-click on-click
+                                 :key (:id project)}
+      [:h3 (:name project)]
+      [:span.project-th-update
+       (str "Updated " (ago (:last-update project)))]
+      [:div.project-th-actions
+       [:div.project-th-icon.pages
+        icons/page
+        [:span 0]]
+       [:div.project-th-icon.comments
+        i/chat
+        [:span 0]]
+       [:div.project-th-icon.delete
+        {:on-click #(do
+                      (dom/stop-propagation %)
+                      ;; (actions/delete-project conn uuid)
+                      %)}
+        icons/trash]]])))
+
+(def project-item
+  (util/component
+   {:render project-render
+    :name "project"
+    :mixins [rum/static]}))
+
+;; (defn sorted-projects
+;;   [projects sort-order]
+;;   (let [project-cards (map (partial project-card conn) (sort-by sort-order projects))]
+;;     (if (= sort-order :project/name)
+;;       project-cards
+;;       (reverse project-cards))))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Grid
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:static grid-state
+  (as-> (l/select-keys [:projects-by-id]) $
+    (l/focus-atom $ s/state)))
+
+(defn grid-render
+  [own]
+  (letfn [(on-click [e]
+            (dom/prevent-default e)
+            (lightbox/set! :new-project))]
+    (let [state (rum/react grid-state)]
+      (html
+       [:section.dashboard-grid
+        [:h2 "Your projects"]
+         [:div.dashboard-grid-content
+          [:div.grid-item.add-project {:on-click on-click}
+           [:span "+ New project"]]
+          (for [item (vals (:projects-by-id state))]
+            (rum/with-key (project-item item) (:id item)))]]))))
+
+(def grid
+  (util/component
+   {:render grid-render
+    :name "grid"
+    :mixins [rum/reactive]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Main
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn projects-render
+  [own]
+  (html
+   [:main.dashboard-main
+    (dsh.header/header)
+    [:section.dashboard-content
+     (menu)
+     (grid)]]))
+
+(def projects
+  (util/component {:render projects-render
+                   :mixins [rum/static]
+                   :name "projects"}))