3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-18 10:46:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Dashboard ui code reorganization.

Browse source
This commit is contained in:
Andrey Antukh 2016-04-04 18:18:52 +03:00
parent 0a736994db
commit 6ba28830f3
6 changed files with 262 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

3
resources/styles/partials/dashboard-grid.scss
View file

@ -158,7 +158,8 @@
display: flex; display: flex;
margin-right: $small; margin-right: $small;
&.delete { &.delete,
&.edit {
margin-left: auto; margin-left: auto;
margin-right: 0; margin-right: 0;

144
src/uxbox/ui/dashboard.cljs
View file

@ -1,144 +1,10 @@
(ns uxbox.ui.dashboard (ns uxbox.ui.dashboard
(:require [sablono.core :as html :refer-macros [html]] (:require [uxbox.ui.dashboard.projects :as projects]
[rum.core :as rum]
[cuerdas.core :as str]
[uxbox.rstore :as rs]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.util.dom :as dom]
[uxbox.data.dashboard :as dd]
[uxbox.data.projects :as dp]
[uxbox.ui.messages :as uum]
[uxbox.ui.library-bar :as ui.library-bar]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.ui.dashboard.projects :as projects]
[uxbox.ui.dashboard.elements :as elements] [uxbox.ui.dashboard.elements :as elements]
[uxbox.ui.dashboard.icons :as icons] [uxbox.ui.dashboard.icons :as icons]
[uxbox.ui.dashboard.colors :as colors])) [uxbox.ui.dashboard.colors :as colors]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (def projects-page projects/projects-page)
;; Page: projects (def elements-page elements/elements-page)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (def icons-page icons/icons-page)
(def colors-page colors/colors-page)
(defn projects-page-render
[own]
(html
[:main.dashboard-main
(uum/messages)
(header)
[:section.dashboard-content
(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
(mx/component
{:render projects-page-render
:will-mount projects-page-will-mount
:transfer-state projects-page-transfer-state
:name "projects-page"
:mixins [rum/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Page: elements
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn elements-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(ui.library-bar/library-bar)
[:section.dashboard-grid.library
(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
(mx/component
{:render elements-page-render
:will-mount elements-page-will-mount
:transfer-state elements-page-transfer-state
:name "elements-page"
:mixins [mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Page: icons
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn icons-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(icons/nav)
(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
(mx/component
{:render icons-page-render
:will-mount icons-page-will-mount
:transfer-state icons-page-transfer-state
:name "icons-page"
:mixins [mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Page: colors
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn colors-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(colors/nav)
(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
(mx/component
{:render colors-page-render
:will-mount colors-page-will-mount
:transfer-state colors-page-transfer-state
:name "colors"
:mixins [mx/static]}))

72
src/uxbox/ui/dashboard/colors.cljs
View file

@ -16,25 +16,24 @@
[uxbox.schema :as sc] [uxbox.schema :as sc]
[uxbox.library :as library] [uxbox.library :as library]
[uxbox.data.dashboard :as dd] [uxbox.data.dashboard :as dd]
[uxbox.util.lens :as ul]
[uxbox.util.color :refer (hex->rgb)]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.form :as form] [uxbox.ui.form :as form]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.colorpicker :refer (colorpicker)] [uxbox.ui.colorpicker :refer (colorpicker)]
[uxbox.ui.mixins :as mx]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.ui.mixins :as mx])) [uxbox.util.lens :as ul]
[uxbox.util.color :refer (hex->rgb)]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Lenses
;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static ^:private dashboard-l (def ^:const ^:private dashboard-l
(-> (l/in [:dashboard]) (-> (l/key :dashboard)
(l/focus-atom st/state))) (l/focus-atom st/state)))
(def ^:static ^:private collections-by-id-l (def ^:const ^:private collections-by-id-l
(-> (comp (l/in [:colors-by-id]) (-> (comp (l/key :colors-by-id)
(ul/merge library/+color-collections-by-id+)) (ul/merge library/+color-collections-by-id+))
(l/focus-atom st/state))) (l/focus-atom st/state)))
@ -43,9 +42,7 @@
(-> (l/key collid) (-> (l/key collid)
(l/focus-atom collections-by-id-l))) (l/focus-atom collections-by-id-l)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Page Title
;; Page Title
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn page-title-render (defn page-title-render
[own coll] [own coll]
@ -69,15 +66,13 @@
#_[:span i/pencil] #_[:span i/pencil]
[:span {:on-click on-delete} i/trash]])])))) [:span {:on-click on-delete} i/trash]])]))))
(def ^:static page-title (def ^:const ^:private page-title
(mx/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Nav
;; Nav
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn nav-render (defn nav-render
[own] [own]
@ -115,15 +110,13 @@
[:span.element-subtitle [:span.element-subtitle
(tr "ds.num-elements" (t/c num))]])]]]))) (tr "ds.num-elements" (t/c num))]])]]])))
(def ^:static nav (def ^:const ^:private nav
(mx/component (mx/component
{:render nav-render {:render nav-render
:name "nav" :name "nav"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Grid
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn grid-render (defn grid-render
[own] [own]
@ -157,17 +150,44 @@
{:on-click #(remove-cb color)} {:on-click #(remove-cb color)}
i/trash]])])]])))) i/trash]])])]]))))
(def grid (def ^:const ^:private grid
(mx/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Colors Page
;; Lightbox
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static +color-form-schema+ (defn colors-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(nav)
(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 colors-page
(mx/component
{:render colors-page-render
:will-mount colors-page-will-mount
:transfer-state colors-page-transfer-state
:name "colors"
:mixins [mx/static]}))
;; --- Colors Create / Edit Lightbox
(def ^:const ^:private +color-form-schema+
{:hex [sc/required sc/color]}) {:hex [sc/required sc/color]})
(defn- color-lightbox-render (defn- color-lightbox-render

58
src/uxbox/ui/dashboard/elements.cljs
View file

@ -8,15 +8,16 @@
(ns uxbox.ui.dashboard.elements (ns uxbox.ui.dashboard.elements
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
;; [uxbox.ui.library-bar :as ui.library-bar] [uxbox.rstore :as rs]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.util.dom :as dom] [uxbox.ui.library-bar :as ui.library-bar]
[uxbox.ui.mixins :as mx])) [uxbox.data.dashboard :as dd]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Page Title
;; Page Title
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn page-title-render (defn page-title-render
[] []
@ -27,15 +28,13 @@
[:span i/pencil] [:span i/pencil]
[:span i/trash]]])) [:span i/trash]]]))
(def ^:static page-title (def ^:const ^:private page-title
(mx/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static]})) :mixins [mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Grid
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn grid-render (defn grid-render
[own] [own]
@ -123,15 +122,44 @@
[:div.project-th-icon.edit i/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]])) [:div.project-th-icon.delete i/trash]]]]))
(def ^:static grid (def ^:const ^:private grid
(mx/component (mx/component
{:render grid-render {:render grid-render
:name "grid" :name "grid"
:mixins [mx/static]})) :mixins [mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Elements Page
;; Lightbox
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn elements-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(ui.library-bar/library-bar)
[:section.dashboard-grid.library
(page-title)
(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 elements-page
(mx/component
{:render elements-page-render
:will-mount elements-page-will-mount
:transfer-state elements-page-transfer-state
:name "elements-page"
:mixins [mx/static]}))
;; --- New Element Lightbox (TODO)
(defn- new-element-lightbox-render (defn- new-element-lightbox-render
[own] [own]
@ -150,7 +178,7 @@
(lightbox/close!))} (lightbox/close!))}
i/close]])) i/close]]))
(def new-element-lightbox (def ^:const ^:private new-element-lightbox
(mx/component (mx/component
{:render new-element-lightbox-render {:render new-element-lightbox-render
:name "new-element-lightbox"})) :name "new-element-lightbox"}))

