mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 06:58:58 -05:00
Dashboard ui code reorganization.
This commit is contained in:
Andrey Antukh
parent
0a736994db
commit
6ba28830f3
6 changed files with 262 additions and 284 deletions
|
|
@ -158,7 +158,8 @@
|
|||
display: flex;
|
||||
margin-right: $small;
|
||||
|
||||
&.delete {
|
||||
&.delete,
|
||||
&.edit {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"}))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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,16 +73,18 @@
|
|||
(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
|
||||
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
|
||||
{:on-change on-change
|
||||
:value (name ordering)}
|
||||
(for [option (keys +ordering-options+)
|
||||
:let [option-id (get +ordering-options+ option)
|
||||
|
|
@ -96,60 +95,62 @@
|
|||
: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]
|
||||
(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))]
|
||||
(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)))]
|
||||
(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)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue