From 29e6cdd8a42e7c64e635c8ba90e3f928e5c1a8d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Fri, 3 Jul 2020 15:52:13 +0200 Subject: [PATCH] :tada: Display properly multiple text properties --- common/uxbox/common/geom/shapes.cljc | 16 ++++ .../src/uxbox/main/data/workspace/texts.cljs | 7 +- frontend/src/uxbox/main/refs.cljs | 2 +- .../ui/workspace/sidebar/options/exports.cljs | 2 - .../ui/workspace/sidebar/options/group.cljs | 6 +- .../workspace/sidebar/options/measures.cljs | 2 +- .../workspace/sidebar/options/multiple.cljs | 23 +---- .../ui/workspace/sidebar/options/stroke.cljs | 4 +- .../ui/workspace/sidebar/options/text.cljs | 86 ++++++++++++------- 9 files changed, 83 insertions(+), 65 deletions(-) diff --git a/common/uxbox/common/geom/shapes.cljc b/common/uxbox/common/geom/shapes.cljc index ae0dd5973..c2e61e545 100644 --- a/common/uxbox/common/geom/shapes.cljc +++ b/common/uxbox/common/geom/shapes.cljc @@ -855,3 +855,19 @@ :else srect)))) +(defn get-attrs-multi + [shapes attrs] + ;; Extract some attributes of a list of shapes. + ;; For each attribute, if the value is the same in all shapes, + ;; wll take this value. If there is any shape that is different, + ;; the value of the attribute will be the keyword :multiple. + (let [combine-value #(if (= %1 %2) %1 :multiple) + + combine-values (fn [attrs shape values] + (map #(combine-value (get shape %) (get values %)) attrs)) + + reducer (fn [result shape] + (zipmap attrs (combine-values attrs shape result)))] + + (reduce reducer (select-keys (first shapes) attrs) (rest shapes)))) + diff --git a/frontend/src/uxbox/main/data/workspace/texts.cljs b/frontend/src/uxbox/main/data/workspace/texts.cljs index bce53d5e0..9be809d4f 100644 --- a/frontend/src/uxbox/main/data/workspace/texts.cljs +++ b/frontend/src/uxbox/main/data/workspace/texts.cljs @@ -16,6 +16,7 @@ [clojure.walk :as walk] [goog.object :as gobj] [potok.core :as ptk] + [uxbox.common.geom.shapes :as geom] [uxbox.main.data.workspace.common :as dwc] [uxbox.main.fonts :as fonts] [uxbox.util.object :as obj])) @@ -119,10 +120,8 @@ (defn- shape-current-values [shape pred attrs] (let [root (:content shape) - nodes (nodes-seq pred root) - match (first nodes)] - (when match - (select-keys match attrs)))) + nodes (nodes-seq pred root)] + (geom/get-attrs-multi nodes attrs))) (defn current-text-values [{:keys [editor default attrs shape]}] diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs index 16ebbf2b9..56a6d8167 100644 --- a/frontend/src/uxbox/main/refs.cljs +++ b/frontend/src/uxbox/main/refs.cljs @@ -124,7 +124,7 @@ (let [selected (get-in state [:workspace-local :selected]) page-id (get-in state [:workspace-page :id]) objects (get-in state [:workspace-data page-id :objects])] - (->> selected (mapv #(get objects %)))))] + (mapv #(get objects %) selected)))] (l/derived selector st/state =))) (def selected-shapes-with-children diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs index 57aadb9e3..f20b68deb 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/exports.cljs @@ -67,8 +67,6 @@ (fn [] (swap! loading? not)))))) - _ (prn "exports-menu" exports) - add-export (mf/use-callback (mf/deps shape) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs index 004b3fc48..13cfab2b2 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs @@ -11,8 +11,8 @@ (ns uxbox.main.ui.workspace.sidebar.options.group (:require [rumext.alpha :as mf] + [uxbox.common.geom.shapes :as geom] [uxbox.main.refs :as refs] - [uxbox.main.ui.workspace.sidebar.options.multiple :refer [get-multi]] [uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]] [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]] [uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]])) @@ -23,8 +23,8 @@ children (mf/deref (refs/objects-by-id child-ids)) type (:type shape) measure-values (select-keys shape measure-attrs) - fill-values (get-multi children fill-attrs) - stroke-values (get-multi children stroke-attrs)] + fill-values (geom/get-attrs-multi children fill-attrs) + stroke-values (geom/get-attrs-multi children stroke-attrs)] [:* [:& measures-menu {:ids [(:id shape)] :type type diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs index bc16697de..5d60fb32a 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs @@ -25,7 +25,7 @@ (def measure-attrs [:proportion-lock :width :height :x :y :rotation :rx :ry :selrect]) -(defn attr->string [attr values] +(defn- attr->string [attr values] (let [value (attr values)] (if (= value :multiple) "" diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/multiple.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/multiple.cljs index c22c14878..3e59a51e1 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/multiple.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/multiple.cljs @@ -10,34 +10,19 @@ (ns uxbox.main.ui.workspace.sidebar.options.multiple (:require [rumext.alpha :as mf] + [uxbox.common.geom.shapes :as geom] [uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]] [uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]] [uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]])) -(defn get-multi - [shapes attrs] - ;; Extract some attributes of a list of shapes. - ;; For each attribute, if the value is the same in all shapes, - ;; wll take this value. If there is any shape that is different, - ;; the value of the attribute will be the keyword :multiple. - (let [combine-value #(if (= %1 %2) %1 :multiple) - - combine-values (fn [attrs shape values] - (map #(combine-value (get shape %) (get values %)) attrs)) - - reducer (fn [result shape] - (zipmap attrs (combine-values attrs shape result)))] - - (reduce reducer (select-keys (first shapes) attrs) (rest shapes)))) - (mf/defc options {::mf/wrap [mf/memo]} [{:keys [shapes] :as props}] (let [ids (map :id shapes) - measure-values (get-multi shapes measure-attrs) - fill-values (get-multi shapes fill-attrs) - stroke-values (get-multi shapes stroke-attrs)] + measure-values (geom/get-attrs-multi shapes measure-attrs) + fill-values (geom/get-attrs-multi shapes fill-attrs) + stroke-values (geom/get-attrs-multi shapes stroke-attrs)] [:* [:& measures-menu {:ids ids :type :multiple diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index 1c15d1596..3e25a4f46 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -44,14 +44,14 @@ (identical? (:stroke-opacity new-values) (:stroke-opacity old-values))))) -(defn width->string [width] +(defn- width->string [width] (if (= width :multiple) "" (str (-> width (d/coalesce 1) (math/round))))) -(defn enum->string [value] +(defn- enum->string [value] (if (= value :multiple) "" (pr-str value))) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs index 0f9e0349b..ae4e929e7 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs @@ -25,6 +25,11 @@ [uxbox.util.i18n :as i18n :refer [tr t]] ["slate" :refer [Transforms]])) +(defn- attr->string [value] + (if (= value :multiple) + "" + (str value))) + (def ^:private editor-ref (l/derived :editor refs/workspace-local)) @@ -44,15 +49,12 @@ (:name font)])]]) (mf/defc font-options - [{:keys [editor shape] :as props}] + [{:keys [editor shape locale] :as props}] (let [selection (mf/use-ref) {:keys [font-id font-size - font-variant-id] - :or {font-id "sourcesanspro" - font-size "14" - font-variant-id "regular"}} + font-variant-id]} (dwt/current-text-values {:editor editor :shape shape @@ -60,6 +62,10 @@ :font-size :font-variant-id]}) + font-id (or font-id "sourcesanspro") + font-size (or font-size "14") + font-variant-id (or font-variant-id "regular") + fonts (mf/deref fonts/fontsdb) font (get fonts font-id) @@ -77,18 +83,20 @@ on-font-family-change (fn [event] (let [id (-> (dom/get-target event) - (dom/get-value)) - font (get fonts id)] - (fonts/ensure-loaded! id (partial change-font id)))) + (dom/get-value))] + (when-not (str/empty? id) + (let [font (get fonts id)] + (fonts/ensure-loaded! id (partial change-font id)))))) on-font-size-change (fn [event] (let [val (-> (dom/get-target event) (dom/get-value))] - (st/emit! (dwt/update-text-attrs - {:id (:id shape) - :editor editor - :attrs {:font-size val}})))) + (when-not (str/empty? val) + (st/emit! (dwt/update-text-attrs + {:id (:id shape) + :editor editor + :attrs {:font-size val}}))))) on-font-variant-change (fn [event] @@ -103,19 +111,22 @@ :font-family (:family font) :font-variant-id id :font-weight (:weight variant) - :font-style (:style variant)}})))) - ] + :font-style (:style variant)}}))))] [:* [:div.row-flex - [:select.input-select {:value font-id + [:select.input-select {:value (attr->string font-id) :on-change on-font-family-change} + (when (= font-id :multiple) + [:option {:value ""} (t locale "settings.multiple")]) [:& font-select-optgroups]]] [:div.row-flex [:div.editable-select - [:select.input-select {:value font-size + [:select.input-select {:value (attr->string font-size) :on-change on-font-size-change} + (when (= font-size :multiple) + [:option {:value ""} "--"]) [:option {:value "8"} "8"] [:option {:value "9"} "9"] [:option {:value "10"} "10"] @@ -131,11 +142,13 @@ :min "0" :max "200" :value font-size - :on-change on-font-size-change - }]] + :placeholder "--" + :on-change on-font-size-change}]] - [:select.input-select {:value font-variant-id + [:select.input-select {:value (attr->string font-variant-id) :on-change on-font-variant-change} + (when (= font-size :multiple) + [:option {:value ""} "--"]) (for [variant (:variants font)] [:option {:value (:id variant) :key (pr-str variant)} @@ -144,13 +157,14 @@ (mf/defc text-align-options [{:keys [editor shape locale] :as props}] - (let [{:keys [text-align] - :or {text-align "left"}} + (let [{:keys [text-align]} (dwt/current-paragraph-values {:editor editor :shape shape :attrs [:text-align]}) + text-align (or text-align "left") + on-change (fn [event type] (st/emit! (dwt/update-paragraph-attrs @@ -204,16 +218,17 @@ (mf/defc spacing-options [{:keys [editor shape locale] :as props}] - (let [{:keys [letter-spacing - line-height] - :or {line-height "1.2" - letter-spacing "0"}} + (let [{:keys [line-height + letter-spacing]} (dwt/current-text-values {:editor editor :shape shape :attrs [:line-height :letter-spacing]}) + line-height (or line-height "1.2") + letter-spacing (or letter-spacing "0") + on-change (fn [event attr] (let [val (-> (dom/get-target event) @@ -232,7 +247,8 @@ :step "0.1" :min "0" :max "200" - :value line-height + :value (attr->string line-height) + :placeholder (t locale "settings.multiple") :on-change #(on-change % :line-height)}]] [:div.input-icon @@ -244,7 +260,8 @@ :step "0.1" :min "0" :max "200" - :value letter-spacing + :value (attr->string letter-spacing) + :placeholder (t locale "settings.multiple") :on-change #(on-change % :letter-spacing)}]]])) ;; (mf/defc box-sizing-options @@ -262,13 +279,14 @@ (mf/defc vertical-align-options [{:keys [editor locale shape] :as props}] - (let [{:keys [vertical-align] - :or {vertical-align "top"}} + (let [{:keys [vertical-align]} (dwt/current-root-values {:editor editor :shape shape :attrs [:vertical-align]}) + vertical-align (or vertical-align "top") + on-change (fn [event type] (st/emit! (dwt/update-root-attrs @@ -297,13 +315,14 @@ (mf/defc text-decoration-options [{:keys [editor locale shape] :as props}] - (let [{:keys [text-decoration] - :or {text-decoration "none"}} + (let [{:keys [text-decoration]} (dwt/current-text-values {:editor editor :shape shape :attrs [:text-decoration]}) + text-decoration (or text-decoration "none") + on-change (fn [event type] (st/emit! (dwt/update-text-attrs @@ -333,13 +352,14 @@ (mf/defc text-transform-options [{:keys [editor locale shape] :as props}] - (let [{:keys [text-transform] - :or {text-transform "none"}} + (let [{:keys [text-transform]} (dwt/current-text-values {:editor editor :shape shape :attrs [:text-transform]}) + text-transform (or text-transform "none") + on-change (fn [event type] (st/emit! (dwt/update-text-attrs