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:
parent
37f4b83d96
commit
a2c3b0926b
5 changed files with 57 additions and 9 deletions
|
@ -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)
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)))))
|
||||
|
|
|
@ -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)]
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue