3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 09:59:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Render builtin color collections.

Browse source
This commit is contained in:
Andrey Antukh 2015-12-22 10:19:20 +02:00
parent 5cea9f1a36
commit 31bcce2668
2 changed files with 42 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/uxbox/ui/dashboard/builtins.cljs
View file

@ -15,15 +15,15 @@
}} }}
{:name "Generic 2" {:name "Generic 2"
:id 2 :id 2
:colors #{:00f9ff :colors #{:20f9ff
:009fff :209fff
:0078ff :2078ff
:005eff :205eff
:0900ff :2900ff
:7502f1 :3502f1
:ffe705 :3fe705
:00ffab :30ffab
:f52105 :352105
}}]) }}])
(def ^:static +color-collections-by-id+ (def ^:static +color-collections-by-id+

136
frontend/uxbox/ui/dashboard/colors.cljs
View file

@ -13,6 +13,12 @@
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.util :as util])) [uxbox.ui.util :as util]))
(defn- get-collection
[state type id]
(case type
:builtin (get builtins/+color-collections-by-id+ id)
:own (get-in state [:colors-by-id id])))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses ;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -112,108 +118,34 @@
(defn grid-render (defn grid-render
[own] [own]
(html (let [dashboard (rum/react dashboard-state)
[:div.dashboard-grid-content own? (= (:collection-type dashboard) :own)
[:div.grid-item.small-item.add-project coll (get-collection {}
{on-click #(lightbox/set! :new-color)} (:collection-type dashboard)
[:span "+ New color"]] (:collection-id dashboard))]
[:div.grid-item.small-item.project-th (html
[:span.color-swatch {:style {:background-color "#81dadd"}}] [:div.dashboard-grid-content
[:span.color-data "#00f9ff"] (when own?
[:span.color-data "RGB 31,31,31"] [:div.grid-item.small-item.add-project
[:div.project-th-actions {:on-click #(lightbox/set! :new-color)}
[:div.project-th-icon.edit i/pencil] [:span "+ New color"]])
[:div.project-th-icon.delete i/trash]]] (for [color (:colors coll)
[:div.grid-item.small-item.project-th :let [color-str (name color)
[:span.color-swatch {:style {:background-color "#6eafd6"}}] color-hex (str "#" color-str)
[:span.color-data "#009fff"] color-rgb (util/hex->rgb color-hex)]]
[:span.color-data "RGB 31,31,31"] [:div.grid-item.small-item.project-th {:key color-str}
[:div.project-th-actions [:span.color-swatch {:style {:background-color color-hex}}]
[:div.project-th-icon.edit i/pencil] [:span.color-data (str "#" color-str)]
[:div.project-th-icon.delete i/trash]]] [:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
[:div.grid-item.small-item.project-th [:div.project-th-actions
[:span.color-swatch {:style {:background-color "#0078ff"}}] [:div.project-th-icon.edit i/pencil]
[:span.color-data "#0078ff"] [:div.project-th-icon.delete i/trash]]])])))
[: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 (def grid
(util/component (util/component
{:render grid-render {:render grid-render
:name "colors" :name "colors"
:mixins [mx/static]})) :mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lightbox ;; Lightbox
@ -232,12 +164,10 @@
[:input#color-rgb.input-text [:input#color-rgb.input-text
{:placeholder "RGB" {:placeholder "RGB"
:type "text"}]] :type "text"}]]
[:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]] (colorpicker (fn [{:keys [rgb hex]}]
(println "HEX:" hex)
(colorpicker (fn [{:keys [rgb hex]}] (println "RGB:" rgb)))
(println "HEX:" hex) [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
(println "RGB:" rgb)))
[:a.close {:href "#" [:a.close {:href "#"
:on-click #(do (dom/prevent-default %) :on-click #(do (dom/prevent-default %)
(lightbox/close!))} (lightbox/close!))}