Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

add element lightbox

Browse source
This commit is contained in:
Juan de la Cruz 2015-12-16 10:55:09 +01:00 • committed by Andrey Antukh
parent 19b6d6b0fe
commit 2036bb6fbb
2 changed files with 216 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

300
frontend/uxbox/ui/elements.cljs
View file

@ -3,7 +3,9 @@
[rum.core :as rum] [rum.core :as rum]
[uxbox.ui.header :as ui.header] [uxbox.ui.header :as ui.header]
[uxbox.ui.library-bar :as ui.library-bar] [uxbox.ui.library-bar :as ui.library-bar]
[uxbox.ui.icons :as icons] [uxbox.ui.icons :as i]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.dom :as dom]
[uxbox.util :as util])) [uxbox.util :as util]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -22,97 +24,98 @@
[:span "Sort by"] [:span "Sort by"]
#_(project-sort-selector (atom :name))] #_(project-sort-selector (atom :name))]
[:div.dashboard-search [:div.dashboard-search
icons/search]] i/search]]
(ui.library-bar/library-bar) (ui.library-bar/library-bar)
[:section.dashboard-grid.library [:section.dashboard-grid.library
[:div.dashboard-title [:div.dashboard-title
[:h2 "Element library name"] [:h2 "Element library name"]
[:div.edition [:div.edition
[:span icons/pencil] [:span i/pencil]
[:span icons/trash] [:span i/trash]
] ]
] ]
[:div.dashboard-grid-content [:div.dashboard-grid-content
[:div.grid-item.add-project [:div.grid-item.add-project
{on-click #(lightbox/set! :new-element)}
[:span "+ New element"]] [:span "+ New element"]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
] ]
] ]
] ]
@ -139,133 +142,133 @@
[:span "Sort by"] [:span "Sort by"]
#_(project-sort-selector (atom :name))] #_(project-sort-selector (atom :name))]
[:div.dashboard-search [:div.dashboard-search
icons/search]] i/search]]
(ui.library-bar/library-bar) (ui.library-bar/library-bar)
[:section.dashboard-grid.library [:section.dashboard-grid.library
[:div.dashboard-title [:div.dashboard-title
[:h2 "Icon library name"] [:h2 "Icon library name"]
[:div.edition [:div.edition
[:span icons/pencil] [:span i/pencil]
[:span icons/trash] [:span i/trash]
] ]
] ]
[:div.dashboard-grid-content [:div.dashboard-grid-content
[:div.grid-item.small-item.add-project [:div.grid-item.small-item.add-project
[:span "+ New icon"]] [:span "+ New icon"]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/logo-icon] [:span.grid-item-image i/logo-icon]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/pencil] [:span.grid-item-image i/pencil]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/trash] [:span.grid-item-image i/trash]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/search] [:span.grid-item-image i/search]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/image] [:span.grid-item-image i/image]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/toggle] [:span.grid-item-image i/toggle]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/chat] [:span.grid-item-image i/chat]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/close] [:span.grid-item-image i/close]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/page] [:span.grid-item-image i/page]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/folder] [:span.grid-item-image i/folder]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/infocard] [:span.grid-item-image i/infocard]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/fill] [:span.grid-item-image i/fill]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/stroke] [:span.grid-item-image i/stroke]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/action] [:span.grid-item-image i/action]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/undo] [:span.grid-item-image i/undo]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/redo] [:span.grid-item-image i/redo]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/export] [:span.grid-item-image i/export]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/exit] [:span.grid-item-image i/exit]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.grid-item-image icons/user] [:span.grid-item-image i/user]
[:h3 "Custom icon"] [:h3 "Custom icon"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
] ]
] ]
] ]
@ -293,14 +296,14 @@
[:span "Sort by"] [:span "Sort by"]
#_(project-sort-selector (atom :name))] #_(project-sort-selector (atom :name))]
[:div.dashboard-search [:div.dashboard-search
icons/search]] i/search]]
(ui.library-bar/library-bar) (ui.library-bar/library-bar)
[:section.dashboard-grid.library [:section.dashboard-grid.library
[:div.dashboard-title [:div.dashboard-title
[:h2 "Colors library name"] [:h2 "Colors library name"]
[:div.edition [:div.edition
[:span icons/pencil] [:span i/pencil]
[:span icons/trash] [:span i/trash]
] ]
] ]
[:div.dashboard-grid-content [:div.dashboard-grid-content
@ -311,92 +314,92 @@
[:span.color-data "#00f9ff"] [:span.color-data "#00f9ff"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#6eafd6"}}] [:span.color-swatch {:style {:background-color "#6eafd6"}}]
[:span.color-data "#009fff"] [:span.color-data "#009fff"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#0078ff"}}] [:span.color-swatch {:style {:background-color "#0078ff"}}]
[:span.color-data "#0078ff"] [:span.color-data "#0078ff"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#005eff"}}] [:span.color-swatch {:style {:background-color "#005eff"}}]
[:span.color-data "#005eff"] [:span.color-data "#005eff"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#0900ff"}}] [:span.color-swatch {:style {:background-color "#0900ff"}}]
[:span.color-data "#0900ff"] [:span.color-data "#0900ff"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#7502f1"}}] [:span.color-swatch {:style {:background-color "#7502f1"}}]
[:span.color-data "#7502f1"] [:span.color-data "#7502f1"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#ffe705"}}] [:span.color-swatch {:style {:background-color "#ffe705"}}]
[:span.color-data "#ffe705"] [:span.color-data "#ffe705"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#00ffab"}}] [:span.color-swatch {:style {:background-color "#00ffab"}}]
[:span.color-data "#00ffab"] [:span.color-data "#00ffab"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#d56c5e"}}] [:span.color-swatch {:style {:background-color "#d56c5e"}}]
[:span.color-data "#f52105"] [:span.color-data "#f52105"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#ae80df"}}] [:span.color-swatch {:style {:background-color "#ae80df"}}]
[:span.color-data "#7502f1"] [:span.color-data "#7502f1"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#e7ba64"}}] [:span.color-swatch {:style {:background-color "#e7ba64"}}]
[:span.color-data "#ffe705"] [:span.color-data "#ffe705"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#73c2a8"}}] [:span.color-swatch {:style {:background-color "#73c2a8"}}]
[:span.color-data "#00ffab"] [:span.color-data "#00ffab"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th
[:span.color-swatch {:style {:background-color "#f52105"}}] [:span.color-swatch {:style {:background-color "#f52105"}}]
[:span.color-data "#f52105"] [:span.color-data "#f52105"]
[:span.color-data "RGB 31,31,31"] [:span.color-data "RGB 31,31,31"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon.edit icons/pencil] [:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete i/trash]]]
] ]
] ]
] ]
@ -407,3 +410,36 @@
{:render colors-render {:render colors-render
:name "colors" :name "colors"
:mixins [rum/static]})) :mixins [rum/static]}))
;;;;;;;;;;;
;; 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]]))
(def new-element-lightbox
(util/component
{:render new-element-lightbox-render
:name "new-element-lightbox"}))
(defmethod lightbox/render-lightbox :new-element
[_]
(new-element-lightbox))

48
resources/public/styles/partials/lightbox.scss
View file

@ -76,3 +76,51 @@
} }
} }
.lightbox-big-btn {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: column;
margin: 1rem;
.big-svg {
background-color: $color-gray-lighter;
border-radius: $br-medium;
padding: 3rem;
svg {
fill: $color-gray;
height: 40px;
width: 40px;
}
&.upload {
svg {
transform: rotate(-90deg);
}
}
}
.text {
color: $color-gray-light;
margin-top: .5rem;
}
&:hover {
.big-svg {
background-color: $color-primary;
svg {
fill: $color-white;
}
}
}
}