66
src/uxbox/ui/dashboard/icons.cljs
View file

@ -8,34 +8,29 @@
(ns uxbox.ui.dashboard.icons (ns uxbox.ui.dashboard.icons
(:require [sablono.core :refer-macros [html]] (:require [sablono.core :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[cuerdas.core :as str]
[lentes.core :as l] [lentes.core :as l]
[uxbox.state :as st] [uxbox.state :as st]
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.schema :as sc] [uxbox.schema :as sc]
[uxbox.library :as library] [uxbox.library :as library]
[uxbox.data.dashboard :as dd] [uxbox.data.dashboard :as dd]
[uxbox.util.lens :as ul]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.form :as form] [uxbox.ui.form :as form]
[uxbox.ui.shapes.core :as uusc] [uxbox.ui.shapes.core :as uusc]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.util.dom :as dom] [uxbox.ui.mixins :as mx]
[uxbox.ui.mixins :as mx])) [uxbox.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Lenses
;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static dashboard-l (def ^:static dashboard-l
(as-> (l/in [:dashboard]) $ (as-> (l/in [:dashboard]) $
(l/focus-atom $ st/state))) (l/focus-atom $ st/state)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Page Title
;; Page Title
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn page-title-render (defn- page-title-render
[own coll] [own coll]
(let [dashboard (rum/react dashboard-l) (let [dashboard (rum/react dashboard-l)
own? (:builtin coll false)] own? (:builtin coll false)]
@ -51,15 +46,13 @@
[:span {:on-click (constantly nil)} [:span {:on-click (constantly nil)}
i/trash]])]))) i/trash]])])))
(def ^:static page-title (def ^:const ^:private page-title
(mx/component (mx/component
{:render page-title-render {:render page-title-render
:name "page-title" :name "page-title"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Nav
;; Nav
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn nav-render (defn nav-render
[own] [own]
@ -94,15 +87,13 @@
[:span.element-subtitle [:span.element-subtitle
(str (count (:icons props)) " elements")]])]]]))) (str (count (:icons props)) " elements")]])]]])))
(def ^:static nav (def ^:const ^:private nav
(mx/component (mx/component
{:render nav-render {:render nav-render
:name "nav" :name "nav"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Grid
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn grid-render (defn grid-render
[own] [own]
@ -130,9 +121,36 @@
:name "grid" :name "grid"
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Icons Page
;; Lightbox
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn icons-page-render
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(nav)
(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 icons-page
(mx/component
{:render icons-page-render
:will-mount icons-page-will-mount
:transfer-state icons-page-transfer-state
:name "icons-page"
:mixins [mx/static]}))
;; --- New Icon Lightbox (TODO)
(defn- new-icon-lightbox-render (defn- new-icon-lightbox-render
[own] [own]
@ -158,3 +176,7 @@
(mx/component (mx/component
{:render new-icon-lightbox-render {:render new-icon-lightbox-render
:name "new-icon-lightbox"})) :name "new-icon-lightbox"}))
(defmethod lightbox/render-lightbox :new-icon
[_]
(new-icon-lightbox))

203
src/uxbox/ui/dashboard/projects.cljs
View file

@ -14,25 +14,26 @@
[uxbox.router :as r] [uxbox.router :as r]
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.state :as s] [uxbox.state :as s]
[uxbox.util.datetime :as dt]
[uxbox.data.dashboard :as dd] [uxbox.data.dashboard :as dd]
[uxbox.data.projects :as dp] [uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.ui.dashboard.header :as dsh.header] [uxbox.ui.dashboard.header :refer (header)]
[uxbox.ui.lightbox :as lightbox] [uxbox.ui.lightbox :as lightbox]
[uxbox.ui.mixins :as mx])) [uxbox.ui.messages :as uum]
[uxbox.ui.mixins :as mx]
[uxbox.util.datetime :as dt]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Helpers & Constants
;; Helpers & Constants
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; FIXME rename (def ^:const ^:private
(def +ordering-options+ {:name "ds.project-ordering.by-name" +project-defaults+ {:name ""
:created "ds.project-ordering.by-creation-date"}) :width 1920
:height 1080
:layout "desktop"})
(def +layouts+ (def ^:const +layouts+
{"mobile" {"mobile"
{:name "Mobile" {:name "Mobile"
:id "mobile" :id "mobile"
@ -54,18 +55,14 @@
:width 1920 :width 1920
:height 1080}}) :height 1080}})
(def ^:static ^:private (def ^:const +ordering-options+
+project-defaults+ {:name "" {:name "ds.project-ordering.by-name"
:width 1920 :created "ds.project-ordering.by-creation-date"})
:height 1080
:layout "desktop"})
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Lenses
;; Top Menu
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:const menu-l (def ^:const projects-by-id-l
(as-> (l/select-keys [:projects-by-id]) $ (as-> (l/key :projects-by-id) $
(l/focus-atom $ s/state))) (l/focus-atom $ s/state)))
(def ^:const project-ordering-l (def ^:const project-ordering-l
@ -76,80 +73,84 @@
(as-> (l/in [:dashboard :project-filter]) $ (as-> (l/in [:dashboard :project-filter]) $
(l/focus-atom $ s/state))) (l/focus-atom $ s/state)))
(defn project-sort-render ;; --- Sort Widget
(defn sort-widget-render
[] []
(let [ordering (rum/react project-ordering-l) (let [ordering (rum/react project-ordering-l)
change-order #(rs/emit! (dd/set-project-ordering on-change #(rs/emit! (dd/set-project-ordering
(keyword (.-value (.-target %)))))] (keyword (.-value (.-target %)))))]
(html (html
[:div [:div
[:span (tr "ds.project-ordering")] [:span (tr "ds.project-ordering")]
[:select.input-select [:select.input-select
{:on-change change-order {:on-change on-change
:value (name ordering)} :value (name ordering)}
(for [option (keys +ordering-options+) (for [option (keys +ordering-options+)
:let [option-id (get +ordering-options+ option) :let [option-id (get +ordering-options+ option)
option-value (name option) option-value (name option)
option-text (tr option-id)]] option-text (tr option-id)]]
[:option [:option
{:key option-id {:key option-id
:value option-value} :value option-value}
option-text])]]))) option-text])]])))
(def project-sorting (def ^:const ^:private sort-widget
(mx/component (mx/component
{:render project-sort-render {:render sort-widget-render
:name "project-sort-order" :name "sort-widget-render"
:mixins [rum/reactive]})) :mixins [rum/reactive mx/static]}))
(defn project-search-render ;; --- Filtering Widget
(defn search-widget-render
[] []
(let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %)))) (letfn [(on-term-change [event]
clear-term #(rs/emit! (dd/clear-project-filtering))] (-> (dom/get-target event)
(dom/get-value)
(dd/set-project-filtering)))
(on-clear [event]
(rs/emit! (dd/clear-project-filtering)))]
(html (html
[:form.dashboard-search [:form.dashboard-search
[:input.input-text [:input.input-text
{:type "text" {:type "text"
:on-change change-term :on-change on-term-change
:auto-focus true :auto-focus true
:placeholder (tr "ds.project-search.placeholder") :placeholder (tr "ds.project-search.placeholder")
:value (rum/react project-filtering-l)}] :value (rum/react project-filtering-l)}]
[:div.clear-search [:div.clear-search
{:on-click clear-term} {:on-click on-clear}
i/close]]))) i/close]])))
(def project-search (def ^:const ^:private search-widget
(mx/component (mx/component
{:render project-search-render {:render search-widget-render
:name "project-search" :name "search-widget"
:mixins [rum/reactive]})) :mixins [rum/reactive mx/static]}))
;; --- Sort & Search Menu
(defn menu-render (defn menu-render
[] []
(let [projects (rum/react menu-l) (let [projects (rum/react projects-by-id-l)
pcount (count (:projects-by-id projects))] ;; FIXME: redundant project-by-id key pcount (count projects)]
(html (html
[:section.dashboard-bar [:section.dashboard-bar
[:div.dashboard-info [:div.dashboard-info
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
(project-sorting) (sort-widget)
(project-search)]]))) (search-widget)]])))
(def menu (def menu
(mx/component (mx/component
{:render menu-render {:render menu-render
:name "projects-menu" :name "menu"
:mixins [rum/reactive]})) :mixins [rum/reactive mx/static]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Grid Item
;; Grid
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static grid-l (defn grid-item-render
(as-> (l/select-keys [:projects-by-id]) $
(l/focus-atom $ s/state)))
(defn project-item-render
[own project] [own project]
(letfn [(on-navigate [event] (letfn [(on-navigate [event]
(rs/emit! (dp/go-to (:id project)))) (rs/emit! (dp/go-to (:id project))))
@ -168,36 +169,42 @@
[:div.project-th-icon.pages [:div.project-th-icon.pages
i/page i/page
[:span "0"]] [:span "0"]]
[:div.project-th-icon.comments #_[:div.project-th-icon.comments
i/chat i/chat
[:span "0"]] [:span "0"]]
#_[:div.project-th-icon.edit
i/pencil]
[:div.project-th-icon.delete [:div.project-th-icon.delete
{:on-click on-delete} {:on-click on-delete}
i/trash]]]))) i/trash]]])))
(def project-item (def ^:const ^:private grid-item
(mx/component (mx/component
{:render project-item-render {:render grid-item-render
:name "project" :name "grid-item"
:mixins [rum/static]})) :mixins [rum/static]}))
;; --- Grid
(defn grid-render (defn grid-render
[own] [own]
(letfn [(on-click [e] (let [projects (rum/react projects-by-id-l)
(dom/prevent-default e) ordering (rum/react project-ordering-l)
(lightbox/open! :new-project))] filtering (rum/react project-filtering-l)]
(let [state (rum/react grid-l) (letfn [(on-click [e]
ordering (rum/react project-ordering-l) (dom/prevent-default e)
filtering (rum/react project-filtering-l) (lightbox/open! :new-project))]
projects (dp/filter-projects-by filtering (vals (:projects-by-id state)))]
(html (html
[:section.dashboard-grid [:section.dashboard-grid
[:h2 "Your projects"] [:h2 "Your projects"]
[:div.dashboard-grid-content [:div.dashboard-grid-content
[:div.grid-item.add-project {:on-click on-click} [:div.grid-item.add-project
{:on-click on-click}
[:span "+ New project"]] [:span "+ New project"]]
(for [item (dp/sort-projects-by ordering projects)] (for [item (->> (vals projects)
(-> (project-item item) (dp/filter-projects-by filtering)
(dp/sort-projects-by ordering))]
(-> (grid-item item)
(rum/with-key (:id item))))]])))) (rum/with-key (:id item))))]]))))
(def grid (def grid
@ -206,11 +213,39 @@
:name "grid" :name "grid"
:mixins [rum/reactive]})) :mixins [rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Page
;; Lightbox
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn layout-input (defn projects-page-render
[own]
(html
[:main.dashboard-main
(uum/messages)
(header)
[:section.dashboard-content
(menu)
(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 projects-page
(mx/component
{:render projects-page-render
:will-mount projects-page-will-mount
:transfer-state projects-page-transfer-state
:name "projects-page"
:mixins [rum/static]}))
;; --- Lightbox: Layout input
(defn- layout-input
[local layout-id] [local layout-id]
(let [layout (get-in +layouts+ [layout-id]) (let [layout (get-in +layouts+ [layout-id])
id (:id layout) id (:id layout)
@ -226,9 +261,13 @@
:name "project-layout" :name "project-layout"
:value name :value name
:checked (= layout-id (:layout @local)) :checked (= layout-id (:layout @local))
:on-change #(swap! local merge {:layout layout-id :width width :height height})}] :on-change #(swap! local merge {:layout layout-id
:width width
:height height})}]
[:label {:value (:name @local) :for id} name]]))) [:label {:value (:name @local) :for id} name]])))
;; --- Lightbox: Layout selector
(defn- layout-selector (defn- layout-selector
[local] [local]
(html (html
@ -238,6 +277,8 @@
(layout-input local "notebook") (layout-input local "notebook")
(layout-input local "desktop")])) (layout-input local "desktop")]))
;; -- New Project Lightbox
(defn- new-project-lightbox-render (defn- new-project-lightbox-render
[own] [own]
(let [local (:rum/local own) (let [local (:rum/local own)