diff --git a/src/uxbox/ui.cljs b/src/uxbox/ui.cljs index ad46f35eb..c318fb52e 100644 --- a/src/uxbox/ui.cljs +++ b/src/uxbox/ui.cljs @@ -10,7 +10,6 @@ [uxbox.ui.users :as users] [uxbox.ui.dashboard :as dashboard] [uxbox.ui.workspace :refer (workspace)] - [uxbox.ui.util :as util] [uxbox.ui.mixins :as mx] [uxbox.ui.shapes])) @@ -34,9 +33,9 @@ ))) (def app - (util/component {:render app-render - :mixins [rum/reactive] - :name "app"})) + (mx/component {:render app-render + :mixins [rum/reactive] + :name "app"})) (defn init [] (let [app-dom (gdom/getElement "app") diff --git a/src/uxbox/ui/colorpicker.cljs b/src/uxbox/ui/colorpicker.cljs index 4c7c9ae25..74ca8cfc0 100644 --- a/src/uxbox/ui/colorpicker.cljs +++ b/src/uxbox/ui/colorpicker.cljs @@ -3,8 +3,7 @@ [rum.core :as rum] [cats.labs.lens :as l] [goog.events :as events] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util]) + [uxbox.ui.mixins :as mx]) (:import goog.events.EventType)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -13,7 +12,7 @@ (defn on-click-handler [e own callback] - (let [canvas (util/get-ref-dom own "colorpicker") + (let [canvas (mx/get-ref-dom own "colorpicker") context (.getContext canvas "2d") brect (.getBoundingClientRect canvas) x (- (.-pageX e) (.-left brect)) @@ -22,7 +21,7 @@ r (aget (.-data image) 0) g (aget (.-data image) 1) b (aget (.-data image) 2)] - (callback {:hex (util/rgb->hex [r g b]) + (callback {:hex (mx/rgb->hex [r g b]) :rgb [r g b]}))) (defn colorpicker-render @@ -38,7 +37,7 @@ (defn colorpicker-did-mount [own] - (let [canvas (util/get-ref-dom own "colorpicker") + (let [canvas (mx/get-ref-dom own "colorpicker") context (.getContext canvas "2d") img (js/Image.)] (set! (.-src img) "/images/colorspecrum-400x300.png") @@ -51,7 +50,7 @@ (events/unlistenByKey key))) (def ^:static colorpicker - (util/component + (mx/component {:render colorpicker-render :did-mount colorpicker-did-mount :will-unmout colorpicker-will-unmout diff --git a/src/uxbox/ui/dashboard.cljs b/src/uxbox/ui/dashboard.cljs index 38f1ae89e..194930c45 100644 --- a/src/uxbox/ui/dashboard.cljs +++ b/src/uxbox/ui/dashboard.cljs @@ -6,15 +6,13 @@ [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] [uxbox.ui.dom :as dom] - [uxbox.ui.util :as util] [uxbox.data.dashboard :as dd] [uxbox.ui.library-bar :as ui.library-bar] [uxbox.ui.dashboard.header :refer (header)] [uxbox.ui.dashboard.projects :as projects] [uxbox.ui.dashboard.elements :as elements] [uxbox.ui.dashboard.icons :as icons] - [uxbox.ui.dashboard.colors :as colors] - )) + [uxbox.ui.dashboard.colors :as colors])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Page: projects @@ -40,7 +38,7 @@ state) (def ^:static projects-page - (util/component + (mx/component {:render projects-page-render :will-mount projects-page-will-mount :transfer-state projects-page-transfer-state @@ -73,7 +71,7 @@ state) (def ^:static elements-page - (util/component + (mx/component {:render elements-page-render :will-mount elements-page-will-mount :transfer-state elements-page-transfer-state @@ -104,7 +102,7 @@ state) (def ^:static icons-page - (util/component + (mx/component {:render icons-page-render :will-mount icons-page-will-mount :transfer-state icons-page-transfer-state @@ -135,7 +133,7 @@ state) (def ^:static colors-page - (util/component + (mx/component {:render colors-page-render :will-mount colors-page-will-mount :transfer-state colors-page-transfer-state diff --git a/src/uxbox/ui/dashboard/colors.cljs b/src/uxbox/ui/dashboard/colors.cljs index 685ae2986..e133ba998 100644 --- a/src/uxbox/ui/dashboard/colors.cljs +++ b/src/uxbox/ui/dashboard/colors.cljs @@ -10,13 +10,13 @@ [uxbox.library :as library] [uxbox.data.dashboard :as dd] [uxbox.util.lens :as ul] + [uxbox.util.color :refer (hex->rgb)] [uxbox.ui.icons :as i] [uxbox.ui.form :as form] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.colorpicker :refer (colorpicker)] [uxbox.ui.dom :as dom] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Lenses @@ -63,7 +63,7 @@ [:span {:on-click on-delete} i/trash]])])))) (def ^:static page-title - (util/component + (mx/component {:render page-title-render :name "page-title" :mixins [mx/static rum/reactive]})) @@ -109,7 +109,7 @@ (tr "ds.num-elements" (t/c num))]])]]]))) (def ^:static nav - (util/component + (mx/component {:render nav-render :name "nav" :mixins [rum/reactive]})) @@ -137,7 +137,7 @@ {:on-click #(lightbox/open! :color-form {:coll coll})} [:span "+ New color"]]) (for [color (remove nil? (:colors coll)) - :let [color-rgb (util/hex->rgb color)]] + :let [color-rgb (hex->rgb color)]] [:div.grid-item.small-item.project-th {:key color} [:span.color-swatch {:style {:background-color color}}] [:span.color-data color] @@ -151,7 +151,7 @@ i/trash]])])]])))) (def grid - (util/component + (mx/component {:render grid-render :name "grid" :mixins [mx/static rum/reactive]})) @@ -197,7 +197,7 @@ i/close]])))) (def color-lightbox - (util/component + (mx/component {:render color-lightbox-render :name "color-lightbox" :mixins [(rum/local {}) diff --git a/src/uxbox/ui/dashboard/elements.cljs b/src/uxbox/ui/dashboard/elements.cljs index ae68ea3f6..9634e91d9 100644 --- a/src/uxbox/ui/dashboard/elements.cljs +++ b/src/uxbox/ui/dashboard/elements.cljs @@ -5,8 +5,7 @@ [uxbox.ui.icons :as i] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.dom :as dom] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Page Title @@ -22,7 +21,7 @@ [:span i/trash]]])) (def ^:static page-title - (util/component + (mx/component {:render page-title-render :name "page-title" :mixins [mx/static]})) @@ -118,7 +117,7 @@ [:div.project-th-icon.delete i/trash]]]])) (def ^:static grid - (util/component + (mx/component {:render grid-render :name "grid" :mixins [mx/static]})) @@ -145,7 +144,7 @@ i/close]])) (def new-element-lightbox - (util/component + (mx/component {:render new-element-lightbox-render :name "new-element-lightbox"})) diff --git a/src/uxbox/ui/dashboard/header.cljs b/src/uxbox/ui/dashboard/header.cljs index 36a07f279..f03394cac 100644 --- a/src/uxbox/ui/dashboard/header.cljs +++ b/src/uxbox/ui/dashboard/header.cljs @@ -10,7 +10,7 @@ [uxbox.ui.navigation :as nav] [uxbox.ui.icons :as i] [uxbox.ui.users :as ui.u] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) (def ^:static header-l (as-> (l/in [:dashboard]) $ @@ -45,7 +45,7 @@ (ui.u/user)]))) (def ^:static header - (util/component + (mx/component {:render header-render :name "header" :mixins [rum/static diff --git a/src/uxbox/ui/dashboard/icons.cljs b/src/uxbox/ui/dashboard/icons.cljs index 55f6fca8f..ee15a8270 100644 --- a/src/uxbox/ui/dashboard/icons.cljs +++ b/src/uxbox/ui/dashboard/icons.cljs @@ -14,8 +14,7 @@ [uxbox.ui.form :as form] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.dom :as dom] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Lenses @@ -46,7 +45,7 @@ i/trash]])]))) (def ^:static page-title - (util/component + (mx/component {:render page-title-render :name "page-title" :mixins [mx/static rum/reactive]})) @@ -89,7 +88,7 @@ (str (count (:icons props)) " elements")]])]]]))) (def ^:static nav - (util/component + (mx/component {:render nav-render :name "nav" :mixins [rum/reactive]})) @@ -125,7 +124,7 @@ [:div.project-th-icon.delete i/trash]]])]])))) (def grid - (util/component + (mx/component {:render grid-render :name "grid" :mixins [mx/static rum/reactive]})) @@ -155,6 +154,6 @@ i/close]])) (def new-icon-lightbox - (util/component + (mx/component {:render new-icon-lightbox-render :name "new-icon-lightbox"})) diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index 091e39a1c..34055ff9f 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -13,7 +13,7 @@ [uxbox.ui.dom :as dom] [uxbox.ui.dashboard.header :as dsh.header] [uxbox.ui.lightbox :as lightbox] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Helpers & Constants @@ -136,7 +136,7 @@ i/close]]))) (def new-project-lightbox - (util/component + (mx/component {:render new-project-lightbox-render :name "new-project-lightbox" :mixins [(rum/local +project-defaults+)]})) @@ -177,7 +177,7 @@ i/search]]))) (def menu - (util/component + (mx/component {:render menu-render :name "projects-menu" :mixins [rum/reactive]})) @@ -210,7 +210,7 @@ i/trash]]]))) (def project-item - (util/component + (mx/component {:render project-item-render :name "project" :mixins [rum/static]})) @@ -246,7 +246,7 @@ (rum/with-key (project-item item) (:id item)))]])))) (def grid - (util/component + (mx/component {:render grid-render :name "grid" :mixins [rum/reactive]})) diff --git a/src/uxbox/ui/library_bar.cljs b/src/uxbox/ui/library_bar.cljs index 37c6af5f2..542db5e2b 100644 --- a/src/uxbox/ui/library_bar.cljs +++ b/src/uxbox/ui/library_bar.cljs @@ -1,7 +1,6 @@ (ns uxbox.ui.library-bar (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] - [uxbox.ui.util :as ui] [uxbox.ui.mixins :as mx] [uxbox.ui.icons :as i])) @@ -79,7 +78,7 @@ ])) (def ^:static library-bar - (ui/component + (mx/component {:render library-bar-render :name "library-bar" :mixins [mx/static]})) diff --git a/src/uxbox/ui/lightbox.cljs b/src/uxbox/ui/lightbox.cljs index 1f2aa457f..458636d7c 100644 --- a/src/uxbox/ui/lightbox.cljs +++ b/src/uxbox/ui/lightbox.cljs @@ -1,7 +1,7 @@ (ns uxbox.ui.lightbox (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] - [uxbox.ui.util :as util] + [uxbox.ui.mixins :as mx] [uxbox.ui.keyboard :as k] [goog.events :as events]) (:import goog.events.EventType)) @@ -59,7 +59,7 @@ (render-lightbox params)]))) (def ^:static lightbox - (util/component + (mx/component {:name "lightbox" :render lightbox-render :transfer-state lightbox-transfer-state diff --git a/src/uxbox/ui/mixins.cljs b/src/uxbox/ui/mixins.cljs index 2b1ad91da..6f3a9c827 100644 --- a/src/uxbox/ui/mixins.cljs +++ b/src/uxbox/ui/mixins.cljs @@ -4,8 +4,43 @@ [cats.labs.lens :as l] [goog.dom.forms :as gforms])) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Rum Sugar +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn component + [spec] + (let [name (or (:name spec) + (str (gensym "rum-"))) + mixins (or (:mixins spec) + []) + spec (merge (dissoc spec :name :mixins) + (when-let [rfn (:render spec)] + {:render (fn [state] + [(apply rfn state (:rum/props state)) state])})) + cls (rum/build-class (conj mixins spec) name) + ctr (fn self + ([] (self {})) + ([& props] + (let [state {:rum/props props}] + (rum/element cls state nil))))] + (with-meta ctr {:rum/class cls}))) + +(defn ref-value + [own ref] + (let [component (-> own :rum/react-component) + ref-node (aget (.-refs component) ref) + dom-node (.findDOMNode js/ReactDOM ref-node)] + (.-value dom-node))) + +(defn get-ref-dom + [own ref] + (let [component (-> own :rum/react-component) + ref-node (aget (.-refs component) ref)] + (.findDOMNode js/ReactDOM ref-node))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Cursored & Lenses +;; Cursored Mixin ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn- cursored-key @@ -63,6 +98,10 @@ {:did-mount cursored-did-mount :will-unmount cursored-will-unmount}) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Local Mixin +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + (defn local "Adds an atom to component’s state that can be used as local state. Atom is stored under key `:rum/local`. @@ -85,6 +124,10 @@ (assoc state key local-state))) })) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Static Mixin +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + (def static {:should-update (fn [old-state new-state] diff --git a/src/uxbox/ui/users.cljs b/src/uxbox/ui/users.cljs index 41ab195cf..1edf08f33 100644 --- a/src/uxbox/ui/users.cljs +++ b/src/uxbox/ui/users.cljs @@ -6,7 +6,7 @@ [uxbox.state :as s] [uxbox.ui.icons :as icons] [uxbox.ui.navigation :as nav] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Menu @@ -34,7 +34,7 @@ [:span "Save & Exit"]]])) (def user-menu - (util/component + (mx/component {:render menu-render :name "user-menu" :mixins []})) @@ -65,7 +65,7 @@ (user-menu (:open @local))]))) (def user - (util/component + (mx/component {:render user-render :name "user" :mixins [rum/reactive (rum/local {:open false})]})) diff --git a/src/uxbox/ui/util.cljs b/src/uxbox/ui/util.cljs deleted file mode 100644 index 244484f50..000000000 --- a/src/uxbox/ui/util.cljs +++ /dev/null @@ -1,62 +0,0 @@ -(ns uxbox.ui.util - "A collection of sugar syntax for define react - components using rum libary." - (:refer-clojure :exclude [derive]) - (:require [rum.core :as rum])) - -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Rum Sugar -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - -(defn component - [spec] - (let [name (or (:name spec) - (str (gensym "rum-"))) - mixins (or (:mixins spec) - []) - spec (merge (dissoc spec :name :mixins) - (when-let [rfn (:render spec)] - {:render (fn [state] - [(apply rfn state (:rum/props state)) state])})) - cls (rum/build-class (conj mixins spec) name) - ctr (fn self - ([] (self {})) - ([& props] - (let [state {:rum/props props}] - (rum/element cls state nil))))] - (with-meta ctr {:rum/class cls}))) - -(defn ref-value - [own ref] - (let [component (-> own :rum/react-component) - ref-node (aget (.-refs component) ref) - dom-node (.findDOMNode js/ReactDOM ref-node)] - (.-value dom-node))) - -(defn get-ref-dom - [own ref] - (let [component (-> own :rum/react-component) - ref-node (aget (.-refs component) ref)] - (.findDOMNode js/ReactDOM ref-node))) - - -(def mount rum/mount) - -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Color Conversion -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - -(defn hex->rgb - [^string data] - (some->> (re-find #"^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$" data) - (rest) - (mapv #(js/parseInt % 16)))) - -(defn rgb->hex - [[r g b]] - (letfn [(to-hex [c] - (let [hexdata (.toString c 16)] - (if (= (count hexdata) 1) - (str "0" hexdata) - hexdata)))] - (str "#" (to-hex r) (to-hex g) (to-hex b)))) diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 221dac220..fe91c8072 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/src/uxbox/ui/workspace.cljs @@ -7,7 +7,6 @@ [uxbox.state :as st] [uxbox.data.workspace :as dw] [uxbox.ui.icons :as i] - [uxbox.ui.util :as util] [uxbox.ui.mixins :as mx] [uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.options :refer (element-opts)] @@ -35,7 +34,7 @@ [:tr [:td "y="] [:td y]]]]]))) (def coordinates - (util/component + (mx/component {:render coordenates-render :name "coordenates" :mixins [rum/reactive]})) @@ -100,7 +99,7 @@ state)) (def ^:static workspace - (util/component + (mx/component {:render workspace-render :will-mount workspace-will-mount :transfer-state workspace-transfer-state diff --git a/src/uxbox/ui/workspace/base.cljs b/src/uxbox/ui/workspace/base.cljs index f8a73d572..c9cb0744a 100644 --- a/src/uxbox/ui/workspace/base.cljs +++ b/src/uxbox/ui/workspace/base.cljs @@ -7,7 +7,6 @@ [uxbox.data.projects :as dp] [uxbox.data.workspace :as dw] [uxbox.util.lens :as ul] - [uxbox.ui.util :as util] [goog.events :as events]) (:import goog.events.EventType)) diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index 99cd9b073..4ed7390d7 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/src/uxbox/ui/workspace/canvas.cljs @@ -14,7 +14,6 @@ [uxbox.data.workspace :as dw] [uxbox.ui.mixins :as mx] [uxbox.ui.dom :as dom] - [uxbox.ui.util :as util] [uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.grid :refer (grid)] [uxbox.ui.workspace.options :refer (element-opts)]) @@ -39,7 +38,7 @@ {:x 0 :y 0 :width "100%" :height "100%" :fill "white"}])) (def background - (util/component + (mx/component {:render background-render :name "background" :mixins [mx/static]})) @@ -60,7 +59,7 @@ :height height}])))) (def ^:static selrect - (util/component + (mx/component {:render selrect-render :name "selrect" :mixins [mx/static rum/reactive]})) @@ -117,7 +116,7 @@ {:cx (+ x width) :cy (+ y height)})]]])))) (def selected-shapes - (util/component + (mx/component {:render selected-shapes-render :name "selected-shapes" :mixins [mx/static rum/reactive (mx/local {})]})) @@ -169,7 +168,7 @@ {:cx (+ x width) :cy (+ y height)})]])])))) (def shape - (util/component + (mx/component {:render shape-render :name "shape" :mixins [mx/static (mx/local {})]})) @@ -188,7 +187,7 @@ (- y offset-y)]}] (rx/push! wb/mouse-b event)))] (let [[page] (:rum/props own) - canvas (util/get-ref-dom own (str "canvas" (:id page))) + canvas (mx/get-ref-dom own (str "canvas" (:id page))) brect (.getBoundingClientRect canvas) brect [(.-left brect) (.-top brect)] key (events/listen js/document EventType.MOUSEMOVE @@ -251,7 +250,7 @@ (selrect)]])))) (def canvas - (util/component + (mx/component {:render canvas-render :did-mount canvas-did-mount :will-unmount canvas-will-unmount diff --git a/src/uxbox/ui/workspace/colorpalette.cljs b/src/uxbox/ui/workspace/colorpalette.cljs index d72490fd2..b1c208fb2 100644 --- a/src/uxbox/ui/workspace/colorpalette.cljs +++ b/src/uxbox/ui/workspace/colorpalette.cljs @@ -9,10 +9,10 @@ [uxbox.data.workspace :as dw] [uxbox.util.lens :as ul] [uxbox.util.data :refer (read-string)] + [uxbox.util.color :refer (hex->rgb)] [uxbox.ui.workspace.base :as wb] [uxbox.ui.icons :as i] [uxbox.ui.dom :as dom] - [uxbox.ui.util :as util] [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -65,7 +65,7 @@ [:span.left-arrow i/arrow-slide] [:div.color-palette-content (for [hex-color (:colors collection) - :let [rgb-vec (util/hex->rgb hex-color) + :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 %)} @@ -139,7 +139,7 @@ ;; [:span.color-text "+ Add color"]]] (def ^:static colorpalette - (util/component + (mx/component {:render colorpalette-render :name "colorpalette" :mixins [mx/static rum/reactive diff --git a/src/uxbox/ui/workspace/grid.cljs b/src/uxbox/ui/workspace/grid.cljs index 1382fca3e..913bb6ec3 100644 --- a/src/uxbox/ui/workspace/grid.cljs +++ b/src/uxbox/ui/workspace/grid.cljs @@ -2,7 +2,6 @@ (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util] [uxbox.ui.workspace.base :as wb])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -78,7 +77,7 @@ (rum/with-key line (str "tick-" tick))))])))) (def grid - (util/component + (mx/component {:render grid-render :name "grid" :mixins [mx/static rum/reactive]})) diff --git a/src/uxbox/ui/workspace/header.cljs b/src/uxbox/ui/workspace/header.cljs index 42fbd3a2e..289147892 100644 --- a/src/uxbox/ui/workspace/header.cljs +++ b/src/uxbox/ui/workspace/header.cljs @@ -9,7 +9,7 @@ [uxbox.ui.icons :as i] [uxbox.ui.users :as ui.u] [uxbox.ui.navigation :as nav] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) (defn on-download-clicked [event page] @@ -73,7 +73,7 @@ (ui.u/user)]))) (def header - (util/component + (mx/component {:render header-render :name "workspace-header" :mixins [rum/reactive]})) diff --git a/src/uxbox/ui/workspace/lateralmenu.cljs b/src/uxbox/ui/workspace/lateralmenu.cljs index 8bdeaa2f1..465c69b5a 100644 --- a/src/uxbox/ui/workspace/lateralmenu.cljs +++ b/src/uxbox/ui/workspace/lateralmenu.cljs @@ -7,7 +7,7 @@ [uxbox.data.workspace :as dw] [uxbox.ui.workspace.base :as wb] [uxbox.ui.icons :as i] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Lateral Menu @@ -45,7 +45,7 @@ i/chat]]]]))) (def ^:static lateralmenu - (util/component + (mx/component {:render lateralmenu-render :name "lateralmenu" :mixins [rum/reactive]})) diff --git a/src/uxbox/ui/workspace/options.cljs b/src/uxbox/ui/workspace/options.cljs index 9194c62e2..8f23fcb61 100644 --- a/src/uxbox/ui/workspace/options.cljs +++ b/src/uxbox/ui/workspace/options.cljs @@ -5,7 +5,6 @@ [uxbox.shapes :as shapes] [uxbox.data.workspace :as dw] [uxbox.ui.icons :as i] - [uxbox.ui.util :as util] [uxbox.ui.mixins :as mx] [uxbox.ui.dom :as dom] [uxbox.ui.workspace.base :as wb] @@ -186,7 +185,7 @@ (-render-menu menu own shape))]))) (def ^:static element-opts - (util/component + (mx/component {:render element-opts-render :name "element-opts" :mixins [rum/reactive (mx/local {})]})) diff --git a/src/uxbox/ui/workspace/pagesmngr.cljs b/src/uxbox/ui/workspace/pagesmngr.cljs index 936ca7fc4..a37898fb9 100644 --- a/src/uxbox/ui/workspace/pagesmngr.cljs +++ b/src/uxbox/ui/workspace/pagesmngr.cljs @@ -5,12 +5,11 @@ [uxbox.rstore :as rs] [uxbox.data.projects :as dp] [uxbox.data.workspace :as dw] + [uxbox.ui.workspace.base :as wb] [uxbox.ui.keyboard :as k] [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] - [uxbox.ui.workspace.base :as wb] - [uxbox.ui.dom :as dom] - [uxbox.ui.util :as util])) + [uxbox.ui.dom :as dom])) (defn- page-item-render [own parent page numpages] @@ -37,7 +36,7 @@ i/trash]]])))) (def page-item - (util/component + (mx/component {:render page-item-render :name "page-item" :mixins [rum/reactive]})) @@ -59,7 +58,7 @@ "+ Add new page"]]))) (def page-list - (util/component + (mx/component {:render page-list-render :name "page-list" :mixins [rum/reactive]})) @@ -108,7 +107,7 @@ "Cancel"]])))) (def page-form - (util/component + (mx/component {:render page-form-render :name "page-form" :mixins [rum/reactive]})) @@ -127,7 +126,7 @@ (page-list local))]))) (def pagesmngr - (util/component + (mx/component {:render pagesmngr-render :name "pagesmngr" :mixins [rum/reactive (mx/local {:edit false :form {}})]})) diff --git a/src/uxbox/ui/workspace/rules.cljs b/src/uxbox/ui/workspace/rules.cljs index f63ce7848..4b1e92da4 100644 --- a/src/uxbox/ui/workspace/rules.cljs +++ b/src/uxbox/ui/workspace/rules.cljs @@ -6,8 +6,7 @@ [uxbox.state :as s] [uxbox.ui.dom :as dom] [uxbox.ui.workspace.base :as wb] - [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util])) + [uxbox.ui.mixins :as mx])) (def ^:static zoom 1) (def ^:static padding 20) @@ -91,7 +90,7 @@ (h-line pos tick))]]))) (def h-rule - (util/component + (mx/component {:render h-rule-render :name "h-rule" :mixins [mx/static rum/reactive]})) @@ -113,7 +112,7 @@ (v-line pos tick))]]))) (def v-rule - (util/component + (mx/component {:render v-rule-render :name "v-rule" :mixins [mx/static rum/reactive]})) diff --git a/src/uxbox/ui/workspace/sidebar.cljs b/src/uxbox/ui/workspace/sidebar.cljs index dc4da6004..e969aa4c4 100644 --- a/src/uxbox/ui/workspace/sidebar.cljs +++ b/src/uxbox/ui/workspace/sidebar.cljs @@ -6,7 +6,6 @@ [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util] [uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.toolboxes :as toolboxes])) @@ -29,7 +28,7 @@ (toolboxes/layers))]]))) (def aside - (util/component + (mx/component {:render aside-render :name "aside" :mixins [rum/reactive mx/static]})) diff --git a/src/uxbox/ui/workspace/toolboxes.cljs b/src/uxbox/ui/workspace/toolboxes.cljs index 7d885d932..d2bc316a5 100644 --- a/src/uxbox/ui/workspace/toolboxes.cljs +++ b/src/uxbox/ui/workspace/toolboxes.cljs @@ -12,8 +12,7 @@ [uxbox.ui.workspace.base :as wb] [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] - [uxbox.ui.dom :as dom] - [uxbox.ui.util :as util])) + [uxbox.ui.dom :as dom])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Lenses @@ -79,7 +78,7 @@ (:icon props)])]]))) (def ^:static draw-tools - (util/component + (mx/component {:render draw-tools-render :name "draw-tools" :mixins [mx/static rum/reactive]})) @@ -102,7 +101,7 @@ (:id item))]]))) (def ^:static ^:private layer-element - (util/component + (mx/component {:render layer-element-render :name "layer-element" :mixins [mx/static]})) @@ -171,7 +170,7 @@ (def ^:static layers - (util/component + (mx/component {:render layers-render :name "layers" :mixins [rum/reactive]})) @@ -198,7 +197,7 @@ (shapes/render icon)) (def ^:static ^:private icon-wrapper - (util/component + (mx/component {:render icon-wrapper-render :name "icon-wrapper" :mixins [mx/static]})) @@ -236,7 +235,7 @@ (icon-wrapper icon)])]]))) (def ^:static icons - (util/component + (mx/component {:render icons-render :name "icons-toolbox" :mixins [rum/reactive diff --git a/src/uxbox/ui/workspace/workarea.cljs b/src/uxbox/ui/workspace/workarea.cljs index 07effc5a0..9d0a81f87 100644 --- a/src/uxbox/ui/workspace/workarea.cljs +++ b/src/uxbox/ui/workspace/workarea.cljs @@ -5,7 +5,6 @@ [uxbox.rstore :as rs] [uxbox.state :as s] [uxbox.ui.mixins :as mx] - [uxbox.ui.util :as util] [uxbox.data.workspace :as dw] [uxbox.ui.workspace.canvas :refer (canvas)] [uxbox.ui.workspace.grid :refer (grid)] @@ -45,7 +44,7 @@ (canvas page))]]))) (def viewport - (util/component + (mx/component {:render viewport-render :name "viewport" :mixins [rum/reactive]})) diff --git a/src/uxbox/util/color.cljs b/src/uxbox/util/color.cljs new file mode 100644 index 000000000..5525ce196 --- /dev/null +++ b/src/uxbox/util/color.cljs @@ -0,0 +1,17 @@ +(ns uxbox.util.color + "Color conversion utils.") + +(defn hex->rgb + [^string data] + (some->> (re-find #"^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$" data) + (rest) + (mapv #(js/parseInt % 16)))) + +(defn rgb->hex + [[r g b]] + (letfn [(to-hex [c] + (let [hexdata (.toString c 16)] + (if (= (count hexdata) 1) + (str "0" hexdata) + hexdata)))] + (str "#" (to-hex r) (to-hex g) (to-hex b))))