From 6ba28830f3c80bae26ea0a37cabc7105a0a608e9 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 4 Apr 2016 18:18:52 +0300 Subject: [PATCH] Dashboard ui code reorganization. --- resources/styles/partials/dashboard-grid.scss | 3 +- src/uxbox/ui/dashboard.cljs | 144 +------------ src/uxbox/ui/dashboard/colors.cljs | 72 ++++--- src/uxbox/ui/dashboard/elements.cljs | 58 +++-- src/uxbox/ui/dashboard/icons.cljs | 66 ++++-- src/uxbox/ui/dashboard/projects.cljs | 203 +++++++++++------- 6 files changed, 262 insertions(+), 284 deletions(-) diff --git a/resources/styles/partials/dashboard-grid.scss b/resources/styles/partials/dashboard-grid.scss index 760abe634..55344cc2f 100644 --- a/resources/styles/partials/dashboard-grid.scss +++ b/resources/styles/partials/dashboard-grid.scss @@ -158,7 +158,8 @@ display: flex; margin-right: $small; - &.delete { + &.delete, + &.edit { margin-left: auto; margin-right: 0; diff --git a/src/uxbox/ui/dashboard.cljs b/src/uxbox/ui/dashboard.cljs index 261ecb605..1a86b348b 100644 --- a/src/uxbox/ui/dashboard.cljs +++ b/src/uxbox/ui/dashboard.cljs @@ -1,144 +1,10 @@ (ns uxbox.ui.dashboard - (:require [sablono.core :as html :refer-macros [html]] - [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] + (:require [uxbox.ui.dashboard.projects :as projects] [uxbox.ui.dashboard.elements :as elements] [uxbox.ui.dashboard.icons :as icons] [uxbox.ui.dashboard.colors :as colors])) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Page: projects -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - -(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]})) +(def projects-page projects/projects-page) +(def elements-page elements/elements-page) +(def icons-page icons/icons-page) +(def colors-page colors/colors-page) diff --git a/src/uxbox/ui/dashboard/colors.cljs b/src/uxbox/ui/dashboard/colors.cljs index 4044ef383..5cb798bcd 100644 --- a/src/uxbox/ui/dashboard/colors.cljs +++ b/src/uxbox/ui/dashboard/colors.cljs @@ -16,25 +16,24 @@ [uxbox.schema :as sc] [uxbox.library :as library] [uxbox.data.dashboard :as dd] - [uxbox.util.lens :as ul] - [uxbox.util.color :refer (hex->rgb)] [uxbox.ui.icons :as i] [uxbox.ui.form :as form] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.colorpicker :refer (colorpicker)] + [uxbox.ui.mixins :as mx] + [uxbox.ui.dashboard.header :refer (header)] [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 - (-> (l/in [:dashboard]) +(def ^:const ^:private dashboard-l + (-> (l/key :dashboard) (l/focus-atom st/state))) -(def ^:static ^:private collections-by-id-l - (-> (comp (l/in [:colors-by-id]) +(def ^:const ^:private collections-by-id-l + (-> (comp (l/key :colors-by-id) (ul/merge library/+color-collections-by-id+)) (l/focus-atom st/state))) @@ -43,9 +42,7 @@ (-> (l/key collid) (l/focus-atom collections-by-id-l))) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Page Title -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Page Title (defn page-title-render [own coll] @@ -69,15 +66,13 @@ #_[:span i/pencil] [:span {:on-click on-delete} i/trash]])])))) -(def ^:static page-title +(def ^:const ^:private page-title (mx/component {:render page-title-render :name "page-title" :mixins [mx/static rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Nav -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Nav (defn nav-render [own] @@ -115,15 +110,13 @@ [:span.element-subtitle (tr "ds.num-elements" (t/c num))]])]]]))) -(def ^:static nav +(def ^:const ^:private nav (mx/component {:render nav-render :name "nav" :mixins [rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Grid -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Grid (defn grid-render [own] @@ -157,17 +150,44 @@ {:on-click #(remove-cb color)} i/trash]])])]])))) -(def grid +(def ^:const ^:private grid (mx/component {:render grid-render :name "grid" :mixins [mx/static rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Lightbox -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Colors Page -(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]}) (defn- color-lightbox-render diff --git a/src/uxbox/ui/dashboard/elements.cljs b/src/uxbox/ui/dashboard/elements.cljs index 8e5b6a591..2bbbace72 100644 --- a/src/uxbox/ui/dashboard/elements.cljs +++ b/src/uxbox/ui/dashboard/elements.cljs @@ -8,15 +8,16 @@ (ns uxbox.ui.dashboard.elements (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] - ;; [uxbox.ui.library-bar :as ui.library-bar] + [uxbox.rstore :as rs] [uxbox.ui.icons :as i] + [uxbox.ui.mixins :as mx] [uxbox.ui.lightbox :as lightbox] - [uxbox.util.dom :as dom] - [uxbox.ui.mixins :as mx])) + [uxbox.ui.library-bar :as ui.library-bar] + [uxbox.data.dashboard :as dd] + [uxbox.ui.dashboard.header :refer (header)] + [uxbox.util.dom :as dom])) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Page Title -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Page Title (defn page-title-render [] @@ -27,15 +28,13 @@ [:span i/pencil] [:span i/trash]]])) -(def ^:static page-title +(def ^:const ^:private page-title (mx/component {:render page-title-render :name "page-title" :mixins [mx/static]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Grid -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Grid (defn grid-render [own] @@ -123,15 +122,44 @@ [:div.project-th-icon.edit i/pencil] [:div.project-th-icon.delete i/trash]]]])) -(def ^:static grid +(def ^:const ^:private grid (mx/component {:render grid-render :name "grid" :mixins [mx/static]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Lightbox -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Elements Page + +(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 [own] @@ -150,7 +178,7 @@ (lightbox/close!))} i/close]])) -(def new-element-lightbox +(def ^:const ^:private new-element-lightbox (mx/component {:render new-element-lightbox-render :name "new-element-lightbox"})) diff --git a/src/uxbox/ui/dashboard/icons.cljs b/src/uxbox/ui/dashboard/icons.cljs index 67834fcf4..8aec7ccc7 100644 --- a/src/uxbox/ui/dashboard/icons.cljs +++ b/src/uxbox/ui/dashboard/icons.cljs @@ -8,34 +8,29 @@ (ns uxbox.ui.dashboard.icons (:require [sablono.core :refer-macros [html]] [rum.core :as rum] - [cuerdas.core :as str] [lentes.core :as l] [uxbox.state :as st] [uxbox.rstore :as rs] [uxbox.schema :as sc] [uxbox.library :as library] [uxbox.data.dashboard :as dd] - [uxbox.util.lens :as ul] [uxbox.ui.icons :as i] [uxbox.ui.form :as form] [uxbox.ui.shapes.core :as uusc] [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 (as-> (l/in [:dashboard]) $ (l/focus-atom $ st/state))) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Page Title -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Page Title -(defn page-title-render +(defn- page-title-render [own coll] (let [dashboard (rum/react dashboard-l) own? (:builtin coll false)] @@ -51,15 +46,13 @@ [:span {:on-click (constantly nil)} i/trash]])]))) -(def ^:static page-title +(def ^:const ^:private page-title (mx/component {:render page-title-render :name "page-title" :mixins [mx/static rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Nav -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Nav (defn nav-render [own] @@ -94,15 +87,13 @@ [:span.element-subtitle (str (count (:icons props)) " elements")]])]]]))) -(def ^:static nav +(def ^:const ^:private nav (mx/component {:render nav-render :name "nav" :mixins [rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Grid -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Grid (defn grid-render [own] @@ -130,9 +121,36 @@ :name "grid" :mixins [mx/static rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Lightbox -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Icons Page + +(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 [own] @@ -158,3 +176,7 @@ (mx/component {:render new-icon-lightbox-render :name "new-icon-lightbox"})) + +(defmethod lightbox/render-lightbox :new-icon + [_] + (new-icon-lightbox)) diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index fc1a74a78..4cbf6a699 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -14,25 +14,26 @@ [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.state :as s] - [uxbox.util.datetime :as dt] [uxbox.data.dashboard :as dd] [uxbox.data.projects :as dp] [uxbox.data.workspace :as dw] [uxbox.ui.icons :as i] [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.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 +ordering-options+ {:name "ds.project-ordering.by-name" - :created "ds.project-ordering.by-creation-date"}) +(def ^:const ^:private + +project-defaults+ {:name "" + :width 1920 + :height 1080 + :layout "desktop"}) -(def +layouts+ +(def ^:const +layouts+ {"mobile" {:name "Mobile" :id "mobile" @@ -54,18 +55,14 @@ :width 1920 :height 1080}}) -(def ^:static ^:private - +project-defaults+ {:name "" - :width 1920 - :height 1080 - :layout "desktop"}) +(def ^:const +ordering-options+ + {:name "ds.project-ordering.by-name" + :created "ds.project-ordering.by-creation-date"}) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Top Menu -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Lenses -(def ^:const menu-l - (as-> (l/select-keys [:projects-by-id]) $ +(def ^:const projects-by-id-l + (as-> (l/key :projects-by-id) $ (l/focus-atom $ s/state))) (def ^:const project-ordering-l @@ -76,80 +73,84 @@ (as-> (l/in [:dashboard :project-filter]) $ (l/focus-atom $ s/state))) -(defn project-sort-render +;; --- Sort Widget + +(defn sort-widget-render [] (let [ordering (rum/react project-ordering-l) - change-order #(rs/emit! (dd/set-project-ordering - (keyword (.-value (.-target %)))))] + on-change #(rs/emit! (dd/set-project-ordering + (keyword (.-value (.-target %)))))] (html [:div - [:span (tr "ds.project-ordering")] - [:select.input-select - {:on-change change-order - :value (name ordering)} - (for [option (keys +ordering-options+) - :let [option-id (get +ordering-options+ option) - option-value (name option) - option-text (tr option-id)]] - [:option - {:key option-id - :value option-value} - option-text])]]))) + [:span (tr "ds.project-ordering")] + [:select.input-select + {:on-change on-change + :value (name ordering)} + (for [option (keys +ordering-options+) + :let [option-id (get +ordering-options+ option) + option-value (name option) + option-text (tr option-id)]] + [:option + {:key option-id + :value option-value} + option-text])]]))) -(def project-sorting +(def ^:const ^:private sort-widget (mx/component - {:render project-sort-render - :name "project-sort-order" - :mixins [rum/reactive]})) + {:render sort-widget-render + :name "sort-widget-render" + :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 %)))) - clear-term #(rs/emit! (dd/clear-project-filtering))] + (letfn [(on-term-change [event] + (-> (dom/get-target event) + (dom/get-value) + (dd/set-project-filtering))) + (on-clear [event] + (rs/emit! (dd/clear-project-filtering)))] (html [:form.dashboard-search [:input.input-text {:type "text" - :on-change change-term + :on-change on-term-change :auto-focus true :placeholder (tr "ds.project-search.placeholder") :value (rum/react project-filtering-l)}] [:div.clear-search - {:on-click clear-term} + {:on-click on-clear} i/close]]))) -(def project-search +(def ^:const ^:private search-widget (mx/component - {:render project-search-render - :name "project-search" - :mixins [rum/reactive]})) + {:render search-widget-render + :name "search-widget" + :mixins [rum/reactive mx/static]})) + +;; --- Sort & Search Menu (defn menu-render [] - (let [projects (rum/react menu-l) - pcount (count (:projects-by-id projects))] ;; FIXME: redundant project-by-id key + (let [projects (rum/react projects-by-id-l) + pcount (count projects)] (html [:section.dashboard-bar [:div.dashboard-info [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] - (project-sorting) - (project-search)]]))) + (sort-widget) + (search-widget)]]))) (def menu (mx/component {:render menu-render - :name "projects-menu" - :mixins [rum/reactive]})) + :name "menu" + :mixins [rum/reactive mx/static]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Grid -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Grid Item -(def ^:static grid-l - (as-> (l/select-keys [:projects-by-id]) $ - (l/focus-atom $ s/state))) - -(defn project-item-render +(defn grid-item-render [own project] (letfn [(on-navigate [event] (rs/emit! (dp/go-to (:id project)))) @@ -168,36 +169,42 @@ [:div.project-th-icon.pages i/page [:span "0"]] - [:div.project-th-icon.comments + #_[:div.project-th-icon.comments i/chat [:span "0"]] + #_[:div.project-th-icon.edit + i/pencil] [:div.project-th-icon.delete {:on-click on-delete} i/trash]]]))) -(def project-item +(def ^:const ^:private grid-item (mx/component - {:render project-item-render - :name "project" + {:render grid-item-render + :name "grid-item" :mixins [rum/static]})) +;; --- Grid + (defn grid-render [own] - (letfn [(on-click [e] - (dom/prevent-default e) - (lightbox/open! :new-project))] - (let [state (rum/react grid-l) - ordering (rum/react project-ordering-l) - filtering (rum/react project-filtering-l) - projects (dp/filter-projects-by filtering (vals (:projects-by-id state)))] + (let [projects (rum/react projects-by-id-l) + ordering (rum/react project-ordering-l) + filtering (rum/react project-filtering-l)] + (letfn [(on-click [e] + (dom/prevent-default e) + (lightbox/open! :new-project))] (html [:section.dashboard-grid [:h2 "Your projects"] [: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"]] - (for [item (dp/sort-projects-by ordering projects)] - (-> (project-item item) + (for [item (->> (vals projects) + (dp/filter-projects-by filtering) + (dp/sort-projects-by ordering))] + (-> (grid-item item) (rum/with-key (:id item))))]])))) (def grid @@ -206,11 +213,39 @@ :name "grid" :mixins [rum/reactive]})) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Lightbox -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Page -(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] (let [layout (get-in +layouts+ [layout-id]) id (:id layout) @@ -226,9 +261,13 @@ :name "project-layout" :value name :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]]))) +;; --- Lightbox: Layout selector + (defn- layout-selector [local] (html @@ -238,6 +277,8 @@ (layout-input local "notebook") (layout-input local "desktop")])) +;; -- New Project Lightbox + (defn- new-project-lightbox-render [own] (let [local (:rum/local own)