Add images section to dashboard.

src/uxbox/router.cljs

@@ -75,6 +75,7 @@
         ["dashboard/" [["projects" :dashboard/projects]
                        ["elements" :dashboard/elements]
                        ["icons" :dashboard/icons]
+                       ["images" :dashboard/images]
                        ["colors" :dashboard/colors]]]
         ["workspace/" [[page-route :workspace/page]]]]])
 

src/uxbox/rstore.cljs

@@ -61,8 +61,7 @@
 (defonce stream (rx/map identity bus))
 
 (defn emit!
-  "Emits an event or a collection of them.
+  "Emits an event or a collection of them."
-  The order of events does not matters."
   ([event]
    (rx/push! bus event))
   ([event & events]

src/uxbox/ui.cljs

@@ -45,6 +45,7 @@
         :dashboard/projects (ui-dashboard/projects-page)
         :dashboard/elements (ui-dashboard/elements-page)
         :dashboard/icons (ui-dashboard/icons-page)
+        :dashboard/images (ui-dashboard/images-page)
         :dashboard/colors (ui-dashboard/colors-page)
         :settings/profile (ui-settings/profile-page)
         :settings/password (ui-settings/password-page)

src/uxbox/ui/dashboard.cljs

@@ -2,9 +2,11 @@
   (:require [uxbox.ui.dashboard.projects :as projects]
             [uxbox.ui.dashboard.elements :as elements]
             [uxbox.ui.dashboard.icons :as icons]
+            [uxbox.ui.dashboard.images :as images]
             [uxbox.ui.dashboard.colors :as colors]))
 
 (def projects-page projects/projects-page)
 (def elements-page elements/elements-page)
 (def icons-page icons/icons-page)
+(def images-page images/images-page)
 (def colors-page colors/colors-page)

src/uxbox/ui/dashboard/header.cljs

@@ -35,6 +35,7 @@
         projects? (= (:section local) :dashboard/projects)
         elements? (= (:section local) :dashboard/elements)
         icons? (= (:section local) :dashboard/icons)
+        images? (= (:section local) :dashboard/images)
         colors? (= (:section local) :dashboard/colors)]
     (html
      [:header#main-bar.main-bar
@@ -47,11 +48,13 @@
         (header-link :dashboard/elements (tr "ds.elements"))]
        [:li {:class (when icons? "current")}
         (header-link :dashboard/icons (tr "ds.icons"))]
+       [:li {:class (when images? "current")}
+        (header-link :dashboard/images (tr "ds.images"))]
        [:li {:class (when colors? "current")}
         (header-link :dashboard/colors (tr "ds.colors"))]]
       (ui.u/user)])))
 
-(def ^:static header
+(def header
   (mx/component
    {:render header-render
     :name "header"

src/uxbox/ui/dashboard/images.cljs

@@ -0,0 +1,189 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.ui.dashboard.images
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.rstore :as rs]
+            [uxbox.data.dashboard :as dd]
+            [uxbox.data.lightbox :as udl]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.lightbox :as lbx]
+            [uxbox.ui.library-bar :as ui.library-bar]
+            [uxbox.ui.dashboard.header :refer (header)]
+            [uxbox.util.dom :as dom]))
+
+;; --- Page Title
+
+(defn page-title-render
+  []
+  (html
+   [:div.dashboard-title
+    [:h2 "Element library name"]
+    [:div.edition
+     [:span i/pencil]
+     [:span i/trash]]]))
+
+(def ^:const ^:private page-title
+  (mx/component
+   {:render page-title-render
+    :name "page-title"
+    :mixins [mx/static]}))
+
+;; --- Grid
+
+(defn grid-render
+  [own]
+  (html
+   [:div.dashboard-grid-content
+    [:div.grid-item.add-project
+     {on-click #(udl/open! :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 ^:const ^:private grid
+  (mx/component
+   {:render grid-render
+    :name "grid"
+    :mixins [mx/static]}))
+
+;; --- Images Page
+
+(defn images-page-render
+  [own]
+  (html
+   [:main.dashboard-main
+    (header)
+    [:section.dashboard-content
+     (ui.library-bar/library-bar)
+     [:section.dashboard-grid.library
+      (page-title)
+      (grid)]]]))
+
+(defn images-page-will-mount
+  [own]
+  (rs/emit! (dd/initialize :dashboard/images))
+  own)
+
+(defn images-page-transfer-state
+  [old-state state]
+  (rs/emit! (dd/initialize :dashboard/images))
+  state)
+
+(def images-page
+  (mx/component
+   {:render images-page-render
+    :will-mount images-page-will-mount
+    :transfer-state images-page-transfer-state
+    :name "images-page"
+    :mixins [mx/static]}))
+
+;; --- New Element Lightbox (TODO)
+
+(defn- new-image-lightbox-render
+  [own]
+  (html
+   [:div.lightbox-body
+    [:h3 "New image"]
+    [: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 %)
+                              (udl/close!))}
+     i/close]]))
+
+(def ^:private new-image-lightbox
+  (mx/component
+   {:render new-image-lightbox-render
+    :name "new-image-lightbox"}))
+
+(defmethod lbx/render-lightbox :new-image
+  [_]
+  (new-image-lightbox))