github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-10 14:09:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Migrate typography sidebar option components to modern syntax (#9443)

Browse Source
This commit is contained in:
Dexterity 2026-06-10 12:16:13 -04:00 committed by GitHub
parent ccd34a2705
commit 920a05de74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 51 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View File

@ -23,7 +23,7 @@
[app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.groups :as grp] [app.main.ui.workspace.sidebar.assets.groups :as grp]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]] [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -112,17 +112,17 @@
:on-drag-over dom/prevent-default :on-drag-over dom/prevent-default
:on-drop on-drop} :on-drop on-drop}
[:& typography-entry [:> typography-entry*
{:file-id file-id {:file-id file-id
:typography typography :typography typography
:local? local? :is-local local?
:selected? (contains? selected typography-id) :is-selected (contains? selected typography-id)
:on-click on-asset-click :on-click on-asset-click
:on-change handle-change :on-change handle-change
:on-context-menu on-context-menu :on-context-menu on-context-menu
:editing? editing? :is-editing editing?
:renaming? renaming? :is-renaming renaming?
:focus-name? rename? :is-focus-name rename?
:external-open* open* :external-open* open*
:is-asset? true}] :is-asset? true}]
(when ^boolean dragging? (when ^boolean dragging?

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View File

@ -30,7 +30,7 @@
[app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.token-typography-row :refer [token-typography-row*]] [app.main.ui.workspace.sidebar.options.menus.token-typography-row :refer [token-typography-row*]]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options* typography-entry]] [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options* typography-entry*]]
[app.main.ui.workspace.tokens.management.forms.controls.utils :as csu] [app.main.ui.workspace.tokens.management.forms.controls.utils :as csu]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -516,11 +516,11 @@
:icon i/detach}]] :icon i/detach}]]
typography typography
[:& typography-entry {:file-id typography-file-id [:> typography-entry* {:file-id typography-file-id
:typography typography :typography typography
:local? (= typography-file-id file-id) :is-local (= typography-file-id file-id)
:on-detach handle-detach-typography :on-detach handle-detach-typography
:on-change handle-change-typography}] :on-change handle-change-typography}]

