mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
Initial work on icons library page and icons rendering.
This commit is contained in:
Andrey Antukh
parent
71d00f5970
commit
9e8171a777
6 changed files with 291 additions and 136 deletions
frontend/uxbox
|
|
@ -1,5 +1,6 @@
|
|||
(ns uxbox.library
|
||||
(:require [uxbox.library.colors :as colors]
|
||||
[uxbox.library.icons :as icons]
|
||||
[uxbox.util.data :refer (index-by-id)]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -11,3 +12,14 @@
|
|||
|
||||
(def ^:static +color-collections-by-id+
|
||||
(index-by-id colors/+collections+))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static +icon-collections+
|
||||
icons/+collections+)
|
||||
|
||||
(def ^:static +icon-collections-by-id+
|
||||
(index-by-id icons/+collections+))
|
||||
|
||||
|
|
|
|||
19
frontend/uxbox/library/icons.cljs
Normal file
19
frontend/uxbox/library/icons.cljs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
(ns uxbox.library.icons)
|
||||
|
||||
(def ^:private +material+
|
||||
[{:name "Attachment"
|
||||
:id :material/attachment
|
||||
:type :builtin/icon
|
||||
:svg [:path
|
||||
{:d "M15 36c-6.08 0-11-4.93-11-11s4.92-11 11-11h21c4.42 0 8 3.58 8 8s-3.58 8-8 8h-17c-2.76 0-5-2.24-5-5s2.24-5 5-5h15v3h-15c-1.1 0-2 .89-2 2s.9 2 2 2h17c2.76 0 5-2.24 5-5s-2.24-5-5-5h-21c-4.42 0-8 3.58-8 8s3.58 8 8 8h19v3h-19z"}]}
|
||||
{:name "Cloud"
|
||||
:id :material/cloud
|
||||
:type :builtin/icon
|
||||
:svg [:path
|
||||
{:d "M38.71 20.07c-1.36-6.88-7.43-12.07-14.71-12.07-5.78 0-10.79 3.28-13.3 8.07-6.01.65-10.7 5.74-10.7 11.93 0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93z"}]}
|
||||
])
|
||||
|
||||
(def +collections+
|
||||
[{:name "Material design"
|
||||
:id 1
|
||||
:icons +material+}])
|
||||
12
frontend/uxbox/shapes.cljs
Normal file
12
frontend/uxbox/shapes.cljs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
(ns uxbox.shapes
|
||||
(:require [sablono.core :refer-macros [html]]))
|
||||
|
||||
(defmulti render
|
||||
(fn [shape & params]
|
||||
(:type shape)))
|
||||
|
||||
(defmethod render :builtin/icon
|
||||
[shape & [{:keys [width height] :or {width "500" height "500"}}]]
|
||||
(let [content (:svg shape)]
|
||||
(html
|
||||
[:svg {:width width :height height} content])))
|
||||
|
|
@ -92,10 +92,8 @@
|
|||
(header)
|
||||
[:section.dashboard-content
|
||||
(icons/menu)
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
(icons/page-title)
|
||||
(icons/grid)]]]))
|
||||
(icons/nav)
|
||||
(icons/grid)]]))
|
||||
|
||||
(defn icons-page-will-mount
|
||||
[own]
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
(def ^:static menu
|
||||
(util/component
|
||||
{:render menu-render
|
||||
:name "icons-menu"
|
||||
:name "colors-menu"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Nav
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn grid-render
|
||||
|
|
|
|||
|
|
@ -1,12 +1,39 @@
|
|||
(ns uxbox.ui.dashboard.icons
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
(:require [sablono.core :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cuerdas.core :as str]
|
||||
[cats.labs.lens :as l]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.schema :as sc]
|
||||
[uxbox.library :as library]
|
||||
[uxbox.shapes :as shapes]
|
||||
[uxbox.data.dashboard :as dd]
|
||||
[uxbox.util.lens :as ul]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.form :as form]
|
||||
[uxbox.ui.lightbox :as lightbox]
|
||||
[uxbox.ui.dom :as dom]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.util :as util]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lenses
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:static dashboard-state
|
||||
(as-> (l/in [:dashboard]) $
|
||||
(l/focus-atom $ st/state)))
|
||||
|
||||
;; (def ^:static collections-state
|
||||
;; (as-> (l/in [:icons-by-id]) $
|
||||
;; (l/focus-atom $ st/state)))
|
||||
|
||||
;; (def ^:static collection-state
|
||||
;; (as-> (ul/dep-in [:icons-by-id] [:dashboard :collection-id]) $
|
||||
;; (l/focus-atom $ st/state)))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -32,151 +59,238 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn page-title-render
|
||||
[]
|
||||
(html
|
||||
[:div.dashboard-title
|
||||
[:h2 "Icons library name"]
|
||||
[:div.edition
|
||||
[:span i/pencil]
|
||||
[:span i/trash]]]))
|
||||
[own coll]
|
||||
(let [dashboard (rum/react dashboard-state)
|
||||
own? (:builtin coll false)]
|
||||
(html
|
||||
[:div.dashboard-title {}
|
||||
(if coll
|
||||
[:h2 {}
|
||||
[:span "Library: "]
|
||||
[:span {:content-editable ""
|
||||
:on-key-up (constantly nil)}
|
||||
(:name coll)]]
|
||||
[:h2 "No library selected"])
|
||||
(if (and (not own?) coll)
|
||||
[:div.edition {}
|
||||
[:span {:on-click (constantly nil)}
|
||||
i/trash]])])))
|
||||
|
||||
(def ^:static page-title
|
||||
(util/component
|
||||
{:render page-title-render
|
||||
:name "page-title"
|
||||
:mixins [mx/static]}))
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;; Nav
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn nav-render
|
||||
[own]
|
||||
(let [dashboard (rum/react dashboard-state)
|
||||
;; colors (rum/react collections-state)
|
||||
collid (:collection-id dashboard)
|
||||
own? (= (:collection-type dashboard) :own)
|
||||
builtin? (= (:collection-type dashboard) :builtin)
|
||||
collections (if own?
|
||||
[] #_(sort-by :id (vals colors))
|
||||
library/+icon-collections+)]
|
||||
(html
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li {:class-name (when builtin? "current")
|
||||
:on-click #(rs/emit! (dd/set-collection-type :builtin))}
|
||||
"STANDARD"]
|
||||
[:li {:class-name (when own? "current")
|
||||
:on-click #(rs/emit! (dd/set-collection-type :own))}
|
||||
"YOUR LIBRARIES"]]
|
||||
[:ul.library-elements
|
||||
(when own?
|
||||
[:li
|
||||
[:a.btn-primary
|
||||
{:on-click (constantly nil)}
|
||||
"+ New library"]])
|
||||
(for [props collections]
|
||||
[:li {:key (str (:id props))
|
||||
:on-click #(rs/emit! (dd/set-collection (:id props)))
|
||||
:class-name (when (= (:id props) collid) "current")}
|
||||
[:span.element-title (:name props)]
|
||||
[:span.element-subtitle
|
||||
(str (count (:icons props)) " elements")]])]]])))
|
||||
|
||||
(def ^:static nav
|
||||
(util/component
|
||||
{:render nav-render
|
||||
:name "nav"
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Grid
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn grid-render
|
||||
[own]
|
||||
(html
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
{on-click #(lightbox/open! :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]]]]))
|
||||
(let [dashboard (rum/react dashboard-state)
|
||||
coll-type (:collection-type dashboard)
|
||||
coll-id (:collection-id dashboard)
|
||||
own? (= coll-type :own)
|
||||
coll (get library/+icon-collections-by-id+ coll-id)]
|
||||
;; coll (case coll-type
|
||||
;; :builtin (get library/+color-collections-by-id+ coll-id)
|
||||
;; :own (rum/react collection-state))]
|
||||
;; edit-cb #(lightbox/open! :icon-form {:coll coll :icon %})
|
||||
;; remove-cb #(rs/emit! (dd/remove-icon {:id (:id coll) :icon %}))]
|
||||
(when coll
|
||||
(html
|
||||
[:section.dashboard-grid.library
|
||||
(page-title coll)
|
||||
[:div.dashboard-grid-content
|
||||
(for [icon (:icons coll)
|
||||
:let [_ (println icon)]]
|
||||
[:div.grid-item.small-item.project-th {:key (str (:id icon))}
|
||||
[:span.grid-item-image #_i/toggle (shapes/render icon)]
|
||||
[: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]}))
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
|
||||
;; (defn grid-render
|
||||
;; [own]
|
||||
;; (html
|
||||
;; [:div.dashboard-grid-content
|
||||
;; [:div.grid-item.small-item.add-project
|
||||
;; {on-click #(lightbox/open! :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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue