diff --git a/src/uxbox/data/shapes.cljs b/src/uxbox/data/shapes.cljs index 86141958c..ecf708968 100644 --- a/src/uxbox/data/shapes.cljs +++ b/src/uxbox/data/shapes.cljs @@ -52,6 +52,12 @@ :x2 [sc/integer] :y2 [sc/integer]}) +(def ^:static +shape-font-attrs-schema+ + {:family [sc/string] + :style [sc/string] + :weight [sc/string] + :size [sc/number]}) + (def ^:static +shape-radius-attrs-schema+ {:rx [sc/integer] :ry [sc/integer]}) @@ -159,6 +165,19 @@ (when color {:fill color}) (when opacity {:opacity opacity}))))) +(defn update-font-attrs + [sid {:keys [family style weight size] :as opts}] + (sc/validate! +shape-font-attrs-schema+ opts) + (reify + rs/UpdateEvent + (-apply-update [_ state] + (update-in state [:shapes-by-id sid :font] + merge + (when family {:family family}) + (when style {:style style}) + (when weight {:weight weight}) + (when size {:size size}))))) + (defn update-stroke-attrs [sid {:keys [color opacity type width] :as opts}] (sc/validate! +shape-stroke-attrs-schema+ opts) diff --git a/src/uxbox/library.cljs b/src/uxbox/library.cljs index 8033f92c8..a8d4ad791 100644 --- a/src/uxbox/library.cljs +++ b/src/uxbox/library.cljs @@ -8,24 +8,35 @@ (ns uxbox.library (:require [uxbox.library.colors :as colors] [uxbox.library.icons :as icons] + [uxbox.library.fonts :as fonts] [uxbox.util.data :refer (index-by-id)])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Colors ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(def ^:static +color-collections+ +(def ^:const +color-collections+ colors/+collections+) -(def ^:static +color-collections-by-id+ +(def ^:const +color-collections-by-id+ (index-by-id colors/+collections+)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Icons ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(def ^:static +icon-collections+ +(def ^:const +icon-collections+ icons/+collections+) -(def ^:static +icon-collections-by-id+ +(def ^:const +icon-collections-by-id+ (index-by-id icons/+collections+)) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Fonts +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:const +fonts+ + fonts/+collections+) + +(def ^:const +fonts-by-id+ + (index-by-id fonts/+collections+)) diff --git a/src/uxbox/ui/shapes/text.cljs b/src/uxbox/ui/shapes/text.cljs index 74ac12d8a..91b05dbcc 100644 --- a/src/uxbox/ui/shapes/text.cljs +++ b/src/uxbox/ui/shapes/text.cljs @@ -105,7 +105,6 @@ local (:rum/local own)] (html [:g.shape {:class (when selected? "selected") - ;; :on-double-click #(on-double-click own %) :ref "main" :on-mouse-down on-mouse-down :on-mouse-up on-mouse-up} @@ -135,8 +134,16 @@ [:font-size]) (defn- build-style - [{:keys [font-size]}] - (merge {} (when font-size {:fontSize (str font-size "px")}))) + [{:keys [font]}] + (let [{:keys [family weight style size] + :or {family "sourcesanspro" + weight "normal" + style "normal" + size 16}} font] + {:fontSize (str size "px") + :fontFamily family + :fontWeight weight + :fontStyle style})) (defmethod uusc/render-shape :builtin/text [{:keys [id x1 y1 x2 y2 content drawing? editing?] :as shape}] diff --git a/src/uxbox/ui/workspace/colorpalette.cljs b/src/uxbox/ui/workspace/colorpalette.cljs index 721a71bdd..ff7bab258 100644 --- a/src/uxbox/ui/workspace/colorpalette.cljs +++ b/src/uxbox/ui/workspace/colorpalette.cljs @@ -27,6 +27,8 @@ ;; Lenses ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; TODO: move this lense under library ns. + (def ^:static ^:private collections-by-id-l (-> (comp (l/in [:colors-by-id]) (ul/merge library/+color-collections-by-id+)) diff --git a/src/uxbox/ui/workspace/sidebar/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs index 09eefee93..b7c570472 100644 --- a/src/uxbox/ui/workspace/sidebar/options.cljs +++ b/src/uxbox/ui/workspace/sidebar/options.cljs @@ -498,52 +498,66 @@ ))) (defmethod -render-menu :menu/text - [menu own shape] + [menu own {:keys [font] :as shape}] (letfn [(on-font-family-change [event] (let [value (dom/event->value event) - sid (:id shape)] - (println "on-font-family-change" value))) + sid (:id shape) + params {:family (read-string value) + :weight "normal" + :style "normal"}] + (rs/emit! (uds/update-font-attrs sid params)))) (on-font-size-change [event] (let [value (dom/event->value event) - value (parse-int value) + params {:size (parse-int value)} sid (:id shape)] - (println "on-font-size-change" value))) - (on-font-weight-change [event] + (rs/emit! (uds/update-font-attrs sid params)))) + (on-font-style-change [event] (let [value (dom/event->value event) - value (read-string value) - sid (:id shape)] - (println "on-font-size-change" value)))] - (html - [:div.element-set {:key (str (:id menu))} - [:div.element-set-title (:name menu)] - [:div.element-set-content - [:span "Font family"] - [:div.row-flex - [:select.input-select {:value (:font-family shape "sans-serif") - :on-change on-font-family-change} - [:option {:value "sans-serif"} "Sans Serif"] - [:option {:value "monospace"} "Monospace"]]] + [weight style] (read-string value) + sid (:id shape) + params {:style style + :weight weight}] + (rs/emit! (uds/update-font-attrs sid params))))] + (let [{:keys [family style weight size] + :or {family "sourcesanspro" + style "normal" + weight "normal" + size 16}} font + styles (:styles (first (filter #(= (:id %) family) library/+fonts+)))] + (html + [:div.element-set {:key (str (:id menu))} + [:div.element-set-title (:name menu)] + [:div.element-set-content + [:span "Font family"] + [:div.row-flex + [:select.input-select {:value (pr-str family) + :on-change on-font-family-change} + (for [font library/+fonts+] + [:option {:value (pr-str (:id font)) + :key (:id font)} (:name font)])]] + [:span "Size and Weight"] + [:div.row-flex + [:input.input-text + {:placeholder "Font Size" + :type "number" + :min "0" + :max "200" + :value size + :on-change on-font-size-change}] + [:select.input-select {:value (pr-str [weight style]) + :on-change on-font-style-change} + (for [style styles + :let [data (mapv #(get style %) [:weight :style])]] + [:option {:value (pr-str data) + :key (:name style)} (:name style)])]] - [:span "Size and Weight"] - [:div.row-flex - [:input.input-text - {:placeholder "Font Size" - :type "number" - :min "0" - :max "200" - :value (:font-size shape "16") - :on-change on-font-size-change}] - [:select.input-select {:value (:font-weight shape ":normal") - :on-change on-font-weight-change} - [:option {:value ":normal"} "Normal"] - [:option {:value ":bold"} "Solid"]]] - [:span "Text align"] - [:div.row-flex.align-icons - [:span.current i/align-left] - [:span i/align-right] - [:span i/align-center] - [:span i/align-justify] - ]]]))) + [:span "Text align"] + [:div.row-flex.align-icons + [:span.current i/align-left] + [:span i/align-right] + [:span i/align-center] + [:span i/align-justify] + ]]])))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Components