From 707f2b0d876a15aa6e381e106d2c4f4788529164 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 30 Sep 2016 12:21:26 +0200 Subject: [PATCH] Fix color collections loading on the colorpalette (on workspace). With additional cosmetic improvements on the namespace. --- src/uxbox/main/data/colors.cljs | 22 ++- src/uxbox/main/ui/dashboard/colors.cljs | 6 +- src/uxbox/main/ui/workspace/colorpalette.cljs | 139 ++++++++---------- 3 files changed, 84 insertions(+), 83 deletions(-) diff --git a/src/uxbox/main/data/colors.cljs b/src/uxbox/main/data/colors.cljs index 92aa670b46..cbf8b8efec 100644 --- a/src/uxbox/main/data/colors.cljs +++ b/src/uxbox/main/data/colors.cljs @@ -33,6 +33,7 @@ (declare fetch-collections) (declare collections-fetched?) +(declare conditional-fetch) (defrecord Initialize [type id] rs/UpdateEvent @@ -49,6 +50,17 @@ ;; (when (nil? (:color-colls-by-id state)) ;; (reset! st/loader true))) + rs/WatchEvent + (-apply-watch [_ state s] + (rx/of (conditional-fetch)))) + +(defn initialize + [type id] + (Initialize. type id)) + +;; --- Conditional fetch of Color Collections + +(defrecord ConditionalFetch [] rs/WatchEvent (-apply-watch [_ state s] (if (nil? (:color-colls-by-id state)) @@ -56,14 +68,12 @@ (rx/of (fetch-collections)) (->> (rx/filter collections-fetched? s) (rx/take 1) - ;; (rx/do #(reset! st/loader false)) (rx/ignore))) - (rx/empty))) - ) + (rx/empty)))) -(defn initialize - [type id] - (Initialize. type id)) +(defn conditional-fetch + [] + (ConditionalFetch.)) ;; --- Select a Collection diff --git a/src/uxbox/main/ui/dashboard/colors.cljs b/src/uxbox/main/ui/dashboard/colors.cljs index 0e081a9230..86b5d487ef 100644 --- a/src/uxbox/main/ui/dashboard/colors.cljs +++ b/src/uxbox/main/ui/dashboard/colors.cljs @@ -29,16 +29,16 @@ ;; --- Refs -(def ^:private dashboard-ref +(def dashboard-ref (-> (l/in [:dashboard :colors]) (l/derive st/state))) -(def ^:private collections-map-ref +(def collections-map-ref (-> (comp (l/key :color-colls-by-id) (ul/merge library/+color-collections-by-id+)) (l/derive st/state))) -(def ^:private collections-ref +(def collections-ref (-> (l/lens vals) (l/derive collections-map-ref))) diff --git a/src/uxbox/main/ui/workspace/colorpalette.cljs b/src/uxbox/main/ui/workspace/colorpalette.cljs index a3222393fb..bf0a7e2d74 100644 --- a/src/uxbox/main/ui/workspace/colorpalette.cljs +++ b/src/uxbox/main/ui/workspace/colorpalette.cljs @@ -6,93 +6,84 @@ ;; Copyright (c) 2015-2016 Juan de la Cruz (ns uxbox.main.ui.workspace.colorpalette - (:require [sablono.core :as html :refer-macros [html]] - [rum.core :as rum] - [beicon.core :as rx] + (:require [beicon.core :as rx] [lentes.core :as l] - [uxbox.util.rstore :as rs] [uxbox.main.state :as st] [uxbox.main.library :as library] [uxbox.main.data.workspace :as dw] [uxbox.main.data.shapes :as uds] - [uxbox.util.lens :as ul] - [uxbox.util.data :refer (read-string)] - [uxbox.util.color :refer (hex->rgb)] + [uxbox.main.data.colors :as dc] + [uxbox.main.ui.dashboard.colors :refer (collections-ref)] [uxbox.main.ui.workspace.base :as wb] [uxbox.main.ui.icons :as i] [uxbox.main.ui.keyboard :as kbd] + [uxbox.util.rstore :as rs] + [uxbox.util.lens :as ul] + [uxbox.util.data :refer (read-string)] + [uxbox.util.color :refer (hex->rgb)] [uxbox.util.dom :as dom] [uxbox.util.mixins :as mx :include-macros true])) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Lenses -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +(defn- get-selected-collection + [local collections] + (if-let [selected (:selected @local)] + (first (filter #(= selected (:id %)) collections)) + (first collections))) -;; TODO: move this lense under library ns. +(mx/defc palette-items + {:mixins [mx/static]} + [colors] + (letfn [(select-color [event color] + (dom/prevent-default event) + (if (kbd/shift? event) + (rs/emit! (uds/update-selected-shapes-stroke {:color color})) + (rs/emit! (uds/update-selected-shapes-fill {:color color}))))] + [:div.color-palette-content + (for [hex-color colors + :let [rgb-vec (hex->rgb hex-color) + rgb-color (apply str "" (interpose ", " rgb-vec))]] + [:div.color-cell {:key (str hex-color) + :on-click #(select-color % hex-color)} + [:span.color {:style {:background hex-color}}] + [:span.color-text hex-color] + [:span.color-text rgb-color]])])) -(def ^:private collections-by-id-ref - (-> (comp (l/in [:colors-by-id]) - (ul/merge library/+color-collections-by-id+)) - (l/derive st/state))) - -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Component -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - -(defn- select-collection - [local event] - (let [value (-> (dom/event->value event) - (read-string))] - (swap! local assoc :selected value))) - -(defn- select-color - [color event] - (dom/prevent-default event) - (if (kbd/shift? event) - (rs/emit! (uds/update-selected-shapes-stroke {:color color})) - (rs/emit! (uds/update-selected-shapes-fill {:color color})))) - -(defn- colorpalette-render +(mx/defcs palette + {:mixins [mx/static mx/reactive (mx/local)]} [own] (let [local (:rum/local own) - flags (mx/react wb/flags-ref) - collections-by-id (mx/react collections-by-id-ref) - collections (sort-by :name (vals collections-by-id)) - collection (if-let [collid (:selected @local)] - (get collections-by-id collid) - (first collections)) - select-collection #(select-collection local %) - close #(rs/emit! (dw/toggle-flag :colorpalette))] + collections (sort-by :name (mx/react collections-ref)) + collection (get-selected-collection local collections)] + (letfn [(select-collection [event] + (let [value (read-string (dom/event->value event))] + (swap! local assoc :selected value))) + (close [event] + (rs/emit! (dw/toggle-flag :colorpalette)))] + [:div.color-palette + [:div.color-palette-actions + [:select.input-select {:on-change select-collection} + (for [collection collections] + [:option {:key (str (:id collection)) + :value (pr-str (:id collection))} + (:name collection)])] + #_[:div.color-palette-buttons + [:div.btn-palette.edit.current i/pencil] + [:div.btn-palette.create i/close]]] + [:span.left-arrow i/arrow-slide] + (palette-items (:data collection)) + [:span.right-arrow i/arrow-slide] + [:span.close-palette {:on-click close} + i/close]]))) + +(defn- colorpalette-will-mount + [own] + (rs/emit! (dc/conditional-fetch)) + own) + +(mx/defc colorpalette + {:mixins [mx/static mx/reactive] + :will-mount colorpalette-will-mount} + [] + (let [flags (mx/react wb/flags-ref)] (when (contains? flags :colorpalette) - (html - [:div.color-palette - [:div.color-palette-actions - [:select.input-select {:on-change select-collection} - (for [collection collections] - [:option {:key (str (:id collection)) - :value (pr-str (:id collection))} - (:name collection)])] - #_[:div.color-palette-buttons - [:div.btn-palette.edit.current i/pencil] - [:div.btn-palette.create i/close]]] - [:span.left-arrow i/arrow-slide] - [:div.color-palette-content - (for [hex-color (:data collection) - :let [rgb-vec (hex->rgb hex-color) - rgb-color (apply str "" (interpose ", " rgb-vec))]] - [:div.color-cell {:key (str hex-color) - :on-click #(select-color hex-color %)} - [:span.color {:style {:background hex-color}}] - [:span.color-text hex-color] - [:span.color-text rgb-color]])] - - [:span.right-arrow i/arrow-slide] - [:span.close-palette {:on-click close} - i/close]])))) - -(def colorpalette - (mx/component - {:render colorpalette-render - :name "colorpalette" - :mixins [mx/static mx/reactive - (mx/local {})]})) + (palette))))