mirror of
https://github.com/penpot/penpot.git
synced 2025-01-21 06:02:32 -05:00
Restructure dashboard source code.
This commit is contained in:
Andrey Antukh
parent
93b7470b69
commit
20bffcd6be
7 changed files with 654 additions and 545 deletions
|
|
@ -7,10 +7,9 @@
|
|||
[uxbox.rstore :as rs]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.ui.lightbox :as ui.lb]
|
||||
[uxbox.ui.users :as ui.users]
|
||||
[uxbox.ui.dashboard.projects :as ui.dashboard.projects]
|
||||
[uxbox.ui.dashboard.elements :as ui.dashboard.elements]
|
||||
[uxbox.ui.workspace :as ui.w]
|
||||
[uxbox.ui.users :as users]
|
||||
[uxbox.ui.dashboard :as dashboard]
|
||||
[uxbox.ui.workspace :refer (workspace)]
|
||||
[uxbox.ui.util :as util]
|
||||
[uxbox.ui.mixins :as mx]))
|
||||
|
||||
|
|
@ -24,14 +23,14 @@
|
|||
(let [{:keys [location location-params] :as state} (rum/react state)]
|
||||
(println "app-render" location state)
|
||||
(case location
|
||||
:auth/login (ui.users/login)
|
||||
:dashboard/projects (ui.dashboard.projects/projects)
|
||||
:dashboard/elements (ui.dashboard.elements/elements)
|
||||
:dashboard/icons (ui.dashboard.elements/icons)
|
||||
:dashboard/colors (ui.dashboard.elements/colors)
|
||||
:auth/login (users/login)
|
||||
:dashboard/projects (dashboard/projects-page)
|
||||
:dashboard/elements (dashboard/elements-page)
|
||||
:dashboard/icons (dashboard/icons-page)
|
||||
:dashboard/colors (dashboard/colors-page)
|
||||
:workspace/page (let [projectid (:project-uuid location-params)
|
||||
pageid (:page-uuid location-params)]
|
||||
(ui.w/workspace projectid pageid))
|
||||
(workspace projectid pageid))
|
||||
nil
|
||||
)))
|
||||
|
||||
|
|
|
|||
101
frontend/uxbox/ui/dashboard.cljs
Normal file
101
frontend/uxbox/ui/dashboard.cljs
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
(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.ui.dom :as dom]
|
||||
[uxbox.ui.util :as util]
|
||||
[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.icons :as icons]
|
||||
[uxbox.ui.dashboard.colors :as colors]
|
||||
))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page: projects
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn projects-page-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content
|
||||
(projects/menu)
|
||||
(projects/grid)]]))
|
||||
|
||||
(def ^:static projects-page
|
||||
(util/component
|
||||
{:render projects-page-render
|
||||
:name "projects-page"
|
||||
:mixins [rum/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page: elements
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn elements-page-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content
|
||||
(elements/menu)
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
(elements/page-title)
|
||||
(elements/grid)]]]))
|
||||
|
||||
(def ^:static elements-page
|
||||
(util/component
|
||||
{:render elements-page-render
|
||||
:name "elements-page"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page: icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn icons-page-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content
|
||||
(icons/menu)
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
(icons/page-title)
|
||||
(icons/grid)]]]))
|
||||
|
||||
(def ^:static icons-page
|
||||
(util/component
|
||||
{:render icons-page-render
|
||||
:name "icons-page"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page: colors
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn colors-page-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content
|
||||
(colors/menu)
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
(colors/page-title)
|
||||
(colors/grid)]]]))
|
||||
|
||||
(def ^:static colors-page
|
||||
(util/component
|
||||
{:render colors-page-render
|
||||
:name "colors"
|
||||
:mixins [mx/static]}))
|
||||
189
frontend/uxbox/ui/dashboard/colors.cljs
Normal file
189
frontend/uxbox/ui/dashboard/colors.cljs
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
(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]
|
||||
[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]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn menu-render
|
||||
[]
|
||||
(let [pcount 20]
|
||||
(html
|
||||
[:section#dashboard-bar.dashboard-bar
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects pcount " projects"]
|
||||
[:span "Sort by"]]
|
||||
[:div.dashboard-search i/search]])))
|
||||
|
||||
(def ^:static menu
|
||||
(util/component
|
||||
{:render menu-render
|
||||
:name "icons-menu"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page Title
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn page-title-render
|
||||
[]
|
||||
(html
|
||||
[:div.dashboard-title
|
||||
[:h2 "Colors library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]]]))
|
||||
|
||||
(def ^:static page-title
|
||||
(util/component
|
||||
{:render page-title-render
|
||||
:name "page-title"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Colors
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn grid-render
|
||||
[own]
|
||||
(html
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
{on-click #(lightbox/set! :new-color)}
|
||||
[:span "+ New color"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#81dadd"}}]
|
||||
[:span.color-data "#00f9ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#6eafd6"}}]
|
||||
[:span.color-data "#009fff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0078ff"}}]
|
||||
[:span.color-data "#0078ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#005eff"}}]
|
||||
[:span.color-data "#005eff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0900ff"}}]
|
||||
[:span.color-data "#0900ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#7502f1"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ffe705"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#00ffab"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#d56c5e"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ae80df"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#e7ba64"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#73c2a8"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#f52105"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]]))
|
||||
|
||||
(def grid
|
||||
(util/component
|
||||
{:render grid-render
|
||||
:name "colors"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lightbox
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- new-color-lightbox-render
|
||||
[own]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New color"]
|
||||
[:form
|
||||
[:div.row-flex
|
||||
[:input#color-hex.input-text
|
||||
{:placeholder "#"
|
||||
:type "text"}]
|
||||
[:input#color-rgb.input-text
|
||||
{:placeholder "RGB"
|
||||
:type "text"}]]
|
||||
[:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
|
||||
(def new-color-lightbox
|
||||
(util/component
|
||||
{:render new-color-lightbox-render
|
||||
:name "new-color-lightbox"}))
|
||||
|
||||
(defmethod lightbox/render-lightbox :new-color
|
||||
[_]
|
||||
(new-color-lightbox))
|
||||
|
|
@ -1,445 +1,170 @@
|
|||
(ns uxbox.ui.dashboard.elements
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[uxbox.ui.dashboard.header :as dsh.header]
|
||||
[uxbox.ui.library-bar :as ui.library-bar]
|
||||
;; [uxbox.ui.library-bar :as ui.library-bar]
|
||||
[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]))
|
||||
|
||||
;; (def library-bar ui.library-bar/library-bar)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Elements
|
||||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn elements-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(dsh.header/header)
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 elements"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
i/search]]
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Element library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]
|
||||
]
|
||||
]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.add-project
|
||||
{on-click #(lightbox/set! :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]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
(defn menu-render
|
||||
[]
|
||||
(let [pcount 20]
|
||||
(html
|
||||
[:section#dashboard-bar.dashboard-bar
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects pcount " projects"]
|
||||
[:span "Sort by"]]
|
||||
[:div.dashboard-search i/search]])))
|
||||
|
||||
(def elements
|
||||
(def ^:static menu
|
||||
(util/component
|
||||
{:render elements-render
|
||||
:name "elements"
|
||||
{:render menu-render
|
||||
:name "elements-menu"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page Title
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn page-title-render
|
||||
[]
|
||||
(html
|
||||
[:div.dashboard-title
|
||||
[:h2 "Element library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]]]))
|
||||
|
||||
(def ^:static page-title
|
||||
(util/component
|
||||
{:render page-title-render
|
||||
:name "page-title"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
(defn icons-render
|
||||
|
||||
(defn grid-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(dsh.header/header)
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 icons"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
i/search]]
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Icon library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]
|
||||
]
|
||||
]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
{on-click #(lightbox/set! :new-icon)}
|
||||
[:span "+ New icon"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/logo-icon]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/pencil]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/trash]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/search]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.add-project
|
||||
{on-click #(lightbox/set! :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 icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/toggle]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/chat]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/close]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/page]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/folder]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/infocard]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/fill]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/stroke]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/action]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/undo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/redo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/export]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/exit]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/user]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
[: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 icons
|
||||
(def ^:static grid
|
||||
(util/component
|
||||
{:render icons-render
|
||||
:name "icons"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Colors
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn colors-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(dsh.header/header)
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 colors"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
i/search]]
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Colors library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]
|
||||
]
|
||||
]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
{on-click #(lightbox/set! :new-color)}
|
||||
[:span "+ New color"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#81dadd"}}]
|
||||
[:span.color-data "#00f9ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#6eafd6"}}]
|
||||
[:span.color-data "#009fff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0078ff"}}]
|
||||
[:span.color-data "#0078ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#005eff"}}]
|
||||
[:span.color-data "#005eff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0900ff"}}]
|
||||
[:span.color-data "#0900ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#7502f1"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ffe705"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#00ffab"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#d56c5e"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ae80df"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#e7ba64"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#73c2a8"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#f52105"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
|
||||
(def colors
|
||||
(util/component
|
||||
{:render colors-render
|
||||
:name "colors"
|
||||
{:render grid-render
|
||||
:name "grid"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lightbox
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
;; ADD ELEMENT LIGHTBOX
|
||||
|
||||
(defn- new-element-lightbox-render
|
||||
[own]
|
||||
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New element"]
|
||||
[: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 %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New element"]
|
||||
[: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 %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
|
||||
(def new-element-lightbox
|
||||
(util/component
|
||||
|
|
@ -449,63 +174,3 @@
|
|||
(defmethod lightbox/render-lightbox :new-element
|
||||
[_]
|
||||
(new-element-lightbox))
|
||||
|
||||
;; ADD ICON LIGHTBOX
|
||||
|
||||
(defn- new-icon-lightbox-render
|
||||
[own]
|
||||
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New icon"]
|
||||
[: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 %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
|
||||
(def new-icon-lightbox
|
||||
(util/component
|
||||
{:render new-icon-lightbox-render
|
||||
:name "new-icon-lightbox"}))
|
||||
|
||||
;; ADD COLOR LIGHTBOX
|
||||
|
||||
(defmethod lightbox/render-lightbox :new-icon
|
||||
[_]
|
||||
(new-icon-lightbox))(defn- new-color-lightbox-render
|
||||
[own]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New color"]
|
||||
[:form
|
||||
[:div.row-flex
|
||||
[:input#color-hex.input-text
|
||||
{:placeholder "#"
|
||||
:type "text"}]
|
||||
[:input#color-rgb.input-text
|
||||
{:placeholder "RGB"
|
||||
:type "text"}]]
|
||||
[:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
|
||||
(def new-color-lightbox
|
||||
(util/component
|
||||
{:render new-color-lightbox-render
|
||||
:name "new-color-lightbox"}))
|
||||
|
||||
(defmethod lightbox/render-lightbox :new-color
|
||||
[_]
|
||||
(new-color-lightbox))
|
||||
|
|
|
|||
208
frontend/uxbox/ui/dashboard/icons.cljs
Normal file
208
frontend/uxbox/ui/dashboard/icons.cljs
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
(ns uxbox.ui.dashboard.icons
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[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]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn menu-render
|
||||
[]
|
||||
(let [pcount 20]
|
||||
(html
|
||||
[:section#dashboard-bar.dashboard-bar
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects pcount " projects"]
|
||||
[:span "Sort by"]]
|
||||
[:div.dashboard-search i/search]])))
|
||||
|
||||
(def ^:static menu
|
||||
(util/component
|
||||
{:render menu-render
|
||||
:name "icons-menu"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Page Title
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn page-title-render
|
||||
[]
|
||||
(html
|
||||
[:div.dashboard-title
|
||||
[:h2 "Icons library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]]]))
|
||||
|
||||
(def ^:static page-title
|
||||
(util/component
|
||||
{:render page-title-render
|
||||
:name "page-title"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn grid-render
|
||||
[own]
|
||||
(html
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
{on-click #(lightbox/set! :new-icon)}
|
||||
[:span "+ New icon"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/logo-icon]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/pencil]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/trash]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/search]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/image]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/toggle]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/chat]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/close]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/page]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/folder]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/infocard]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/fill]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/stroke]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/action]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/undo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/redo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/export]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/exit]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image i/user]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit i/pencil]
|
||||
[:div.project-th-icon.delete i/trash]]]]))
|
||||
|
||||
(def grid
|
||||
(util/component
|
||||
{:render grid-render
|
||||
:name "grid"
|
||||
:mixins [mx/static]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lightbox
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn- new-icon-lightbox-render
|
||||
[own]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
[:h3 "New icon"]
|
||||
[: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 %)
|
||||
(lightbox/close!))}
|
||||
i/close]]))
|
||||
|
||||
(def new-icon-lightbox
|
||||
(util/component
|
||||
{:render new-icon-lightbox-render
|
||||
:name "new-icon-lightbox"}))
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
[uxbox.state :as s]
|
||||
[uxbox.time :as time]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.ui.icons.dashboard :as icons]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.dom :as dom]
|
||||
[uxbox.ui.dashboard.header :as dsh.header]
|
||||
|
|
@ -149,9 +148,9 @@
|
|||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static menu-state
|
||||
(as-> (l/select-keys [:projects]) $
|
||||
(l/focus-atom $ s/state)))
|
||||
;; (def ^:static menu-state
|
||||
;; (as-> (l/select-keys [:projects]) $
|
||||
;; (l/focus-atom $ s/state)))
|
||||
|
||||
(rum/defc project-sort-selector < rum/reactive
|
||||
[sort-order]
|
||||
|
|
@ -166,28 +165,27 @@
|
|||
|
||||
(defn menu-render
|
||||
[]
|
||||
(let [state (rum/react menu-state)
|
||||
(let [state {:projects []} #_(rum/react menu-state)
|
||||
pcount (count (:projects state))]
|
||||
(html
|
||||
[:section#dashboard-bar.dashboard-bar
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects pcount " projects"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:span "Sort by"]]
|
||||
[:div.dashboard-search
|
||||
icons/search]])))
|
||||
i/search]])))
|
||||
|
||||
(def menu
|
||||
(util/component
|
||||
{:render menu-render
|
||||
:name "dashboard-menu"
|
||||
:name "projects-menu"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Project Item
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn project-render
|
||||
(defn project-item-render
|
||||
[own project]
|
||||
(let [on-click #(rs/emit! (dp/go-to-project (:id project)))]
|
||||
(html
|
||||
|
|
@ -198,7 +196,7 @@
|
|||
(str "Updated " (time/ago (:last-update project)))]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.pages
|
||||
icons/page
|
||||
i/page
|
||||
[:span 0]]
|
||||
[:div.project-th-icon.comments
|
||||
i/chat
|
||||
|
|
@ -208,11 +206,11 @@
|
|||
(dom/stop-propagation %)
|
||||
;; (actions/delete-project conn uuid)
|
||||
%)}
|
||||
icons/trash]]])))
|
||||
i/trash]]])))
|
||||
|
||||
(def project-item
|
||||
(util/component
|
||||
{:render project-render
|
||||
{:render project-item-render
|
||||
:name "project"
|
||||
:mixins [rum/static]}))
|
||||
|
||||
|
|
@ -252,20 +250,3 @@
|
|||
:name "grid"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Main
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn projects-render
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(dsh.header/header)
|
||||
[:section.dashboard-content
|
||||
(menu)
|
||||
(grid)]]))
|
||||
|
||||
(def projects
|
||||
(util/component {:render projects-render
|
||||
:mixins [rum/static]
|
||||
:name "projects"}))
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
(ns uxbox.ui.icons.dashboard)
|
||||
|
||||
(def search
|
||||
[:svg
|
||||
{:viewBox "0 0 500.00001 500.00001"
|
||||
:height "500"
|
||||
:width "500"}
|
||||
[:g
|
||||
{:transform "translate(0,-552.36216)"}
|
||||
[:path
|
||||
{:d
|
||||
"M200.29725 552.38324C144.6653 551.99051 89.88011 577.18168 52.876636 618.57942 16.313752 657.43131-2.705195 711.35963 0.18295332 764.26078 1.9985904 822.58459 31.889632 878.83447 77.90587 914.59958c39.98578 31.74014 92.60748 47.06342 143.31425 41.9013 38.84333-2.62505 75.51155-19.16456 106.85305-41.76435 7.17231-1.53934 9.72142 7.50384 14.78811 10.58845 42.04255 41.3293 82.67492 84.17352 126.05517 124.09232 12.00732 7.9439 30.51663-1.1479 31.07467-15.7527 1.43434-13.0422-11.15438-20.6025-18.48934-29.2229-39.70031-41.19026-80.70036-81.09772-120.92692-121.76625 26.62166-35.23184 44.29966-78.16846 44.25714-122.56405 1.14919-33.55943-5.92357-67.44724-21.63713-97.18325-30.42135-59.87878-92.12109-103.59639-159.38669-109.59423-7.81133-0.75294-15.66453-1.05874-23.51093-0.95068zm6.23995 42.08785c60.28585 0.0563 117.641 38.95656 142.07743 93.73252 18.00411 38.76462 19.29632 84.99092 3.70183 124.75478-20.95175 53.68824-72.14922 94.79843-129.72385 101.23843-24.87708 2.80107-50.52648 0.98127-74.01503-8.14937C87.422868 885.2355 42.779742 823.9258 42.129407 759.28178 39.924956 708.78753 64.304902 658.55536 104.23533 627.86914c28.30796-22.10779 64.22378-34.81492 100.28539-33.38614 0.67217 0.00003 1.34431-0.012 2.01648-0.0119z"}]]])
|
||||
|
||||
(def page
|
||||
[:svg
|
||||
{:viewBox "0 0 500.00001 500.00001"
|
||||
:height "500"
|
||||
:width "500"}
|
||||
[:g
|
||||
{:transform "translate(0,-552.36216)"}
|
||||
[:path
|
||||
{:d
|
||||
"m320.39015 552.36384c-73.44108 0.67745-146.95887-0.65415-220.35122 1.35334-20.735733 7.39435-39.285118 27.31347-37.496207 50.50588 0.159401 136.49023-0.678826 273.03012 0.435229 409.48934 7.00946 21.481 27.826139 39.8571 51.330508 38.0905 93.42612 1.0407 186.87148 0.3971 280.29208-0.074 11.93639-0.885 21.88629-9.1406 29.96801-17.301 9.44013-10.0211 14.25282-24.0348 12.62864-37.73777-0.068-109.31076 0.33172-218.62105 0.414-327.93168-38.8013-38.79882-77.60274-77.59751-116.40404-116.39634l-0.817 0.002zM156.2119 596.40487c44.39032 0.0793 88.78053 0.20461 133.17076 0.32295 0.89112 30.38082-1.63281 61.04374 3.10844 91.19049 4.50849 10.79379 17.66579 12.76549 27.98415 11.74708 24.31509 0.93899 48.65429 0.86757 72.98341 0.8347-0.94636 100.89864 1.59171 201.89472-0.93042 302.73151-4.32142 8.2814-15.4464 5.2405-22.98551 5.4881-85.85716-0.442-171.75573 0.5107-257.58716-0.49-8.5224-3.9279-4.48072-14.7643-5.47913-21.87524-1.05218-89.48558-0.25588-178.98094-0.67544-268.47056 0.0769-38.72441-0.0552-77.52294 0.82966-116.19834 5.15916-8.09318 16.09959-4.2524 23.95239-5.21639 8.54273-0.0805 17.08621 0.0375 25.62885-0.0643zm183.87657 37.19746c7.31652 7.26768 14.61028 14.55841 21.85135 21.90133-9.15606 0.0559-18.31231 0.006-27.46846 0.0135 0.004-9.15358-0.0407-18.30727 0.0135-27.46076 1.86788 1.84866 3.73577 3.69732 5.60365 5.54598zM186.86953 759.6181c-13.51688 0.90037-27.78705-1.09729-40.95181 2.9066-14.55751 6.71156-15.52384 31.17282-0.41523 37.83184 12.35107 5.4839 26.1995 1.54676 39.06972 2.81948 55.27419 0.20135 110.65713 1.39131 165.86234-1.0317 16.51104-4.35227 20.12709-31.04729 4.42141-38.71804-14.42469-5.96564-30.39136-2.38042-45.49997-3.70231-40.8284-0.27337-81.65801 0.1215-122.48646-0.10587zm7.57405 82.67833c-15.3862 0.36678-30.98165-0.0866-46.20944 2.22608-14.26085 4.44473-18.88813 25.29444-7.7586 35.35778 10.4972 10.18266 26.50705 6.06793 39.5156 6.93108 56.02716 0.1996 112.13912 1.36881 168.1116-1.08522 12.16166-1.99844 20.42559-15.48166 16.32845-27.20317-2.76428-10.21399-13.43017-16.41979-23.71054-15.26258-43.82424-1.9684-87.71727-0.3158-131.56913-0.94096-4.90258-0.0291-9.80528-0.0358-14.70794-0.023zm-9.68287 83.66835c-12.50914 0.35681-25.33564-0.61576-37.64537 1.15148-12.614 6.28059-17.65249 25.62063-6.61289 35.68265 9.88024 9.66013 24.91707 6.06324 37.28579 6.72443 56.77355 0.32441 113.62307 1.22515 170.34719-1.04388 11.04294-1.63331 19.10832-12.97955 16.70329-23.9371-1.57109-10.58817-11.77955-19.6154-22.71618-17.97767-52.44584-1.16105-104.90969-0.29309-157.36183-0.59991z"}]]])
|
||||
|
||||
(def trash
|
||||
[:svg
|
||||
{:viewBox "0 0 500.00001 500.00001"
|
||||
:height "500"
|
||||
:width "500"}
|
||||
[:g
|
||||
{:transform "translate(0,-552.36216)"}
|
||||
[:path
|
||||
{:d
|
||||
"m207.72649 552.36246c-9.58156 0.56176-19.61044-0.5738-28.89232 2.18539-9.92365 4.51416-11.3996 16.74888-10.78194 26.35987-0.33982 10.57949-0.40206 21.16511-0.63311 31.74704-31.96322 0.55962-64.00768 0.0222-95.92 1.37682-15.647498 5.67343-28.108278 21.91494-25.377484 39.02559 0.472468 13.15448-1.671721 26.76164 1.361254 39.64406 5.091177 11.63453 15.950424 21.06625 28.48614 23.11997-1.357723 9.09644 0.351556 18.41407-0.240017 27.63358 0.445166 94.30366 0.163149 188.69761 1.17824 282.94502 5.738559 14.4077 19.891923 27.4604 36.319907 25.4936 94.83106 0.649 189.74702 0.6236 284.52771-0.074 14.70613-5.756 27.92148-20.249 25.93354-36.9377-0.0773-99.63186 0.57613-199.26439 0.75433-298.8967 16.57234-3.27329 31.36194-18.83844 29.43476-36.41906-0.28258-14.63241 2.02044-29.90795-2.19004-44.12704-6.07738-14.15728-21.45193-24.3356-37.10705-22.01057-27.34339-0.263-54.68677-0.52601-82.03016-0.78902-1.09277-16.83065 1.86004-34.59678-3.49927-50.91959-4.99968-9.00077-16.41929-9.84837-25.55076-9.09111-31.92454-0.5605-63.8489 0.18268-95.77373-0.26634zm42.31159 42.33448c13.16818 0 26.33636 0 39.50454 0 0 5.96369 0 11.92739 0 17.89108-26.42618-0.0534-52.94801 0.88329-79.31039-0.0725-0.11034-5.94023 0.0955-11.87974 0.19642-17.81861 13.20315 0 26.40628 0 39.60943 0zm122.56783 60.73089c12.14925 0.19476 24.63079-0.10751 36.48391 2.31314 6.00942 5.17744 1.59122 17.47034-6.88972 15.81431-96.25458 0.97257-192.53119 0.77479-288.7798 0.17031-7.60059-0.59965-16.113082 0.71039-23.093782-2.53865-4.724987-5.15244-1.499311-16.41916 6.498843-14.90503 91.921699-1.12566 183.858239-0.51093 275.780549-0.85408zm-122.56783 61.51275c43.72909 0 87.45818 0 131.18727 0-0.0737 95.93725 0.15656 191.94996-0.12395 287.84002-6.06281 8.2852-17.67534 4.0627-26.26609 5.1481-76.7573 0.6015-153.55808 0.4894-230.29033-0.4188-8.16139-3.5951-5.19383-14.38261-5.79459-21.38067-0.58279-90.39561 0.10852-180.79247 0.0947-271.18865 43.731 0 87.462 0 131.193 0zm-81.77418 51.35438c0.0229 72.69372-0.77901 145.38963 0.0286 218.08164 4.78253 7.62789 14.6676 4.18591 21.98694 4.89559 6.433-0.10899 12.86583-0.2277 19.29871-0.34368 0-74.86082 0-149.72164 0-224.58246-13.77015 0-27.54029 0-41.31044 0l-0.002 0.97636-0.002 0.97255zm61.11991 0c0.0199 72.68037-0.77296 145.3629 0.0286 218.04159 4.7362 7.69974 14.66739 4.19686 21.98693 4.93564 6.43363-0.10901 12.8671-0.2277 19.30062-0.34368 0-74.86082 0-149.72164 0-224.58246-13.77078 0-27.54156 0-41.31234 0l-0.002 0.97636-0.002 0.97255zm61.12183 0c0.0223 72.68037-0.77771 145.36292 0.0286 218.04159 4.73619 7.69974 14.66738 4.19686 21.98693 4.93564 6.43301-0.10899 12.86583-0.2277 19.29871-0.34368 0-74.86082 0-149.72164 0-224.58246-13.77015 0-27.54028 0-41.31043 0l-0.002 0.97636-0.002 0.97255z"}]]])
|
||||
Loading…
Add table
Reference in a new issue