github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-06-10 17:32:38 +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.workspace.sidebar.assets.common :as cmm]
[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.i18n :refer [tr]]
[cuerdas.core :as str]
@ -112,17 +112,17 @@
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& typography-entry
[:> typography-entry*
{:file-id file-id
:typography typography
:local? local?
:selected? (contains? selected typography-id)
:is-local local?
:is-selected (contains? selected typography-id)
:on-click on-asset-click
:on-change handle-change
:on-context-menu on-context-menu
:editing? editing?
:renaming? renaming?
:focus-name? rename?
:is-editing editing?
:is-renaming renaming?
:is-focus-name rename?
:external-open* open*
:is-asset? true}]
(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.hooks :as hooks]
[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.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -516,11 +516,11 @@
:icon i/detach}]]
typography
[:& typography-entry {:file-id typography-file-id
:typography typography
:local? (= typography-file-id file-id)
:on-detach handle-detach-typography
:on-change handle-change-typography}]
[:> typography-entry* {:file-id typography-file-id
:typography typography
:is-local (= typography-file-id file-id)
:on-detach handle-detach-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
:is-current (= (:id font) (:id selected))}])))
(mf/defc font-options
{::mf/wrap-props false}
(mf/defc font-options*
[{:keys [values on-change on-blur show-recent full-size-selector]}]
(let [{:keys [font-id font-size font-variant-id]} values
@ -375,8 +374,7 @@
:on-change on-font-variant-change
:on-blur on-blur}])]]]))
(mf/defc spacing-options
{::mf/wrap-props false}
(mf/defc spacing-options*
[{:keys [values on-change on-blur]}]
(let [{:keys [line-height
letter-spacing]} values
@ -424,8 +422,7 @@
:nillable (= :multiple letter-spacing)
:on-blur on-blur}]]]))
(mf/defc text-transform-options
{::mf/wrap-props false}
(mf/defc text-transform-options*
[{:keys [values on-change on-blur]}]
(let [text-transform (or (:text-transform values) "none")
unset-value (if (features/active-feature? @st/state "text-editor/v2") "none" "unset")
@ -459,28 +456,29 @@
(mf/defc text-options*
[{:keys [ids editor values on-change on-blur show-recent]}]
(let [full-size-selector? (and show-recent (= (mf/use-ctx ctx/sidebar) :right))
opts #js {:editor editor
:ids ids
:values values
:on-change on-change
:on-blur on-blur
:show-recent show-recent
:full-size-selector full-size-selector?}]
opts (mf/props
{:editor editor
:ids ids
:values values
:on-change on-change
:on-blur on-blur
:show-recent show-recent
:full-size-selector full-size-selector?})]
[:div {:class (stl/css-case :text-options true
:text-options-full-size full-size-selector?)}
[:> font-options opts]
[:> font-options* opts]
[:div {:class (stl/css :typography-variations)}
[:> spacing-options opts]
[:> text-transform-options opts]]]))
[:> spacing-options* opts]
[:> text-transform-options* opts]]]))
(mf/defc typography-advanced-options
(mf/defc typography-advanced-options*
{::mf/wrap [mf/memo]}
[{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur
local? navigate-to-library on-key-down file-id is-asset?]}]
[{:keys [is-visible typography is-editable name-input-ref on-close on-change on-name-blur
is-local navigate-to-library on-key-down file-id is-asset?]}]
(let [ref (mf/use-ref nil)
font-data (fonts/get-font-data (:font-id typography))
typography-id (:id typography)
show-actions? (and is-asset? editable?)
show-actions? (and is-asset? is-editable)
on-delete
(mf/use-fn
@ -501,17 +499,17 @@
(fonts/ensure-loaded! (:font-id typography))
(mf/use-effect
(mf/deps visible?)
(mf/deps is-visible)
(fn []
(when-let [node (mf/ref-val ref)]
(when visible?
(when is-visible
(dom/scroll-into-view-if-needed! node)))))
(when visible?
(when is-visible
[:div {:ref ref
:class (stl/css :advanced-options-wrapper)}
(if ^boolean editable?
(if ^boolean is-editable
[:*
[:div {:class (stl/css :font-name-wrapper)}
[: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-content)} (:text-transform typography)]]
(when-not local?
(when-not is-local
[:> button* {:variant "secondary"
:on-click navigate-to-library}
(tr "workspace.assets.typography.go-to-edit")])])])))
(mf/defc typography-entry
{::mf/wrap-props false}
[{:keys [file-id typography local? selected? on-click on-change on-detach on-context-menu editing? renaming? focus-name? external-open* is-asset?]}]
(mf/defc typography-entry*
[{: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?]}]
(let [name-input-ref (mf/use-ref)
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*)
font-data (fonts/get-font-data (:font-id typography))
name-only? (= (:name typography) (:name font-data))
@ -638,16 +635,16 @@
(when ^boolean esc?
(dom/blur! input-node)))))]
(mf/with-effect [editing?]
(when editing?
(reset! open* editing?)))
(mf/with-effect [is-editing]
(when is-editing
(reset! open* is-editing)))
(mf/with-effect [open?]
(when (some? external-open*)
(reset! external-open* open?)))
(mf/with-effect [focus-name?]
(when focus-name?
(mf/with-effect [is-focus-name]
(when is-focus-name
(tm/schedule
#(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node)
@ -655,9 +652,9 @@
[:*
[:div {:class (stl/css-case :typography-entry true
:selected ^boolean selected?)
:selected ^boolean is-selected)
:style {:display (when ^boolean open? "none")}}
(if renaming?
(if is-renaming
[:div {:class (stl/css :font-name-wrapper)}
[:div
{:class (stl/css :typography-sample-input)
@ -706,16 +703,16 @@
:on-click on-open
:icon i/menu}]]]
[:& typography-advanced-options
{:visible? open?
[:> typography-advanced-options*
{:is-visible open?
:on-close on-close
:typography typography
:editable? editable?
:is-editable editable?
:name-input-ref name-input-ref
:on-change on-change
:on-name-blur on-name-blur
:on-key-down on-key-down
:file-id file-id
:is-asset? is-asset?
:local? local?
:is-local is-local
:navigate-to-library navigate-to-library}]]))