diff --git a/src/uxbox/router.cljs b/src/uxbox/router.cljs index 4774af3cb..ec1904165 100644 --- a/src/uxbox/router.cljs +++ b/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]]]]]) diff --git a/src/uxbox/rstore.cljs b/src/uxbox/rstore.cljs index 076b13c62..3c1f7b8cd 100644 --- a/src/uxbox/rstore.cljs +++ b/src/uxbox/rstore.cljs @@ -61,8 +61,7 @@ (defonce stream (rx/map identity bus)) (defn emit! - "Emits an event or a collection of them. - The order of events does not matters." + "Emits an event or a collection of them." ([event] (rx/push! bus event)) ([event & events] diff --git a/src/uxbox/ui.cljs b/src/uxbox/ui.cljs index c0e67633a..b889c8526 100644 --- a/src/uxbox/ui.cljs +++ b/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) diff --git a/src/uxbox/ui/dashboard.cljs b/src/uxbox/ui/dashboard.cljs index 1a86b348b..f84d511c6 100644 --- a/src/uxbox/ui/dashboard.cljs +++ b/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) diff --git a/src/uxbox/ui/dashboard/header.cljs b/src/uxbox/ui/dashboard/header.cljs index a150926ae..c26ad0a94 100644 --- a/src/uxbox/ui/dashboard/header.cljs +++ b/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" diff --git a/src/uxbox/ui/dashboard/images.cljs b/src/uxbox/ui/dashboard/images.cljs new file mode 100644 index 000000000..6e8c39bd0 --- /dev/null +++ b/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 +;; Copyright (c) 2015-2016 Juan de la Cruz + +(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))