diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 39dc4b6a36..12510697f6 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -992,3 +992,39 @@ } } } + +.multiple-typography { + margin: 0.5rem; + padding: 0.5rem; + border: 1px dashed $color-gray-30; + border-radius: 4px; + display: flex; + justify-content: space-between; + + .multiple-typography-text, + .multiple-typography-button { + font-size: $fs13; + display: flex; + align-items: center; + } + + .multiple-typography-button { + cursor: pointer; + svg { + transition: fill 0.3s; + width: 16px; + height: 16px; + fill: $color-gray-10; + } + + &:hover svg { + fill: $color-primary; + } + } + + svg { + } + + .multiple-typography-button:hover svg { + } +} diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs index 3e2725848a..46da13c61c 100644 --- a/frontend/src/app/main/data/workspace/texts.cljs +++ b/frontend/src/app/main/data/workspace/texts.cljs @@ -117,10 +117,27 @@ (->> (tree-seq map? :children node) (filter match?))) +(defonce default-text-attrs + {:name "Source Sans Pro Regular" + :font-id "sourcesanspro" + :font-family "sourcesanspro" + :font-variant-id "regular" + :font-size "14" + :font-weight "400" + :font-style "normal" + :line-height "1.2" + :letter-spacing "0" + :text-transform "none" + :text-align "left" + :text-decoration "none"}) + (defn- shape-current-values [shape pred attrs] (let [root (:content shape) - nodes (nodes-seq pred root)] + nodes (->> (nodes-seq pred root) + (map #(if (is-text-node? %) + (merge default-text-attrs %) + %)))] (geom/get-attrs-multi nodes attrs))) (defn current-text-values diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs index b51ff9daf3..b4f544b084 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/multiple.cljs @@ -15,14 +15,7 @@ [app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]] - [app.main.ui.workspace.sidebar.options.text :refer [text-fill-attrs - text-font-attrs - text-align-attrs - text-spacing-attrs - text-valign-attrs - text-decoration-attrs - text-transform-attrs - text-menu]])) + [app.main.ui.workspace.sidebar.options.text :as ot])) (defn get-shape-attrs [shape attrs text-attrs convert-attrs extract-fn] @@ -47,88 +40,34 @@ text-ids (map :id (filter #(= (:type %) :text) shapes)) other-ids (map :id (filter #(not= (:type %) :text) shapes)) + extract (fn [{:keys [attrs text-attrs convert-attrs extract-fn]}] + (let [mapfn + (fn [shape] + (get-shape-attrs shape + attrs + text-attrs + convert-attrs + extract-fn))] + (geom/get-attrs-multi (map mapfn shapes) (or attrs text-attrs)))) + measure-values (geom/get-attrs-multi shapes measure-attrs) - fill-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - fill-attrs - text-fill-attrs - fill-attrs - dwt/current-text-values) - shapes) - fill-attrs) + fill-values (extract {:attrs fill-attrs + :text-attrs ot/text-fill-attrs + :convert-attrs fill-attrs + :extract-fn dwt/current-text-values}) - stroke-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - stroke-attrs - nil - nil - nil) - shapes) - stroke-attrs) + stroke-values (extract {:attrs stroke-attrs}) - font-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-font-attrs - nil - dwt/current-text-values) - shapes) - text-font-attrs) + root-values (extract {:text-attrs ot/root-attrs + :extract-fn dwt/current-root-values}) - align-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-align-attrs - nil - dwt/current-paragraph-values) - shapes) - text-align-attrs) + paragraph-values (extract {:text-attrs ot/paragraph-attrs + :extract-fn dwt/current-paragraph-values}) - spacing-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-spacing-attrs - nil - dwt/current-text-values) - shapes) - text-spacing-attrs) - - valign-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-valign-attrs - nil - dwt/current-root-values) - shapes) - text-valign-attrs) - - decoration-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-decoration-attrs - nil - dwt/current-text-values) - shapes) - text-decoration-attrs) - - transform-values - (geom/get-attrs-multi (map #(get-shape-attrs - % - nil - text-transform-attrs - nil - dwt/current-text-values) - shapes) - text-transform-attrs)] + text-values (extract {:text-attrs ot/text-attrs + :extract-fn dwt/current-text-values})] [:* [:& measures-menu {:ids ids :type :multiple @@ -141,14 +80,11 @@ :type :multiple :values stroke-values}]) (when-not (empty? text-ids) - [:& text-menu {:ids text-ids - :type :multiple - :editor nil - :values (merge font-values - align-values - spacing-values - valign-values - decoration-values - transform-values) - :shapes shapes}])])) + [:& ot/text-menu {:ids text-ids + :type :multiple + :editor nil + :values (merge root-values + paragraph-values + text-values) + :shapes shapes}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs index 6c1dbd35aa..08a211efe7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs @@ -89,8 +89,8 @@ to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll))) - grow-type (->> shapes (map :grow-type) (into #{}) to-single-value) - + grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value) + vertical-align (or vertical-align "top") handle-change-grow @@ -178,6 +178,7 @@ editor values shapes] :as props}] + (let [locale (mf/deref i18n/locale) typographies (mf/deref refs/workspace-file-typography) shared-libs (mf/deref refs/workspace-libraries) @@ -202,12 +203,14 @@ typography (cond (and (:typography-ref-id values) + (not= (:typography-ref-id values) :multiple) (:typography-ref-file values)) (-> shared-libs (get-in [(:typography-ref-file values) :data :typography (:typography-ref-id values)]) (assoc :file-id (:typography-ref-file values))) - (:typography-ref-id values) + (and (:typography-ref-id values) + (not= (:typography-ref-id values) :multiple)) (get typographies (:typography-ref-id values))) @@ -239,6 +242,7 @@ opts #js {:editor editor :ids ids :values values + :shapes shapes :on-change (fn [attrs] (run! #(emit-update! % attrs) ids)) :locale locale}] @@ -248,10 +252,19 @@ [:span label] [:div.add-page {:on-click handle-click} i/close]] - (if typography + (cond + typography [:& typography-entry {:typography typography :on-deattach handle-deattach-typography :on-change handle-change-typography}] + + (= (:typography-ref-id values) :multiple) + [:div.multiple-typography + [:div.multiple-typography-text "Multiple typographies"] + [:div.multiple-typography-button {:on-click handle-deattach-typography + :title "Unlink all typographies"} i/unchain]] + + :else [:> typography-options opts]) [:div.element-set-content @@ -277,7 +290,6 @@ converted-fill-values {:fill-color (:fill fill-values) :fill-opacity (:opacity fill-values)} - text-values (merge (dwt/current-root-values {:editor editor :shape shape diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs index dbb1c9eb4d..1670695596 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs @@ -98,7 +98,7 @@ [:div.row-flex (let [size-options [8 9 10 11 12 14 18 24 36 48 72] - size-options (if (= font-size :multiple) (into [{:value "" :label "--"}] size-options) size-options)] + size-options (if (= font-size :multiple) (into [""] size-options) size-options)] [:& editable-select {:value (attr->string font-size) :class "input-option size-option" @@ -108,9 +108,10 @@ :on-change on-font-size-change}]) [:select.input-select.variant-option - {:value (attr->string font-variant-id) + {:disabled (= font-id :multiple) + :value (attr->string font-variant-id) :on-change on-font-variant-change} - (when (= font-size :multiple) + (when (or (= font-id :multiple) (= font-variant-id :multiple)) [:option {:value ""} "--"]) (for [variant (:variants font)] [:option {:value (:id variant)