3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Adapt icons sidebar to the new icons state layout.

Browse source
This commit is contained in:
Andrey Antukh 2016-10-21 00:24:16 +02:00
parent 8df6ee502a
commit c9221d6b36
1 changed files with 69 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/uxbox/main/ui/workspace/sidebar/icons.cljs
View file

@ -6,36 +6,31 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.workspace.sidebar.icons (ns uxbox.main.ui.workspace.sidebar.icons
(:require [sablono.core :as html :refer-macros [html]] (:require [lentes.core :as l]
[rum.core :as rum]
[lentes.core :as l]
[uxbox.util.router :as r] [uxbox.util.router :as r]
[uxbox.util.rstore :as rs] [uxbox.util.rstore :as rs]
[uxbox.main.state :as st] [uxbox.main.state :as st]
[uxbox.main.library :as library]
[uxbox.main.data.workspace :as dw] [uxbox.main.data.workspace :as dw]
[uxbox.main.data.icons :as udi]
[uxbox.main.ui.shapes.icon :as icon] [uxbox.main.ui.shapes.icon :as icon]
[uxbox.main.ui.workspace.base :as wb] [uxbox.main.ui.workspace.base :as wb]
[uxbox.main.ui.dashboard.icons :as icons]
[uxbox.main.ui.icons :as i] [uxbox.main.ui.icons :as i]
[uxbox.util.mixins :as mx :include-macros true] [uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.data :refer (read-string)])) [uxbox.util.data :refer (read-string)]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Refs
;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:private drawing-shape (def ^:private drawing-shape
"A focused vision of the drawing property "A focused vision of the drawing property
of the workspace status. This avoids of the workspace status. This avoids
rerender the whole toolbox on each workspace rerender the whole toolbox on each workspace
change." change."
(as-> (l/in [:workspace :drawing]) $ (-> (l/in [:workspace :drawing])
(l/derive $ st/state))) (l/derive st/state)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; --- Icons (Component)
;; Icons
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- select-icon (defn- select-icon
[icon] [icon]
@ -48,26 +43,53 @@
(swap! local assoc :collid value) (swap! local assoc :collid value)
(rs/emit! (dw/select-for-drawing nil)))) (rs/emit! (dw/select-for-drawing nil))))
(defn- icon-wrapper-render (mx/defc icon-wrapper
[own icon] {:mixins [mx/static]}
(icon/icon-svg icon)) [icon]
(case (:type icon)
:icon (icon/icon-svg icon)
:icon-raw (icon/icon-raw-svg icon)))
(def ^:private icon-wrapper (defn- icons-toolbox-will-mount
(mx/component [own]
{:render icon-wrapper-render (let [local (:rum/local own)]
:name "icon-wrapper" (rs/emit! (udi/fetch-collections))
:mixins [mx/static]})) (add-watch local ::key (fn [_ _ _ {:keys [id]}]
(rs/emit! (udi/fetch-icons id))))
own))
(defn icons-render (defn- icons-toolbox-will-unmount
[own]
(let [local (:rum/local own)]
(remove-watch local ::key)
own))
(mx/defcs icons-toolbox
{:mixins [(mx/local) mx/reactive]
:will-mount icons-toolbox-will-mount
:will-unmount icons-toolbox-will-unmount}
[own] [own]
(let [local (:rum/local own) (let [local (:rum/local own)
drawing (mx/react drawing-shape) drawing (mx/react drawing-shape)
collid (:collid @local)
icons (get-in library/+icon-collections-by-id+ [collid :icons]) colls-map (mx/react icons/collections-ref)
on-close #(rs/emit! (dw/toggle-flag :icons)) colls (->> (vals colls-map)
on-select #(select-icon %) (sort-by :name))
on-change #(change-icon-coll local %)] coll (get colls-map (:id @local))
(html
icons (mx/react icons/icons-ref)
icons (->> (vals icons)
(filter #(= (:id coll) (:collection %))))]
(letfn [(on-close [event]
(rs/emit! (dw/toggle-flag :icons)))
(on-select [icon event]
(rs/emit! (dw/select-for-drawing icon)))
(on-change [event]
(let [value (-> (dom/event->value event)
(read-string))]
(swap! local assoc :id value)
(rs/emit! (dw/select-for-drawing nil))))]
[:div#form-figures.tool-window [:div#form-figures.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/icon-set] [:div.tool-window-icon i/icon-set]
@ -77,21 +99,15 @@
[:div.figures-catalog [:div.figures-catalog
;; extract component: set selector ;; extract component: set selector
[:select.input-select.small {:on-change on-change [:select.input-select.small {:on-change on-change
:value collid} :value (pr-str (:id coll))}
(for [icon-coll library/+icon-collections+] [:option {:value (pr-str nil)} "Storage"]
[:option {:key (str "icon-coll" (:id icon-coll)) (for [coll colls]
:value (pr-str (:id icon-coll))} [:option {:key (str "icon-coll" (:id coll))
(:name icon-coll)])]] :value (pr-str (:id coll))}
(:name coll)])]]
(for [icon icons (for [icon icons
:let [selected? (= drawing icon)]] :let [selected? (= drawing icon)]]
[:div.figure-btn {:key (str (:id icon)) [:div.figure-btn {:key (str (:id icon))
:class (when selected? "selected") :class (when selected? "selected")
:on-click #(on-select icon)} :on-click (partial on-select icon)}
(icon-wrapper icon)])]]))) (icon-wrapper icon)])]])))
(def icons-toolbox
(mx/component
{:render icons-render
:name "icons-toolbox"
:mixins [mx/reactive
(mx/local {:collid 1 :builtin true})]}))