0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-09 06:11:23 -05:00

Add recent used fonts in font selection widget

This commit is contained in:
Eva 2022-02-01 12:55:51 +01:00 committed by Andrey Antukh
parent 37f4b83d96
commit a2c3b0926b
5 changed files with 57 additions and 9 deletions

View file

@ -6,6 +6,7 @@
### :sparkles: New features
- Add recent used fonts in font selection widget [Taiga #1381](https://tree.taiga.io/project/penpot/us/1381)
- Allow to align items relative to groups [Taiga #2533](https://tree.taiga.io/project/penpot/us/2533)
- Scroll bars [Taiga #2550](https://tree.taiga.io/project/penpot/task/2550)
- Add select layer option to context menu [Taiga #2474](https://tree.taiga.io/project/penpot/us/2474)

View file

@ -1168,9 +1168,9 @@
}
header {
padding: 15px 17px;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
.backend-filters {
@ -1225,7 +1225,7 @@
border-radius: $br-small;
color: $color-gray-20;
border: 1px solid $color-gray-30;
margin: 0px;
margin: 15px 17px;
}
.options {

View file

@ -14,6 +14,7 @@
[app.common.uuid :as uuid]
[app.main.fonts :as fonts]
[app.main.repo :as rp]
[app.util.storage :refer [storage]]
[app.util.webapi :as wa]
[beicon.core :as rx]
[cuerdas.core :as str]
@ -250,3 +251,28 @@
(let [team-id (:current-team-id state)]
(->> (rp/mutation! :delete-font-variant {:id id :team-id team-id})
(rx/ignore))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Workspace related events
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn add-recent-font
[font]
(ptk/reify ::add-recent-font
ptk/UpdateEvent
(update [_ state]
(let [recent-fonts (get-in state [:workspace-data :recent-fonts])
most-recent-fonts (into [font] (comp (remove #(= font %)) (take 3)) recent-fonts)]
(assoc-in state [:workspace-data :recent-fonts] most-recent-fonts)))
ptk/EffectEvent
(effect [_ state _]
(let [most-recent-fonts (get-in state [:workspace-data :recent-fonts])]
(swap! storage assoc ::recent-fonts most-recent-fonts)))))
(defn load-recent-fonts
[]
(ptk/reify ::load-recent-fonts
ptk/UpdateEvent
(update [_ state]
(let [saved-recent-fonts (::recent-fonts @storage)]
(assoc-in state [:workspace-data :recent-fonts] saved-recent-fonts)))))

View file

@ -188,6 +188,11 @@
(get-in state [:workspace-data :recent-colors] []))
st/state))
(def workspace-recent-fonts
(l/derived (fn [state]
(get-in state [:workspace-data :recent-fonts] []))
st/state))
(def workspace-file-typography
(l/derived (fn [state]
(when-let [file (:workspace-data state)]

View file

@ -11,8 +11,10 @@
[app.common.exceptions :as ex]
[app.common.pages :as cp]
[app.common.text :as txt]
[app.main.data.fonts :as fts]
[app.main.data.shortcuts :as dsc]
[app.main.fonts :as fonts]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input]]
@ -93,13 +95,14 @@
(mf/defc font-selector
[{:keys [on-select on-close current-font] :as props}]
(let [selected (mf/use-state current-font)
state (mf/use-state {:term "" :backends #{}})
(let [selected (mf/use-state current-font)
state (mf/use-state {:term "" :backends #{}})
flist (mf/use-ref)
input (mf/use-ref)
flist (mf/use-ref)
input (mf/use-ref)
fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts))
recent-fonts (mf/deref refs/workspace-recent-fonts)
select-next
(mf/use-callback
@ -142,6 +145,10 @@
(on-select font)
(on-close)))
]
(mf/use-effect
(fn []
(st/emit! (fts/load-recent-fonts))))
(mf/use-effect
(mf/deps fonts)
@ -183,6 +190,13 @@
:ref input
:spell-check false
:on-change on-filter-change}]
(when recent-fonts
(for [font recent-fonts]
[:& font-item {:key (:id font)
:font font
:style {}
:on-click on-select-and-close
:current? (= (:id font) (:id @selected))}]))
#_[:div.options
{:on-click #(swap! state assoc :show-options true)
@ -242,12 +256,13 @@
fonts (mf/deref fonts/fontsdb)
font (get fonts font-id)
recent-fonts (mf/deref refs/workspace-recent-fonts)
open-selector? (mf/use-state false)
change-font
(mf/use-callback
(mf/deps on-change fonts)
(mf/deps on-change fonts recent-fonts)
(fn [new-font-id]
(let [{:keys [family] :as font} (get fonts new-font-id)
{:keys [id name weight style]} (fonts/get-default-variant font)]
@ -255,7 +270,8 @@
:font-family family
:font-variant-id (or id name)
:font-weight weight
:font-style style}))))
:font-style style})
(st/emit! (fts/add-recent-font font)))))
on-font-size-change
(mf/use-callback