0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 03:31:24 -05:00

Initial work on icons library page and icons rendering.

This commit is contained in:
Andrey Antukh 2015-12-25 20:53:00 +02:00
parent 71d00f5970
commit 9e8171a777
6 changed files with 291 additions and 136 deletions

View file

@ -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+))

View 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+}])

View 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])))

View file

@ -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]

View file

@ -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

View file

@ -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