79
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@ -230,8 +230,7 @@
:on-click on-select :on-click on-select
:is-current (= (:id font) (:id selected))}]))) :is-current (= (:id font) (:id selected))}])))
(mf/defc font-options (mf/defc font-options*
{::mf/wrap-props false}
[{:keys [values on-change on-blur show-recent full-size-selector]}] [{:keys [values on-change on-blur show-recent full-size-selector]}]
(let [{:keys [font-id font-size font-variant-id]} values (let [{:keys [font-id font-size font-variant-id]} values
@ -375,8 +374,7 @@
:on-change on-font-variant-change :on-change on-font-variant-change
:on-blur on-blur}])]]])) :on-blur on-blur}])]]]))
(mf/defc spacing-options (mf/defc spacing-options*
{::mf/wrap-props false}
[{:keys [values on-change on-blur]}] [{:keys [values on-change on-blur]}]
(let [{:keys [line-height (let [{:keys [line-height
letter-spacing]} values letter-spacing]} values
@ -424,8 +422,7 @@
:nillable (= :multiple letter-spacing) :nillable (= :multiple letter-spacing)
:on-blur on-blur}]]])) :on-blur on-blur}]]]))
(mf/defc text-transform-options (mf/defc text-transform-options*
{::mf/wrap-props false}
[{:keys [values on-change on-blur]}] [{:keys [values on-change on-blur]}]
(let [text-transform (or (:text-transform values) "none") (let [text-transform (or (:text-transform values) "none")
unset-value (if (features/active-feature? @st/state "text-editor/v2") "none" "unset") unset-value (if (features/active-feature? @st/state "text-editor/v2") "none" "unset")
@ -459,28 +456,29 @@
(mf/defc text-options* (mf/defc text-options*
[{:keys [ids editor values on-change on-blur show-recent]}] [{:keys [ids editor values on-change on-blur show-recent]}]
(let [full-size-selector? (and show-recent (= (mf/use-ctx ctx/sidebar) :right)) (let [full-size-selector? (and show-recent (= (mf/use-ctx ctx/sidebar) :right))
opts #js {:editor editor opts (mf/props
:ids ids {:editor editor
:values values :ids ids
:on-change on-change :values values
:on-blur on-blur :on-change on-change
:show-recent show-recent :on-blur on-blur
:full-size-selector full-size-selector?}] :show-recent show-recent
:full-size-selector full-size-selector?})]
[:div {:class (stl/css-case :text-options true [:div {:class (stl/css-case :text-options true
:text-options-full-size full-size-selector?)} :text-options-full-size full-size-selector?)}
[:> font-options opts] [:> font-options* opts]
[:div {:class (stl/css :typography-variations)} [:div {:class (stl/css :typography-variations)}
[:> spacing-options opts] [:> spacing-options* opts]
[:> text-transform-options opts]]])) [:> text-transform-options* opts]]]))
(mf/defc typography-advanced-options (mf/defc typography-advanced-options*
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur [{:keys [is-visible typography is-editable name-input-ref on-close on-change on-name-blur
local? navigate-to-library on-key-down file-id is-asset?]}] is-local navigate-to-library on-key-down file-id is-asset?]}]
(let [ref (mf/use-ref nil) (let [ref (mf/use-ref nil)
font-data (fonts/get-font-data (:font-id typography)) font-data (fonts/get-font-data (:font-id typography))
typography-id (:id typography) typography-id (:id typography)
show-actions? (and is-asset? editable?) show-actions? (and is-asset? is-editable)
on-delete on-delete
(mf/use-fn (mf/use-fn
@ -501,17 +499,17 @@
(fonts/ensure-loaded! (:font-id typography)) (fonts/ensure-loaded! (:font-id typography))
(mf/use-effect (mf/use-effect
(mf/deps visible?) (mf/deps is-visible)
(fn [] (fn []
(when-let [node (mf/ref-val ref)] (when-let [node (mf/ref-val ref)]
(when visible? (when is-visible
(dom/scroll-into-view-if-needed! node))))) (dom/scroll-into-view-if-needed! node)))))
(when visible? (when is-visible
[:div {:ref ref [:div {:ref ref
:class (stl/css :advanced-options-wrapper)} :class (stl/css :advanced-options-wrapper)}
(if ^boolean editable? (if ^boolean is-editable
[:* [:*
[:div {:class (stl/css :font-name-wrapper)} [:div {:class (stl/css :font-name-wrapper)}
[:div {:class (stl/css :typography-sample-input) [:div {:class (stl/css :typography-sample-input)
@ -588,19 +586,18 @@
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.text-transform")] [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.text-transform")]
[:span {:class (stl/css :info-content)} (:text-transform typography)]] [:span {:class (stl/css :info-content)} (:text-transform typography)]]
(when-not local? (when-not is-local
[:> button* {:variant "secondary" [:> button* {:variant "secondary"
:on-click navigate-to-library} :on-click navigate-to-library}
(tr "workspace.assets.typography.go-to-edit")])])]))) (tr "workspace.assets.typography.go-to-edit")])])])))
(mf/defc typography-entry (mf/defc typography-entry*
{::mf/wrap-props false} [{:keys [file-id typography is-local is-selected on-click on-change on-detach on-context-menu is-editing is-renaming is-focus-name external-open* is-asset?]}]
[{:keys [file-id typography local? selected? on-click on-change on-detach on-context-menu editing? renaming? focus-name? external-open* is-asset?]}]
(let [name-input-ref (mf/use-ref) (let [name-input-ref (mf/use-ref)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
editable? (and local? (not read-only?)) editable? (and is-local (not read-only?))
open* (mf/use-state editing?) open* (mf/use-state is-editing)
open? (deref open*) open? (deref open*)
font-data (fonts/get-font-data (:font-id typography)) font-data (fonts/get-font-data (:font-id typography))
name-only? (= (:name typography) (:name font-data)) name-only? (= (:name typography) (:name font-data))
@ -638,16 +635,16 @@
(when ^boolean esc? (when ^boolean esc?
(dom/blur! input-node)))))] (dom/blur! input-node)))))]
(mf/with-effect [editing?] (mf/with-effect [is-editing]
(when editing? (when is-editing
(reset! open* editing?))) (reset! open* is-editing)))
(mf/with-effect [open?] (mf/with-effect [open?]
(when (some? external-open*) (when (some? external-open*)
(reset! external-open* open?))) (reset! external-open* open?)))
(mf/with-effect [focus-name?] (mf/with-effect [is-focus-name]
(when focus-name? (when is-focus-name
(tm/schedule (tm/schedule
#(when-let [node (mf/ref-val name-input-ref)] #(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node) (dom/focus! node)
@ -655,9 +652,9 @@
[:* [:*
[:div {:class (stl/css-case :typography-entry true [:div {:class (stl/css-case :typography-entry true
:selected ^boolean selected?) :selected ^boolean is-selected)
:style {:display (when ^boolean open? "none")}} :style {:display (when ^boolean open? "none")}}
(if renaming? (if is-renaming
[:div {:class (stl/css :font-name-wrapper)} [:div {:class (stl/css :font-name-wrapper)}
[:div [:div
{:class (stl/css :typography-sample-input) {:class (stl/css :typography-sample-input)
@ -706,16 +703,16 @@
:on-click on-open :on-click on-open
:icon i/menu}]]] :icon i/menu}]]]
[:& typography-advanced-options [:> typography-advanced-options*
{:visible? open? {:is-visible open?
:on-close on-close :on-close on-close
:typography typography :typography typography
:editable? editable? :is-editable editable?
:name-input-ref name-input-ref :name-input-ref name-input-ref
:on-change on-change :on-change on-change
:on-name-blur on-name-blur :on-name-blur on-name-blur
:on-key-down on-key-down :on-key-down on-key-down
:file-id file-id :file-id file-id
:is-asset? is-asset? :is-asset? is-asset?
:local? local? :is-local is-local
:navigate-to-library navigate-to-library}]])) :navigate-to-library navigate-to-library}]]))