mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 19:51:23 -05:00
More work on color collections page.
This commit is contained in:
parent
d6fd75f7b9
commit
dbaeb9d5f4
3 changed files with 47 additions and 42 deletions
|
@ -8,6 +8,7 @@
|
|||
(ns uxbox.main.data.colors
|
||||
(:require [clojure.set :as set]
|
||||
[beicon.core :as rx]
|
||||
[uxbox.util.datetime :as dt]
|
||||
[uxbox.util.uuid :as uuid]
|
||||
[uxbox.util.rstore :as rs]
|
||||
[uxbox.util.router :as r]
|
||||
|
@ -60,10 +61,9 @@
|
|||
(defrecord CollectionsFetched [data]
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(let [value (:value data)]
|
||||
(-> state
|
||||
(assoc-in [:kvstore :color-collections] data)
|
||||
(update :color-colls-by-id merge value)))))
|
||||
(-> state
|
||||
(assoc-in [:kvstore :color-collections] data)
|
||||
(update :color-colls-by-id merge (:value data)))))
|
||||
|
||||
(defn collections-fetched
|
||||
[data]
|
||||
|
@ -94,25 +94,25 @@
|
|||
|
||||
;; --- Create Collection
|
||||
|
||||
(defrecord CreateCollection []
|
||||
(defrecord CreateCollection [id]
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(let [id (uuid/random)
|
||||
item {:name "Unnamed collection"
|
||||
(let [item {:name "Unnamed collection"
|
||||
:id id
|
||||
:created-at (dt/now)
|
||||
:type :own
|
||||
:id id}]
|
||||
(-> state
|
||||
(assoc-in [:color-colls-by-id id] item)
|
||||
(assoc-in [:dashboard :colors :id] id)
|
||||
(assoc-in [:dashboard :colors :type] :own))))
|
||||
:colors #{}}]
|
||||
(assoc-in state [:color-colls-by-id id] item)))
|
||||
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state stream]
|
||||
(rx/of (persist-collections))))
|
||||
(rx/of (persist-collections)
|
||||
(select-collection :own id))))
|
||||
|
||||
(defn create-collection
|
||||
[]
|
||||
(CreateCollection.))
|
||||
(let [id (uuid/random)]
|
||||
(CreateCollection. id)))
|
||||
|
||||
;; --- Persist Collections
|
||||
|
||||
|
@ -120,12 +120,12 @@
|
|||
rs/WatchEvent
|
||||
(-apply-watch [_ state stream]
|
||||
(let [builtin? #(= :builtin (:type %))
|
||||
xf (remove (comp builtin? second))
|
||||
|
||||
colls (get state :color-colls-by-id)
|
||||
data (-> (get-in state [:kvstore :color-collections])
|
||||
(assoc :value (into {} xf colls)))]
|
||||
(->> (rp/req :update/kvstore data)
|
||||
xform (remove (comp builtin? second))
|
||||
value (->> (get state :color-colls-by-id)
|
||||
(into {} xform))
|
||||
store (get-in state [:kvstore :color-collections])
|
||||
store (assoc store :value value)]
|
||||
(->> (rp/req :update/kvstore store)
|
||||
(rx/map :payload)
|
||||
(rx/map collections-fetched)))))
|
||||
|
||||
|
@ -157,7 +157,9 @@
|
|||
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state s]
|
||||
(rx/of (persist-collections))))
|
||||
(let [type (get-in state [:dashboard :colors :type])]
|
||||
(rx/of (persist-collections)
|
||||
(select-collection type)))))
|
||||
|
||||
(defn delete-collection
|
||||
[id]
|
||||
|
@ -169,7 +171,7 @@
|
|||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(let [replacer #(-> (disj % from) (conj to))]
|
||||
(update-in state [:color-colls-by-id id :data] (fnil replacer #{}))))
|
||||
(update-in state [:color-colls-by-id id :colors] (fnil replacer #{}))))
|
||||
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state s]
|
||||
|
@ -178,7 +180,6 @@
|
|||
(defn replace-color
|
||||
"Add or replace color in a collection."
|
||||
[{:keys [id from to] :as params}]
|
||||
(println "replace-color" params)
|
||||
(ReplaceColor. id from to))
|
||||
|
||||
;; --- Remove Color
|
||||
|
@ -186,7 +187,7 @@
|
|||
(defrecord RemoveColors [id colors]
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(update-in state [:color-colls-by-id id :data]
|
||||
(update-in state [:color-colls-by-id id :colors]
|
||||
#(set/difference % colors)))
|
||||
|
||||
rs/WatchEvent
|
||||
|
@ -230,7 +231,7 @@
|
|||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(let [selected (get-in state [:dashboard :colors :selected])]
|
||||
(update-in state [:color-colls-by-id id :data] set/union selected)))
|
||||
(update-in state [:color-colls-by-id id :colors] set/union selected)))
|
||||
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state stream]
|
||||
|
@ -248,8 +249,8 @@
|
|||
(-apply-update [_ state]
|
||||
(let [selected (get-in state [:dashboard :colors :selected])]
|
||||
(-> state
|
||||
(update-in [:color-colls-by-id from :data] set/difference selected)
|
||||
(update-in [:color-colls-by-id to :data] set/union selected))))
|
||||
(update-in [:color-colls-by-id from :colors] set/difference selected)
|
||||
(update-in [:color-colls-by-id to :colors] set/union selected))))
|
||||
|
||||
rs/WatchEvent
|
||||
(-apply-watch [_ state stream]
|
||||
|
|
|
@ -3,11 +3,11 @@
|
|||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.state
|
||||
(:require [beicon.core :as rx]
|
||||
[lentes.core :as l]
|
||||
[uxbox.main.state.colors :as colors]
|
||||
[uxbox.util.rstore :as rs]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.storage :refer (storage)]))
|
||||
|
@ -38,8 +38,7 @@
|
|||
:icon-colls-by-id nil
|
||||
:icons-by-id nil
|
||||
:shapes-by-id nil
|
||||
:elements-by-id nil
|
||||
:colors-by-id nil
|
||||
:color-colls-by-id colors/collections
|
||||
:projects-by-id nil
|
||||
:pages-by-id nil})
|
||||
|
||||
|
|
|
@ -43,7 +43,8 @@
|
|||
[own {:keys [id] :as coll}]
|
||||
(let [local (:rum/local own)
|
||||
dashboard (mx/react dashboard-ref)
|
||||
own? (= :builtin (:type coll))
|
||||
own? (= :own (:type coll))
|
||||
editable? (or own? (nil? id))
|
||||
edit? (:edit @local)]
|
||||
(letfn [(save []
|
||||
(let [dom (mx/ref-node own "input")
|
||||
|
@ -74,10 +75,13 @@
|
|||
:on-key-down on-input-keydown}
|
||||
(:name coll)]
|
||||
[:span.close {:on-click cancel} i/close]]
|
||||
[:span.dashboard-title-field
|
||||
{:on-double-click edit}
|
||||
(:name coll "Storage")])]
|
||||
(if (and (not own?) coll)
|
||||
(if own?
|
||||
[:span.dashboard-title-field
|
||||
{:on-double-click edit}
|
||||
(:name coll)]
|
||||
[:span.dashboard-title-field
|
||||
(:name coll "Storage")]))]
|
||||
(if (and own? coll)
|
||||
[:div.edition
|
||||
(if edit?
|
||||
[:span {:on-click save} i/save]
|
||||
|
@ -92,7 +96,7 @@
|
|||
(letfn [(on-click [event]
|
||||
(let [type (or type :own)]
|
||||
(rs/emit! (dc/select-collection type id))))]
|
||||
(let [colors (count (:data coll))]
|
||||
(let [colors (count (:colors coll))]
|
||||
[:li {:on-click on-click
|
||||
:class-name (when selected? "current")}
|
||||
[:span.element-title
|
||||
|
@ -101,7 +105,7 @@
|
|||
(tr "ds.num-elements" (t/c colors))]])))
|
||||
|
||||
(def ^:private storage-num-colors-ref
|
||||
(-> (comp (l/in [:color-colls-by-id nil :data])
|
||||
(-> (comp (l/in [:color-colls-by-id nil :colors])
|
||||
(l/lens count))
|
||||
(l/derive st/state)))
|
||||
|
||||
|
@ -123,7 +127,8 @@
|
|||
colls (cond->> (vals colls)
|
||||
own? (filter #(= :own (:type %)))
|
||||
builtin? (filter #(= :builtin (:type %)))
|
||||
own? (sort-by :id))]
|
||||
own? (sort-by :created-at)
|
||||
builtin? (sort-by :created-at))]
|
||||
[:ul.library-elements
|
||||
(when own?
|
||||
[:li
|
||||
|
@ -144,11 +149,11 @@
|
|||
(let [own? (= type :own)
|
||||
builtin? (= type :builtin)]
|
||||
(letfn [(select-tab [type]
|
||||
(if own?
|
||||
(if (= type :own)
|
||||
(rs/emit! (dc/select-collection type))
|
||||
(let [coll (->> (map second colls)
|
||||
(filter #(= type (:type %)))
|
||||
(sort-by :name)
|
||||
(sort-by :created-at)
|
||||
(first))]
|
||||
(if coll
|
||||
(rs/emit! (dc/select-collection type (:id coll)))
|
||||
|
@ -278,9 +283,9 @@
|
|||
|
||||
(mx/defc grid
|
||||
{:mixins [mx/static]}
|
||||
[{:keys [id type data] :as coll} selected]
|
||||
[{:keys [id type colors] :as coll} selected]
|
||||
(let [editable? (or (= :own type) (nil? id))
|
||||
colors (->> (remove nil? data)
|
||||
colors (->> (remove nil? colors)
|
||||
(sort-by identity))]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.dashboard-grid-row
|
||||
|
|
Loading…
Add table
Reference in a new issue