0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

Refactor dashboard colors page.

This commit is contained in:
Andrey Antukh 2016-09-22 22:40:07 +03:00
parent 9728098c96
commit a7f8443843
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
4 changed files with 355 additions and 269 deletions

View file

@ -9,44 +9,82 @@
(:require [clojure.set :as set]
[beicon.core :as rx]
[uxbox.util.uuid :as uuid]
[uxbox.main.state :as st]
[uxbox.util.rstore :as rs]
[uxbox.main.state.colors :as stc]
[uxbox.util.router :as r]
[uxbox.util.color :as color]
[uxbox.main.state :as st]
[uxbox.main.repo :as rp]))
;; --- Helpers
(defn- assoc-collection
[state coll]
(let [id (:id coll)
coll (assoc coll :type :own)]
(assoc-in state [:colors-by-id id] coll)))
(defn- dissoc-collection
"A reduce function for dissoc the color collection
to the state map."
[state id]
(update state :colors-by-id dissoc id))
;; --- Initialize
(declare fetch-collections)
(declare collections-fetched?)
(defrecord Initialize []
(defrecord Initialize [type id]
rs/UpdateEvent
(-apply-update [_ state]
(let [type (or type :builtin)
id (or id (if (= type :builtin) 1 nil))
data {:type type :id id :selected #{}
:section :dashboard/colors}]
(assoc state :dashboard data)))
rs/EffectEvent
(-apply-effect [_ state]
(when-not (seq (:colors-by-id state))
(when (nil? (:colors-by-id state))
(reset! st/loader true)))
rs/WatchEvent
(-apply-watch [_ state s]
(let [colors (seq (:colors-by-id state))]
(if colors
(rx/empty)
(rx/merge
(rx/of (fetch-collections))
(if (nil? (:colors-by-id state))
(rx/merge
(rx/of (fetch-collections))
(->> (rx/filter collections-fetched? s)
(rx/take 1)
(rx/do #(reset! st/loader false))
(rx/ignore)))))))
(rx/ignore)))
(rx/empty))))
(defn initialize
[]
(Initialize.))
[type id]
(Initialize. type id))
;; --- Select a Collection
(defrecord SelectCollection [type id]
rs/WatchEvent
(-apply-watch [_ state stream]
(rx/of (r/navigate :dashboard/colors
{:type type :id id}))))
(defn select-collection
([type]
(select-collection type nil))
([type id]
{:pre [(keyword? type)]}
(SelectCollection. type id)))
;; --- Collections Fetched
(defrecord CollectionFetched [items]
rs/UpdateEvent
(-apply-update [_ state]
(reduce stc/assoc-collection state items)))
(reduce assoc-collection state items)))
(defn collections-fetched
[items]
@ -75,7 +113,7 @@
rs/UpdateEvent
(-apply-update [_ state]
(-> state
(stc/assoc-collection item)
(assoc-collection item)
(assoc-in [:dashboard :collection-id] (:id item))
(assoc-in [:dashboard :collection-type] :own))))
@ -103,13 +141,12 @@
(defrecord CollectionUpdated [item]
rs/UpdateEvent
(-apply-update [_ state]
(stc/assoc-collection state item)))
(assoc-collection state item)))
(defn collection-updated
[item]
(CollectionUpdated. item))
;; --- Update Collection
(defrecord UpdateCollection [id]
@ -144,7 +181,7 @@
(defrecord DeleteCollection [id]
rs/UpdateEvent
(-apply-update [_ state]
(stc/dissoc-collection state id))
(dissoc-collection state id))
rs/WatchEvent
(-apply-watch [_ state s]
@ -188,3 +225,42 @@
"Remove color in a collection."
[id colors]
(RemoveColors. id colors))
;; --- Select color
(defrecord SelectColor [color]
rs/UpdateEvent
(-apply-update [_ state]
(update-in state [:dashboard :selected] conj color)))
(defrecord DeselectColor [color]
rs/UpdateEvent
(-apply-update [_ state]
(update-in state [:dashboard :selected] disj color)))
(defrecord ToggleColorSelection [color]
rs/WatchEvent
(-apply-watch [_ state stream]
(let [selected (get-in state [:dashboard :selected])]
(rx/of
(if (selected color)
(DeselectColor. color)
(SelectColor. color))))))
(defn toggle-color-selection
[color]
{:pre [(color/hex? color)]}
(ToggleColorSelection. color))
;; --- Delete Selected Colors
(defrecord DeleteSelectedColors []
rs/WatchEvent
(-apply-watch [_ state stream]
(let [{:keys [id selected]} (get state :dashboard)]
(rx/of (remove-colors id selected)
#(assoc-in % [:dashboard :selected] #{})))))
(defn delete-selected-colors
[]
(DeleteSelectedColors.))

View file

@ -6,16 +6,12 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui
(:require [sablono.core :as html :refer-macros [html]]
[promesa.core :as p]
(:require [promesa.core :as p]
[beicon.core :as rx]
[goog.dom :as gdom]
[rum.core :as rum]
[lentes.core :as l]
[cuerdas.core :as str]
[bide.core :as bc]
[uxbox.main.state :as st]
[uxbox.util.router :as rt]
[uxbox.util.rstore :as rs]
[uxbox.util.i18n :refer (tr)]
[uxbox.main.data.projects :as dp]
[uxbox.main.data.users :as udu]
[uxbox.main.data.auth :as dauth]
@ -27,6 +23,11 @@
[uxbox.main.ui.dashboard :as dashboard]
[uxbox.main.ui.settings :as settings]
[uxbox.main.ui.workspace :refer (workspace)]
[uxbox.util.router :as rt]
[uxbox.util.rstore :as rs]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.data :refer (parse-int uuid-str?)]
[uxbox.util.dom :as dom]
[uxbox.util.mixins :as mx]
[uxbox.main.ui.shapes]))
@ -99,7 +100,13 @@
:dashboard/elements (dashboard/elements-page)
:dashboard/icons (dashboard/icons-page)
:dashboard/images (dashboard/images-page)
:dashboard/colors (dashboard/colors-page)
:dashboard/colors (let [{:keys [id type]} params
type (when (str/alpha? type) (keyword type))
id (cond
(str/digits? id) (parse-int id)
(uuid-str? id) (uuid id)
:else nil)]
(dashboard/colors-page type id))
:settings/profile (settings/profile-page)
:settings/password (settings/password-page)
:settings/notifications (settings/notifications-page)
@ -122,6 +129,8 @@
["/dashboard/icons" :dashboard/icons]
["/dashboard/images" :dashboard/images]
["/dashboard/colors" :dashboard/colors]
["/dashboard/colors/:type/:id" :dashboard/colors]
["/dashboard/colors/:type" :dashboard/colors]
["/workspace/:project/:page" :workspace/page]])
(extend-protocol bc/IPathRepr

View file

@ -29,260 +29,269 @@
[uxbox.util.lens :as ul]
[uxbox.util.color :refer (hex->rgb)]))
;; --- Lenses
;; --- Refs
(def ^:private dashboard-ref
(-> (l/key :dashboard)
(l/derive st/state)))
(def ^:private collections-by-id-ref
(def ^:private collections-map-ref
(-> (comp (l/key :colors-by-id)
(ul/merge library/+color-collections-by-id+))
(l/derive st/state)))
(def ^:private collections-ref
(-> (l/lens vals)
(l/derive collections-map-ref)))
(defn- focus-collection
[collid]
(-> (l/key collid)
(l/derive collections-by-id-ref)))
[id]
(-> (l/key id)
(l/derive collections-map-ref)))
;; --- Page Title
(defn page-title-render
[own coll]
(mx/defcs page-title
{:mixins [(rum/local {}) mx/static mx/reactive]}
[own {:keys [id] :as coll}]
(let [local (:rum/local own)
dashboard (mx/react dashboard-ref)
own? (:builtin coll false)]
(letfn [(on-title-save [e]
(rs/emit! (dc/rename-collection (:id coll) (:coll-name @local)))
own? (= :builtin (:type coll))
edit? (:edit @local)]
(letfn [(save []
(let [dom (mx/ref-node own "input")
name (.-innerText dom)]
(rs/emit! (dc/rename-collection id (str/trim name)))
(swap! local assoc :edit false)))
(cancel []
(swap! local assoc :edit false))
(on-title-edited [e]
(edit []
(swap! local assoc :edit true))
(on-input-keydown [e]
(cond
(k/esc? e) (swap! local assoc :edit false)
(k/enter? e) (on-title-save e)
:else (let [content (dom/event->inner-text e)]
(swap! local assoc :coll-name content))))
(on-title-edit [e]
(swap! local assoc :edit true :coll-name (:name coll)))
(on-delete [e]
(k/esc? e) (cancel)
(k/enter? e)
(do
(dom/prevent-default e)
(dom/stop-propagation e)
(save))))
(delete-collection []
(rs/emit! (dc/delete-collection (:id coll))))]
(html
[:div.dashboard-title {}
[:h2 {}
(if (:edit @local)
[:div.dashboard-title-field
[:span.edit
{:content-editable ""
:on-key-up on-title-edited}
(:name coll)]
[:span.close
{:on-click #(swap! local assoc :edit false)}
i/close]]
[:span.dashboard-title-field
(:name coll)])]
(if (and (not own?) coll)
[:div.edition
(if (:edit @local)
[:span {:on-click on-title-save} i/save]
[:span {:on-click on-title-edit} i/pencil])
[:span {:on-click on-delete} i/trash]])]))))
(def ^:private page-title
(mx/component
{:render page-title-render
:name "page-title"
:mixins [(rum/local {}) mx/static mx/reactive]}))
;; --- Nav
(defn nav-render
[own]
(let [dashboard (mx/react dashboard-ref)
collections-by-id (mx/react collections-by-id-ref)
collid (:collection-id dashboard)
own? (= (:collection-type dashboard) :own)
builtin? (= (:collection-type dashboard) :builtin)
collections (as-> (vals collections-by-id) $
(if own?
(filter (comp not :builtin) $)
(filter :builtin $)))]
(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
(if own?
[:li
[:a.btn-primary
{:on-click #(rs/emit! (dc/create-collection))}
"+ New library"]])
(for [props collections
:let [num (count (:data props))]]
[: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
(tr "ds.num-elements" (t/c num))]])]]])))
(def ^:private nav
(mx/component
{:render nav-render
:name "nav"
:mixins [mx/reactive]}))
[:div.dashboard-title
[:h2
(if edit?
[:div.dashboard-title-field
[:span.edit
{:content-editable true
:ref "input"
: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)])]
(if (and (not own?) coll)
[:div.edition
(if edit?
[:span {:on-click save} i/save]
[:span {:on-click edit} i/pencil])
[:span {:on-click delete-collection} i/trash]])])))
;; --- Grid
(defn grid-render
[own]
(let [local (:rum/local own)
dashboard (mx/react dashboard-ref)
coll-type (:collection-type dashboard)
coll-id (:collection-id dashboard)
own? (= coll-type :own)
coll (mx/react (focus-collection coll-id))
toggle-color-check (fn [color]
(swap! local update :selected #(if (% color) (disj % color) (conj % color))))
delete-selected #(rs/emit! (dc/remove-colors (:id coll) (:selected @local)))]
(when coll
(html
[:section.dashboard-grid.library
(page-title coll)
[:div.dashboard-grid-content
[:div.dashboard-grid-row
(if own?
[:div.grid-item.small-item.add-project
{:on-click #(udl/open! :color-form {:coll coll})}
[:span "+ New color"]])
(for [color (remove nil? (:data coll))
:let [color-rgb (hex->rgb color)]]
[:div.grid-item.small-item.project-th
{:key color :on-click #(when (k/shift? %) (toggle-color-check color))}
[:span.color-swatch {:style {:background-color color}}]
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id color
:on-click #(toggle-color-check color)
:checked ((:selected @local) color)}]
[:label {:for color}]]
[:span.color-data color]
[:span.color-data (apply str "RGB " (interpose ", " color-rgb))]])]]
(mx/defc grid-item
[color selected?]
(let [color-rgb (hex->rgb color)]
(letfn [(toggle-selection [event]
(rs/emit! (dc/toggle-color-selection color)))
(toggle-selection-shifted [event]
(when (k/shift? event)
(toggle-selection event)))]
[:div.grid-item.small-item.project-th
{:on-click toggle-selection-shifted}
[:span.color-swatch {:style {:background-color color}}]
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id color
:on-click toggle-selection
:checked selected?}]
[:label {:for color}]]
[:span.color-data color]
[:span.color-data (apply str "RGB " (interpose ", " color-rgb))]])))
(when (not (empty? (:selected @local)))
;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar
(if own?
[:div.multiselect-nav
[:span.move-item.tooltip.tooltip-top
{:alt "Move to"}
i/organize]
[:span.delete.tooltip.tooltip-top
{:alt "Delete" :on-click delete-selected}
i/trash]]
[:div.multiselect-nav
[:span.move-item.tooltip.tooltip-top
{:alt "Copy to"}
i/organize]])])]))))
(mx/defc grid-options
[coll]
(let [own? (= (:type coll) :own)]
(letfn [(on-delete [event]
(rs/emit! (dc/delete-selected-colors)))]
;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar
(if own?
[:div.multiselect-nav
#_[:span.move-item.tooltip.tooltip-top
{:alt "Move to"}
i/organize]
[:span.delete.tooltip.tooltip-top
{:alt "Delete"
:on-click on-delete}
i/trash]]
[:div.multiselect-nav
[:span.move-item.tooltip.tooltip-top
{:alt "Copy to"}
i/organize]])])))
(def ^:private grid
(mx/component
{:render grid-render
:name "grid"
:mixins [(rum/local {:selected #{}})
mx/static
mx/reactive]}))
(mx/defc grid
{:mixins [mx/static]}
[selected coll]
(let [own? (= (:type coll) :own)]
[:div.dashboard-grid-content
[:div.dashboard-grid-row
(when own?
[:div.grid-item.small-item.add-project
{:on-click #(udl/open! :color-form {:coll coll})}
[:span "+ New color"]])
(for [color (remove nil? (:data coll))
:let [selected? (contains? selected color)]]
(-> (grid-item color selected?)
(mx/with-key (str color))))]]))
;; --- Menu
(defn menu-render
(mx/defc content
{:mixins [mx/static mx/reactive]}
[]
(let [dashboard (mx/react dashboard-ref)
coll-id (:collection-id dashboard)
selected (:selected dashboard)
coll-type (:type dashboard)
coll-id (:id dashboard)
coll (mx/react (focus-collection coll-id))
ccount (count (:data coll)) ]
(html
[:section.dashboard-bar.library-gap
[:div.dashboard-info
[:span.dashboard-colors (tr "ds.num-colors" (t/c ccount))]]])))
own? (= coll-type :own)]
(when coll
[:section.dashboard-grid.library
(page-title coll)
(grid selected coll)
(when (and (seq selected))
(grid-options coll))])))
(def menu
(mx/component
{:render menu-render
:name "menu"
:mixins [mx/reactive mx/static]}))
;; --- Nav
(mx/defc nav-collection
{:mixins [mx/static]}
[collection selected?]
(letfn [(on-click [event]
(let [type (:type collection)
id (:id collection)]
(rs/emit! (dc/select-collection type id))))]
(let [colors (count (:data collection))]
[:li {:on-click on-click
:class-name (when selected? "current")}
[:span.element-title (:name collection)]
[:span.element-subtitle
(tr "ds.num-elements" (t/c colors))]])))
(mx/defc nav-collections
{:mixins [mx/static mx/reactive]}
[type selected]
(let [own? (= type :own)
builtin? (= type :builtin)
collections (cond->> (rum/react collections-ref)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
own? (sort-by :id))]
[:ul.library-elements
(when own?
[:li
[:a.btn-primary
{:on-click #(rs/emit! (dc/create-collection))}
"+ New library"]])
(for [coll collections
:let [selected? (= (:id coll) selected)
key (str (:id coll))]]
(-> (nav-collection coll selected?)
(mx/with-key key)))]))
(mx/defc nav
{:mixins [mx/static mx/reactive]}
[]
(let [dashboard (mx/react dashboard-ref)
collections (rum/react collections-ref)
selected (:id dashboard)
type (:type dashboard)
own? (= type :own)
builtin? (= type :builtin)]
(letfn [(select-tab [type]
(let [xf (filter #(= type (:type %)))
colls (sequence xf collections)]
(if-let [item (first colls)]
(rs/emit! (dc/select-collection type (:id item)))
(rs/emit! (dc/select-collection type)))))]
[:div.library-bar
[:div.library-bar-inside
[:ul.library-tabs
[:li {:class-name (when builtin? "current")
:on-click (partial select-tab :builtin)}
"STANDARD"]
[:li {:class-name (when own? "current")
:on-click (partial select-tab :own)}
"YOUR LIBRARIES"]]
(nav-collections type selected)]])))
;; --- Colors Page
(defn colors-page-render
(defn- colors-page-will-mount
[own]
(html
[:main.dashboard-main
(header)
[:section.dashboard-content
(nav)
(menu)
(grid)]]))
(let [[type id] (:rum/args own)]
(rs/emit! (dc/initialize type id))
own))
(defn colors-page-will-mount
[own]
(rs/emit! (dd/initialize :dashboard/colors)
(dc/initialize))
own)
(defn- colors-page-did-remount
[old-own own]
(let [[old-type old-id] (:rum/args old-own)
[new-type new-id] (:rum/args own)]
(when (or (not= old-type new-type)
(not= old-id new-id))
(rs/emit! (dc/initialize new-type new-id)))
own))
(defn colors-page-did-remount
[old-state state]
(rs/emit! (dd/initialize :dashboard/colors))
state)
(mx/defc colors-page
{:will-mount colors-page-will-mount
:did-remount colors-page-did-remount
:mixins [mx/static]}
[type id]
[:main.dashboard-main
(header)
[:section.dashboard-content
(nav)
(content)]])
(def colors-page
(mx/component
{:render colors-page-render
:will-mount colors-page-will-mount
:did-remount colors-page-did-remount
:name "colors"
:mixins [mx/static]}))
;; --- Colors Lightbox (Component)
;; --- Colors Create / Edit Lightbox
(defn- color-lightbox-render
(mx/defcs color-lightbox
{:mixins [(rum/local {}) mx/static]}
[own {:keys [coll color]}]
(html
(let [local (:rum/local own)]
(letfn [(submit [e]
(let [params {:id (:id coll) :from color :to (:hex @local)}]
(letfn [(on-submit [event]
(let [params {:id (:id coll)
:from color
:to (:hex @local)}]
(rs/emit! (dc/replace-color params))
(udl/close!)))
(on-change [e]
(let [value (str/trim (dom/event->value e))]
(swap! local assoc :hex value)))]
(html
[:div.lightbox-body
[:h3 "New color"]
[:form
[:div.row-flex.center
(colorpicker
:value (or (:hex @local) color "#00ccff")
:on-change #(swap! local assoc :hex %))]
(on-change [event]
(let [value (str/trim (dom/event->value event))]
(swap! local assoc :hex value)))
(on-close [event]
(udl/close!))]
[:div.lightbox-body
[:h3 "New color"]
[:form
[:div.row-flex.center
(colorpicker
:value (or (:hex @local) color "#00ccff")
:on-change #(swap! local assoc :hex %))]
[:input#project-btn.btn-primary
{:value "+ Add color"
:on-click submit
:type "button"}]]
[:a.close {:on-click #(udl/close!)}
i/close]])))))
(def color-lightbox
(mx/component
{:render color-lightbox-render
:name "color-lightbox"
:mixins [(rum/local {})
mx/static]}))
[:input#project-btn.btn-primary
{:value "+ Add color"
:on-click on-submit
:type "button"}]]
[:a.close {:on-click on-close} i/close]])))
(defmethod lbx/render-lightbox :color-form
[params]

View file

@ -6,9 +6,7 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.header
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[lentes.core :as l]
(:require [lentes.core :as l]
[uxbox.util.i18n :refer (tr)]
[uxbox.util.router :as r]
[uxbox.util.rstore :as rs]
@ -20,43 +18,37 @@
[uxbox.util.mixins :as mx]))
(def header-ref
(as-> (l/in [:dashboard]) $
(l/derive $ s/state)))
(-> (l/in [:dashboard])
(l/derive s/state)))
(defn- header-link
(mx/defc header-link
[section content]
(let [link (r/route-for section)]
(html
[:a {:href (str "/#" link)} content])))
[:a {:href (str "/#" link)} content]))
(defn header-render
[own]
(mx/defc header
{:mixins [mx/static mx/reactive]}
[]
(let [local (mx/react header-ref)
projects? (= (:section local) :dashboard/projects)
elements? (= (:section local) :dashboard/elements)
icons? (= (:section local) :dashboard/icons)
images? (= (:section local) :dashboard/images)
colors? (= (:section local) :dashboard/colors)]
(html
[:header#main-bar.main-bar
[:div.main-logo
(header-link :dashboard/projects i/logo)]
[:ul.main-nav
[:li {:class (when projects? "current")}
(header-link :dashboard/projects (tr "ds.projects"))]
[:li {:class (when elements? "current")}
(header-link :dashboard/elements (tr "ds.elements"))]
[:li {:class (when icons? "current")}
(header-link :dashboard/icons (tr "ds.icons"))]
[:li {:class (when images? "current")}
(header-link :dashboard/images (tr "ds.images"))]
[:li {:class (when colors? "current")}
(header-link :dashboard/colors (tr "ds.colors"))]]
(ui.u/user)])))
[:header#main-bar.main-bar
[:div.main-logo
(header-link :dashboard/projects i/logo)]
[:ul.main-nav
[:li {:class (when projects? "current")}
(header-link :dashboard/projects (tr "ds.projects"))]
[:li {:class (when elements? "current")}
(header-link :dashboard/elements (tr "ds.elements"))]
[:li {:class (when icons? "current")}
(header-link :dashboard/icons (tr "ds.icons"))]
[:li {:class (when images? "current")}
(header-link :dashboard/images (tr "ds.images"))]
[:li {:class (when colors? "current")}
(header-link :dashboard/colors (tr "ds.colors"))]]
(ui.u/user)]))
(def header
(mx/component
{:render header-render
:name "header"
:mixins [rum/static
mx/reactive]}))