diff --git a/frontend/uxbox/data/dashboard.cljs b/frontend/uxbox/data/dashboard.cljs new file mode 100644 index 000000000..157788bb3 --- /dev/null +++ b/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 "#")))) + +(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 "#")))) + +(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 "#")))) diff --git a/frontend/uxbox/data/projects.cljs b/frontend/uxbox/data/projects.cljs index 9c5f4144c..eb69e349f 100644 --- a/frontend/uxbox/data/projects.cljs +++ b/frontend/uxbox/data/projects.cljs @@ -119,36 +119,11 @@ (-pr-writer [mv writer _] (-write writer "#"))))) -(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 "#")))) - -(defn set-dashboard-section - [section] - (reify - rs/UpdateEvent - (-apply-update [_ state] - (assoc-in state [:dashboard :section] section)) - - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) + (-write writer "#")))) +(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 "#")))) diff --git a/frontend/uxbox/state.cljs b/frontend/uxbox/state.cljs index 8b347fb43..c3cd6c4fb 100644 --- a/frontend/uxbox/state.cljs +++ b/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 {}})) diff --git a/frontend/uxbox/ui/dashboard.cljs b/frontend/uxbox/ui/dashboard.cljs index 36baba8af..3e18c6097 100644 --- a/frontend/uxbox/ui/dashboard.cljs +++ b/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]})) diff --git a/frontend/uxbox/ui/dashboard/builtins.cljs b/frontend/uxbox/ui/dashboard/builtins.cljs new file mode 100644 index 000000000..cc52498cd --- /dev/null +++ b/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"}]}]) + diff --git a/frontend/uxbox/ui/dashboard/colors.cljs b/frontend/uxbox/ui/dashboard/colors.cljs index 731fc872c..da823814d 100644 --- a/frontend/uxbox/ui/dashboard/colors.cljs +++ b/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 diff --git a/frontend/uxbox/ui/dashboard/header.cljs b/frontend/uxbox/ui/dashboard/header.cljs index 16246d87c..cea61edb7 100644 --- a/frontend/uxbox/ui/dashboard/header.cljs +++ b/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] diff --git a/frontend/uxbox/ui/dashboard/projects.cljs b/frontend/uxbox/ui/dashboard/projects.cljs index d87854d2a..1e40f7c31 100644 --- a/frontend/uxbox/ui/dashboard/projects.cljs +++ b/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)} diff --git a/frontend/uxbox/ui/util.cljs b/frontend/uxbox/ui/util.cljs index 9bc6a4293..bbecb331e 100644 --- a/frontend/uxbox/ui/util.cljs +++ b/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] diff --git a/frontend/uxbox/ui/workspace.cljs b/frontend/uxbox/ui/workspace.cljs index a5f04fa80..e2c66b110 100644 --- a/frontend/uxbox/ui/workspace.cljs +++ b/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 diff --git a/frontend/uxbox/ui/workspace/pagesmngr.cljs b/frontend/uxbox/ui/workspace/pagesmngr.cljs index ef1c41cdb..20fba080d 100644 --- a/frontend/uxbox/ui/workspace/pagesmngr.cljs +++ b/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 diff --git a/resources/public/styles/partials/library-bar.scss b/resources/public/styles/partials/library-bar.scss index a50f02562..ac19faa02 100644 --- a/resources/public/styles/partials/library-bar.scss +++ b/resources/public/styles/partials/library-bar.scss @@ -68,7 +68,7 @@ } &:hover, - .current { + &.current { background-color: $color-primary; .element-title,