mirror of
https://github.com/penpot/penpot.git
synced 2025-03-17 18:21:23 -05:00
✨ Manage options for a text with different styles
This commit is contained in:
Andrés Moya
parent
63eec77044
commit
0951ba95f0
2 changed files with 162 additions and 138 deletions
|
|
@ -24,9 +24,12 @@
|
|||
[np op]
|
||||
(let [new-ids (obj/get np "ids")
|
||||
old-ids (obj/get op "ids")
|
||||
new-editor (obj/get np "editor")
|
||||
old-editor (obj/get op "editor")
|
||||
new-values (obj/get np "values")
|
||||
old-values (obj/get op "values")]
|
||||
(and (= new-ids old-ids)
|
||||
(= new-editor old-editor)
|
||||
(identical? (:fill-color new-values)
|
||||
(:fill-color old-values))
|
||||
(identical? (:fill-opacity new-values)
|
||||
|
|
@ -34,7 +37,7 @@
|
|||
|
||||
(mf/defc fill-menu
|
||||
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
|
||||
[{:keys [ids type values] :as props}]
|
||||
[{:keys [ids type values editor] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
shapes (deref (refs/objects-by-id ids))
|
||||
|
|
@ -61,7 +64,7 @@
|
|||
(when-not (empty? text-ids)
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor nil
|
||||
:editor editor
|
||||
:attrs new-attrs}))
|
||||
text-ids))))]
|
||||
[:div.element-set
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.store :as st]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.fonts :as fonts]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
|
|
@ -27,6 +27,8 @@
|
|||
|
||||
(def text-fill-attrs [:fill :opacity])
|
||||
|
||||
(def text-font-attrs [:font-id :font-family :font-variant-id :font-size :font-weight :font-style])
|
||||
|
||||
(defn- attr->string [value]
|
||||
(if (= value :multiple)
|
||||
""
|
||||
|
|
@ -51,18 +53,10 @@
|
|||
(:name font)])]])
|
||||
|
||||
(mf/defc font-options
|
||||
[{:keys [editor shape locale] :as props}]
|
||||
(let [selection (mf/use-ref)
|
||||
|
||||
{:keys [font-id
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [font-id
|
||||
font-size
|
||||
font-variant-id]}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:font-id
|
||||
:font-size
|
||||
:font-variant-id]})
|
||||
font-variant-id]} values
|
||||
|
||||
font-id (or font-id "sourcesanspro")
|
||||
font-size (or font-size "14")
|
||||
|
|
@ -72,48 +66,51 @@
|
|||
font (get fonts font-id)
|
||||
|
||||
change-font
|
||||
(fn [id]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:font-id id
|
||||
:font-family (:family (get fonts id))
|
||||
:font-variant-id nil
|
||||
:font-weight nil
|
||||
:font-style nil}})))
|
||||
(fn [new-font-id]
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:font-id new-font-id
|
||||
:font-family (:family (get fonts new-font-id))
|
||||
:font-variant-id nil
|
||||
:font-weight nil
|
||||
:font-style nil}}))
|
||||
ids))
|
||||
|
||||
on-font-family-change
|
||||
(fn [event]
|
||||
(let [id (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when-not (str/empty? id)
|
||||
(let [font (get fonts id)]
|
||||
(fonts/ensure-loaded! id (partial change-font id))))))
|
||||
(let [new-font-id (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when-not (str/empty? new-font-id)
|
||||
(let [font (get fonts new-font-id)]
|
||||
(fonts/ensure-loaded! new-font-id (partial change-font new-font-id))))))
|
||||
|
||||
on-font-size-change
|
||||
(fn [event]
|
||||
(let [val (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when-not (str/empty? val)
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:font-size val}})))))
|
||||
(let [new-font-size (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(when-not (str/empty? new-font-size)
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:font-size new-font-size}}))
|
||||
ids))))
|
||||
|
||||
on-font-variant-change
|
||||
(fn [event]
|
||||
(let [id (-> (dom/get-target event)
|
||||
(dom/get-value))
|
||||
variant (d/seek #(= id (:id %)) (:variants font))]
|
||||
(let [new-variant-id (-> (dom/get-target event)
|
||||
(dom/get-value))
|
||||
variant (d/seek #(= new-variant-id (:id %)) (:variants font))]
|
||||
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:font-id (:id font)
|
||||
:font-family (:family font)
|
||||
:font-variant-id id
|
||||
:font-weight (:weight variant)
|
||||
:font-style (:style variant)}}))))]
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:font-id (:id font)
|
||||
:font-family (:family font)
|
||||
:font-variant-id new-variant-id
|
||||
:font-weight (:weight variant)
|
||||
:font-style (:style variant)}}))
|
||||
ids)))]
|
||||
|
||||
[:*
|
||||
[:div.row-flex
|
||||
|
|
@ -158,21 +155,18 @@
|
|||
|
||||
|
||||
(mf/defc text-align-options
|
||||
[{:keys [editor shape locale] :as props}]
|
||||
(let [{:keys [text-align]}
|
||||
(dwt/current-paragraph-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-align]})
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [text-align]} values
|
||||
|
||||
text-align (or text-align "left")
|
||||
|
||||
on-change
|
||||
(fn [event type]
|
||||
(st/emit! (dwt/update-paragraph-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:text-align type}})))]
|
||||
(fn [event new-align]
|
||||
(run! #(st/emit! (dwt/update-paragraph-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:text-align new-align}}))
|
||||
ids))]
|
||||
|
||||
;; --- Align
|
||||
[:div.row-flex.align-icons
|
||||
|
|
@ -198,47 +192,23 @@
|
|||
i/text-align-justify]]))
|
||||
|
||||
|
||||
(mf/defc text-fill-options
|
||||
[{:keys [editor shape] :as props}]
|
||||
(let [text-color (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs text-fill-attrs})
|
||||
|
||||
current-color {:value (:fill text-color)
|
||||
:opacity (:opacity text-color)}
|
||||
|
||||
handle-change-color
|
||||
(fn [value opacity]
|
||||
(st/emit! (dwt/update-text-attrs {:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:fill value
|
||||
:opacity opacity}})))]
|
||||
|
||||
[:& color-row {:color current-color
|
||||
:on-change handle-change-color}]))
|
||||
|
||||
(mf/defc spacing-options
|
||||
[{:keys [editor shape locale] :as props}]
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [line-height
|
||||
letter-spacing]}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:line-height
|
||||
:letter-spacing]})
|
||||
letter-spacing]} values
|
||||
|
||||
line-height (or line-height "1.2")
|
||||
letter-spacing (or letter-spacing "0")
|
||||
|
||||
on-change
|
||||
(fn [event attr]
|
||||
(let [val (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {attr val}}))))]
|
||||
(let [new-spacing (-> (dom/get-target event)
|
||||
(dom/get-value))]
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {attr new-spacing}}))
|
||||
ids)))]
|
||||
[:div.row-flex
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
|
|
@ -280,21 +250,18 @@
|
|||
;; i/auto-fix]])
|
||||
|
||||
(mf/defc vertical-align-options
|
||||
[{:keys [editor locale shape] :as props}]
|
||||
(let [{:keys [vertical-align]}
|
||||
(dwt/current-root-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:vertical-align]})
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [vertical-align]} values
|
||||
|
||||
vertical-align (or vertical-align "top")
|
||||
|
||||
on-change
|
||||
(fn [event type]
|
||||
(st/emit! (dwt/update-root-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:vertical-align type}})))]
|
||||
(fn [event new-align]
|
||||
(run! #(st/emit! (dwt/update-root-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:vertical-align new-align}}))
|
||||
ids))]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.font-options.vertical-align")]
|
||||
|
|
@ -316,21 +283,18 @@
|
|||
i/align-bottom]]]))
|
||||
|
||||
(mf/defc text-decoration-options
|
||||
[{:keys [editor locale shape] :as props}]
|
||||
(let [{:keys [text-decoration]}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-decoration]})
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [text-decoration]} values
|
||||
|
||||
text-decoration (or text-decoration "none")
|
||||
|
||||
on-change
|
||||
(fn [event type]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:text-decoration type}})))]
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:text-decoration type}}))
|
||||
ids))]
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.font-options.decoration")]
|
||||
[:div.align-icons
|
||||
|
|
@ -353,21 +317,18 @@
|
|||
i/strikethrough]]]))
|
||||
|
||||
(mf/defc text-transform-options
|
||||
[{:keys [editor locale shape] :as props}]
|
||||
(let [{:keys [text-transform]}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-transform]})
|
||||
[{:keys [editor ids values locale] :as props}]
|
||||
(let [{:keys [text-transform]} values
|
||||
|
||||
text-transform (or text-transform "none")
|
||||
|
||||
on-change
|
||||
(fn [event type]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:text-transform type}})))]
|
||||
(run! #(st/emit! (dwt/update-text-attrs
|
||||
{:id %
|
||||
:editor editor
|
||||
:attrs {:text-transform type}}))
|
||||
ids))]
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.font-options.text-case")]
|
||||
[:div.align-icons
|
||||
|
|
@ -394,34 +355,94 @@
|
|||
|
||||
(mf/defc text-menu
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [shape] :as props}]
|
||||
(let [id (:id shape)
|
||||
local (mf/deref refs/workspace-local)
|
||||
editor (get-in local [:editors (:id shape)])
|
||||
locale (mf/deref i18n/locale)]
|
||||
[{:keys [ids
|
||||
type
|
||||
editor
|
||||
fill-values
|
||||
font-values
|
||||
align-values
|
||||
spacing-values
|
||||
valign-values
|
||||
decoration-values
|
||||
transform-values] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)]
|
||||
[:*
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.fill")]
|
||||
[:div.element-set-content
|
||||
[:& text-fill-options {:editor editor :shape shape}]]]
|
||||
[:& fill-menu {:ids ids :type type :values fill-values :editor editor}]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.font-options")]
|
||||
[:div.element-set-content
|
||||
[:& font-options {:editor editor :locale locale :shape shape}]
|
||||
[:& text-align-options {:editor editor :locale locale :shape shape}]
|
||||
[:& spacing-options {:editor editor :locale locale :shape shape}]
|
||||
[:& vertical-align-options {:editor editor :locale locale :shape shape}]
|
||||
[:& text-decoration-options {:editor editor :locale locale :shape shape}]
|
||||
[:& text-transform-options {:editor editor :locale locale :shape shape}]]]]))
|
||||
[:& font-options {:editor editor :ids ids :values font-values :locale locale}]
|
||||
[:& text-align-options {:editor editor :ids ids :values align-values :locale locale}]
|
||||
[:& spacing-options {:editor editor :ids ids :values spacing-values :locale locale}]
|
||||
[:& vertical-align-options {:editor editor :ids ids :values valign-values :locale locale}]
|
||||
[:& text-decoration-options {:editor editor :ids ids :values decoration-values :locale locale}]
|
||||
[:& text-transform-options {:editor editor :ids ids :values transform-values :locale locale}]]]]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
(let [ids [(:id shape)]
|
||||
type (:type shape)
|
||||
measure-values (select-keys shape measure-attrs)]
|
||||
|
||||
local (deref refs/workspace-local)
|
||||
editor (get-in local [:editors (:id shape)])
|
||||
|
||||
_ (println "hay editor" (clj->js (not (nil? editor))))
|
||||
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
|
||||
fill-values (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:fill
|
||||
:opacity]})
|
||||
|
||||
converted-fill-values {:fill-color (:fill fill-values)
|
||||
:fill-opacity (:opacity fill-values)}
|
||||
|
||||
font-values (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:font-id
|
||||
:font-size
|
||||
:font-variant-id]})
|
||||
|
||||
align-values (dwt/current-paragraph-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-align]})
|
||||
|
||||
spacing-values (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:line-height
|
||||
:letter-spacing]})
|
||||
|
||||
valign-values (dwt/current-root-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:vertical-align]})
|
||||
|
||||
decoration-values (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-decoration]})
|
||||
|
||||
transform-values (dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:text-transform]})]
|
||||
[:div
|
||||
[:& measures-menu {:ids ids
|
||||
:type type
|
||||
:values measure-values}]
|
||||
[:& text-menu {:shape shape}]]))
|
||||
[:& text-menu {:ids ids
|
||||
:type type
|
||||
:editor editor
|
||||
:fill-values converted-fill-values
|
||||
:font-values font-values
|
||||
:align-values align-values
|
||||
:spacing-values spacing-values
|
||||
:valign-values valign-values
|
||||
:decoration-values decoration-values
|
||||
:transform-values transform-values}]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue