3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 20:16:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add minor cosmetic improvements to typography menu components

Browse source
This commit is contained in:
Andrey Antukh 2023-07-06 12:17:01 +02:00
parent 26ef8df79c
commit 0a9cad76c3
1 changed files with 33 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -57,7 +57,7 @@
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [font current? on-click style]}] [{:keys [font current? on-click style]}]
(let [item-ref (mf/use-ref) (let [item-ref (mf/use-ref)
on-click (mf/use-callback (mf/deps font) #(on-click font))] on-click (mf/use-fn (mf/deps font) #(on-click font))]
(mf/use-effect (mf/use-effect
(mf/deps current?) (mf/deps current?)
@ -108,7 +108,7 @@
(into [] (filter #(some? (get fontsdb (:id %)))))) (into [] (filter #(some? (get fontsdb (:id %))))))
select-next select-next
(mf/use-callback (mf/use-fn
(mf/deps fonts) (mf/deps fonts)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -116,7 +116,7 @@
(swap! selected get-next-font fonts))) (swap! selected get-next-font fonts)))
select-prev select-prev
(mf/use-callback (mf/use-fn
(mf/deps fonts) (mf/deps fonts)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -124,7 +124,7 @@
(swap! selected get-prev-font fonts))) (swap! selected get-prev-font fonts)))
on-key-down on-key-down
(mf/use-callback (mf/use-fn
(mf/deps fonts) (mf/deps fonts)
(fn [event] (fn [event]
(cond (cond
@ -135,54 +135,45 @@
:else (dom/focus! (mf/ref-val input))))) :else (dom/focus! (mf/ref-val input)))))
on-filter-change on-filter-change
(mf/use-callback (mf/use-fn
(mf/deps) (mf/deps)
(fn [event] (fn [event]
(let [value (dom/get-target-val event)] (let [value (dom/get-target-val event)]
(swap! state assoc :term value)))) (swap! state assoc :term value))))
on-select-and-close on-select-and-close
(mf/use-callback (mf/use-fn
(mf/deps on-select on-close) (mf/deps on-select on-close)
(fn [font] (fn [font]
(on-select font) (on-select font)
(on-close)))] (on-close)))]
(mf/use-effect (mf/with-effect []
(fn [] (st/emit! (fts/load-recent-fonts)))
(st/emit! (fts/load-recent-fonts))))
(mf/use-effect (mf/with-effect [fonts]
(mf/deps fonts)
(fn []
(let [key (events/listen js/document "keydown" on-key-down)] (let [key (events/listen js/document "keydown" on-key-down)]
#(events/unlistenByKey key)))) #(events/unlistenByKey key)))
(mf/use-effect (mf/with-effect [@selected]
(mf/deps @selected)
(fn []
(when-let [inst (mf/ref-val flist)] (when-let [inst (mf/ref-val flist)]
(when-let [index (:index @selected)] (when-let [index (:index @selected)]
(.scrollToRow ^js inst index))))) (.scrollToRow ^js inst index))))
(mf/use-effect (mf/with-effect [@selected]
(mf/deps @selected) (on-select @selected))
(fn []
(on-select @selected)))
(mf/use-effect (mf/with-effect []
(fn []
(st/emit! (dsc/push-shortcuts :typography {})) (st/emit! (dsc/push-shortcuts :typography {}))
(fn [] (fn []
(st/emit! (dsc/pop-shortcuts :typography))))) (st/emit! (dsc/pop-shortcuts :typography))))
(mf/use-effect (mf/with-effect []
(fn []
(let [index (d/index-of-pred fonts #(= (:id %) (:id current-font))) (let [index (d/index-of-pred fonts #(= (:id %) (:id current-font)))
inst (mf/ref-val flist)] inst (mf/ref-val flist)]
(tm/schedule (tm/schedule
#(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})] #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
(.scrollToPosition ^js inst offset)))))) (.scrollToPosition ^js inst offset)))))
[:div.font-selector [:div.font-selector
[:div.font-selector-dropdown [:div.font-selector-dropdown
@ -270,7 +261,7 @@
open-selector? (mf/use-state false) open-selector? (mf/use-state false)
change-font change-font
(mf/use-callback (mf/use-fn
(mf/deps on-change fonts recent-fonts) (mf/deps on-change fonts recent-fonts)
(fn [new-font-id] (fn [new-font-id]
(let [{:keys [family] :as font} (get fonts new-font-id) (let [{:keys [family] :as font} (get fonts new-font-id)
@ -283,14 +274,14 @@
(mf/set-ref-val! last-font font)))) (mf/set-ref-val! last-font font))))
on-font-size-change on-font-size-change
(mf/use-callback (mf/use-fn
(mf/deps on-change) (mf/deps on-change)
(fn [new-font-size] (fn [new-font-size]
(when-not (str/empty? new-font-size) (when-not (str/empty? new-font-size)
(on-change {:font-size (str new-font-size)})))) (on-change {:font-size (str new-font-size)}))))
on-font-variant-change on-font-variant-change
(mf/use-callback (mf/use-fn
(mf/deps font on-change) (mf/deps font on-change)
(fn [event] (fn [event]
(let [new-variant-id (dom/get-target-val event) (let [new-variant-id (dom/get-target-val event)
@ -303,7 +294,7 @@
(dom/blur! (dom/get-target event))))) (dom/blur! (dom/get-target event)))))
on-font-select on-font-select
(mf/use-callback (mf/use-fn
(mf/deps change-font) (mf/deps change-font)
(fn [font*] (fn [font*]
(when (not= font font*) (when (not= font font*)
@ -313,7 +304,7 @@
(on-blur)))) (on-blur))))
on-font-selector-close on-font-selector-close
(mf/use-callback (mf/use-fn
(fn [] (fn []
(reset! open-selector? false) (reset! open-selector? false)
(when (some? on-blur) (when (some? on-blur)
@ -476,7 +467,7 @@
open? (deref open*) open? (deref open*)
on-name-blur on-name-blur
(mf/use-callback (mf/use-fn
(mf/deps on-change) (mf/deps on-change)
(fn [event] (fn [event]
(let [name (dom/get-target-val event)] (let [name (dom/get-target-val event)]