mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 14:46:15 +02: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
|
|
@ -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))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue