diff --git a/CHANGES.md b/CHANGES.md index b1173fd905..b9ecfdcc16 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 95dd6ef0c0..03c7f92d2b 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -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 { diff --git a/frontend/src/app/main/data/fonts.cljs b/frontend/src/app/main/data/fonts.cljs index 96fb4dbba8..b9593a0860 100644 --- a/frontend/src/app/main/data/fonts.cljs +++ b/frontend/src/app/main/data/fonts.cljs @@ -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))))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 35ec0839b0..c2efd50d84 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index c39f715994..2d790de2f8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -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