Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 04:49:03 -05:00
Code Issues Activity

🐛 Fix font button height and fonts dropdown

Browse source
This commit is contained in:
Eva 2024-01-08 18:35:06 +01:00 • committed by Andrey Antukh
parent 5a012d4e33
commit 4bb93d9c7e
2 changed files with 89 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
frontend/src/app/main/ui/dashboard/fonts.cljs
View file

@ -7,13 +7,15 @@
(ns app.main.ui.dashboard.fonts (ns app.main.ui.dashboard.fonts
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data.macros :as dm]
[app.common.media :as cm] [app.common.media :as cm]
[app.main.data.fonts :as df] [app.main.data.fonts :as df]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.repo :as rp] [app.main.repo :as rp]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
[app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -53,33 +55,34 @@
(mf/defc fonts-upload (mf/defc fonts-upload
[{:keys [team installed-fonts] :as props}] [{:keys [team installed-fonts] :as props}]
(let [fonts (mf/use-state {}) (let [fonts* (mf/use-state {})
fonts (deref fonts*)
input-ref (mf/use-ref) input-ref (mf/use-ref)
uploading (mf/use-state #{}) uploading (mf/use-state #{})
on-click handle-click
(mf/use-callback #(dom/click (mf/ref-val input-ref))) (mf/use-fn #(dom/click (mf/ref-val input-ref)))
on-selected handle-selected
(mf/use-callback (mf/use-fn
(mf/deps team installed-fonts) (mf/deps team installed-fonts)
(fn [blobs] (fn [blobs]
(->> (df/process-upload blobs (:id team)) (->> (df/process-upload blobs (:id team))
(rx/subs! (fn [result] (rx/subs! (fn [result]
(swap! fonts df/merge-and-group-fonts installed-fonts result)) (swap! fonts* df/merge-and-group-fonts installed-fonts result))
(fn [error] (fn [error]
(js/console.error "error" error)))))) (js/console.error "error" error))))))
on-upload on-upload
(mf/use-callback (mf/use-fn
(mf/deps team) (mf/deps team)
(fn [item] (fn [item]
(swap! uploading conj (:id item)) (swap! uploading conj (:id item))
(->> (rp/cmd! :create-font-variant item) (->> (rp/cmd! :create-font-variant item)
(rx/delay-at-least 2000) (rx/delay-at-least 2000)
(rx/subs! (fn [font] (rx/subs! (fn [font]
(swap! fonts dissoc (:id item)) (swap! fonts* dissoc (:id item))
(swap! uploading disj (:id item)) (swap! uploading disj (:id item))
(st/emit! (df/add-font font))) (st/emit! (df/add-font font)))
(fn [error] (fn [error]
@ -92,25 +95,25 @@
on-blur-name on-blur-name
(fn [id event] (fn [id event]
(let [name (dom/get-target-val event)] (let [name (dom/get-target-val event)]
(swap! fonts df/rename-and-regroup id name installed-fonts))) (swap! fonts* df/rename-and-regroup id name installed-fonts)))
on-delete on-delete
(mf/use-callback (mf/use-fn
(mf/deps team) (mf/deps team)
(fn [{:keys [id] :as item}] (fn [{:keys [id] :as item}]
(swap! fonts dissoc id))) (swap! fonts* dissoc id)))
on-dismiss-all on-dismiss-all
(fn [items] (fn [items]
(run! on-delete items)) (run! on-delete items))
problematic-fonts? (some :height-warning? (vals @fonts)) problematic-fonts? (some :height-warning? (vals fonts))
handle-upload-all handle-upload-all
(mf/use-callback (mf/deps @fonts) #(on-upload-all (vals @fonts))) (mf/use-fn (mf/deps fonts) #(on-upload-all (vals fonts)))
handle-dismiss-all handle-dismiss-all
(mf/use-callback (mf/deps @fonts) #(on-dismiss-all (vals @fonts)))] (mf/use-fn (mf/deps fonts) #(on-dismiss-all (vals fonts)))]
[:div {:class (stl/css :dashboard-fonts-upload)} [:div {:class (stl/css :dashboard-fonts-upload)}
[:div {:class (stl/css :dashboard-fonts-hero)} [:div {:class (stl/css :dashboard-fonts-hero)}
@ -118,45 +121,47 @@
[:h2 (tr "labels.upload-custom-fonts")] [:h2 (tr "labels.upload-custom-fonts")]
[:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}] [:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
[:button [:button {:class (stl/css :btn-primary)
{:class (stl/css :btn-primary) :on-click handle-click
:on-click on-click :tab-index "0"}
:tab-index "0"}
[:span (tr "labels.add-custom-font")] [:span (tr "labels.add-custom-font")]
[:& file-uploader {:input-id "font-upload" [:& file-uploader {:input-id "font-upload"
:accept cm/str-font-types :accept cm/str-font-types
:multi true :multi true
:ref input-ref :ref input-ref
:on-selected on-selected}]] :on-selected handle-selected}]]
[:div {:class (stl/css :banner)} [:div {:class (stl/css :banner)}
[:div {:class (stl/css :icon)} i/msg-info] [:div {:class (stl/css :icon)} i/msg-neutral-refactor]
[:div {:class (stl/css :content)} [:div {:class (stl/css :content)}
[:& i18n/tr-html {:tag-name "span" [:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.hero-text2"}]]] :label "dashboard.fonts.hero-text2"}]]]
(when problematic-fonts? (when problematic-fonts?
[:div {:class (stl/css :banner :warning)} [:div {:class (stl/css :banner :warning)}
[:div {:class (stl/css :icon)} i/msg-warning] [:div {:class (stl/css :icon)} i/msg-warning-refactor]
[:div {:class (stl/css :content)} [:div {:class (stl/css :content)}
[:& i18n/tr-html {:tag-name "span" [:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.warning-text"}]]])]] :label "dashboard.fonts.warning-text"}]]])]]
[:* [:*
(when (some? (vals @fonts)) (when (some? (vals fonts))
[:div {:class (stl/css :font-item :table-row)} [:div {:class (stl/css :font-item :table-row)}
[:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))] [:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals fonts))))]
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
[:button {:class (stl/css :btn-primary) [:button {:class (stl/css :btn-primary)
:on-click handle-upload-all :data-test "upload-all"} :on-click handle-upload-all
:data-test "upload-all"}
[:span (tr "dashboard.fonts.upload-all")]] [:span (tr "dashboard.fonts.upload-all")]]
[:button {:class (stl/css :btn-secondary) [:button {:class (stl/css :btn-secondary)
:on-click handle-dismiss-all :data-test "dismiss-all"} :on-click handle-dismiss-all
:data-test "dismiss-all"}
[:span (tr "dashboard.fonts.dismiss-all")]]]]) [:span (tr "dashboard.fonts.dismiss-all")]]]])
(for [item (sort-by :font-family (vals @fonts))] (for [item (sort-by :font-family (vals fonts))]
(let [uploading? (contains? @uploading (:id item))] (let [uploading? (contains? @uploading (:id item))]
[:div {:class (stl/css :font-item :table-row) :key (:id item)} [:div {:class (stl/css :font-item :table-row)
:key (:id item)}
[:div {:class (stl/css :table-field :family)} [:div {:class (stl/css :table-field :family)}
[:input {:type "text" [:input {:type "text"
:on-blur #(on-blur-name (:id item) %) :on-blur #(on-blur-name (:id item) %)
@ -167,44 +172,45 @@
[:div {:class (stl/css :table-field :filenames)} [:div {:class (stl/css :table-field :filenames)}
(for [item (:names item)] (for [item (:names item)]
[:span item])] [:span {:key (dm/str "name-" item)} item])]
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
(when (:height-warning? item) (when (:height-warning? item)
[:span {:class (stl/css :icon :failure)} i/msg-warning]) [:span {:class (stl/css :icon :failure)} i/msg-warning-refactor])
[:button [:button {:on-click #(on-upload item)
{:on-click #(on-upload item) :class (stl/css-case :btn-primary true
:class (stl/css-case :btn-primary true :upload-button true
:upload-button true :disabled uploading?)
:disabled uploading?) :disabled uploading?}
:disabled uploading?}
(if uploading? (if uploading?
(tr "labels.uploading") (tr "labels.uploading")
(tr "labels.upload"))] (tr "labels.upload"))]
[:span {:class (stl/css :icon :close) [:span {:class (stl/css :icon :close)
:on-click #(on-delete item)} i/close]]]))]])) :on-click #(on-delete item)} i/close-refactor]]]))]]))
(mf/defc installed-font (mf/defc installed-font
[{:keys [font-id variants] :as props}] [{:keys [font-id variants] :as props}]
(let [font (first variants) (let [font (first variants)
variants (sort-by (fn [item] variants (sort-by (fn [item]
[(:font-weight item) [(:font-weight item)
(if (= "normal" (:font-style item)) 1 2)]) (if (= "normal" (:font-style item)) 1 2)])
variants) variants)
open-menu? (mf/use-state false)
edit? (mf/use-state false)
state* (mf/use-var (:font-family font))
font-family (deref state*)
open-menu? (mf/use-state false)
edit? (mf/use-state false)
state (mf/use-var (:font-family font))
on-change on-change
(fn [event] (fn [event]
(reset! state (dom/get-target-val event))) (reset! state* (dom/get-target-val event)))
on-save on-save
(fn [_] (fn [_]
(let [font-family @state] (let [font-family font-family]
(when-not (str/blank? font-family) (when-not (str/blank? font-family)
(st/emit! (df/update-font (st/emit! (df/update-font
{:id font-id {:id font-id
@ -219,7 +225,7 @@
on-cancel on-cancel
(fn [_] (fn [_]
(reset! edit? false) (reset! edit? false)
(reset! state (:font-family font))) (reset! state* (:font-family font)))
delete-font-fn delete-font-fn
(fn [] (st/emit! (df/delete-font font-id))) (fn [] (st/emit! (df/delete-font font-id)))
@ -250,43 +256,51 @@
[:div {:class (stl/css :table-field :family)} [:div {:class (stl/css :table-field :family)}
(if @edit? (if @edit?
[:input {:type "text" [:input {:type "text"
:default-value @state :default-value font-family
:on-key-down on-key-down :on-key-down on-key-down
:on-change on-change}] :on-change on-change}]
[:span (:font-family font)])] [:span (:font-family font)])]
[:div {:class (stl/css :table-field :variants)} [:div {:class (stl/css :table-field :variants)}
(for [item variants] (for [item variants]
[:div {:class (stl/css :variant)} [:div {:class (stl/css :variant)
:key (dm/str (:id item) "-variant")}
[:span {:class (stl/css :label)} [:span {:class (stl/css :label)}
[:& font-variant-display-name {:variant item}]] [:& font-variant-display-name {:variant item}]]
[:span [:span
{:class (stl/css :icon :close) {:class (stl/css :icon :close)
:on-click #(on-delete-variant (:id item))} :on-click #(on-delete-variant (:id item))}
i/plus]])] i/add-refactor]])]
(if @edit? (if @edit?
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
[:button [:button
{:disabled (str/blank? @state) {:disabled (str/blank? font-family)
:on-click on-save :on-click on-save
:class (stl/css-case :btn-primary true :class (stl/css-case :btn-primary true
:btn-disabled (str/blank? @state))} :btn-disabled (str/blank? font-family))}
(tr "labels.save")] (tr "labels.save")]
[:button {:class (stl/css :icon :close) [:button {:class (stl/css :icon :close)
:on-click on-cancel} i/close]] :on-click on-cancel} i/close-refactor]]
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon) [:span {:class (stl/css :icon)
:on-click #(reset! open-menu? true)} i/actions] :on-click #(reset! open-menu? true)}
[:& context-menu i/menu-refactor]
{:on-close #(reset! open-menu? false)
:show @open-menu? [:& context-menu-a11y {:on-close #(reset! open-menu? false)
:fixed? false :show @open-menu?
:top -15 :fixed? false
:left -115 :min-width? true
:options [[(tr "labels.edit") #(reset! edit? true) nil "font-edit"] :top -15
[(tr "labels.delete") on-delete nil "font-delete"]]}]])])) :left -115
:options [{:option-name (tr "labels.edit")
:id "font-edit"
:option-handler #(reset! edit? true)}
{:option-name (tr "labels.delete")
:id "font-delete"
:option-handler on-delete}]
:workspace? false}]])]))
(mf/defc installed-fonts (mf/defc installed-fonts
@ -297,7 +311,7 @@
#(str/includes? (str/lower (:font-family %)) @sterm) #(str/includes? (str/lower (:font-family %)) @sterm)
on-change on-change
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(let [val (dom/get-target-val event)] (let [val (dom/get-target-val event)]
(reset! sterm (str/lower val)))))] (reset! sterm (str/lower val)))))]
@ -317,7 +331,7 @@
(for [[font-id variants] (->> (vals fonts) (for [[font-id variants] (->> (vals fonts)
(filter matches?) (filter matches?)
(group-by :font-id))] (group-by :font-id))]
[:& installed-font {:key (str font-id) [:& installed-font {:key (dm/str font-id "-installed")
:font-id font-id :font-id font-id
:variants variants}]) :variants variants}])
@ -328,7 +342,7 @@
:else :else
[:div {:class (stl/css :fonts-placeholder)} [:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/text] [:div {:class (stl/css :icon)} i/text-refactor]
[:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])])) [:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])]))
(mf/defc fonts-page (mf/defc fonts-page

17
frontend/src/app/main/ui/dashboard/fonts.scss
View file

@ -17,6 +17,8 @@
.btn-primary { .btn-primary {
font-size: $fs-11; font-size: $fs-11;
height: $s-32;
min-width: $s-100;
} }
} }
@ -150,7 +152,7 @@
&:hover { &:hover {
.icon svg { .icon svg {
fill: $df-secondary; stroke: $df-secondary;
} }
} }
} }
@ -187,21 +189,20 @@
&.failure { &.failure {
margin-right: $s-12; margin-right: $s-12;
svg { svg {
fill: var(--warning-color); stroke: var(--warning-color);
} }
} }
svg { svg {
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
fill: $df-secondary; stroke: $df-secondary;
} }
&.close { &.close {
background: none; background: none;
border: none; border: none;
svg { svg {
transform: rotate(45deg); stroke: $df-secondary;
fill: $df-secondary;
} }
} }
} }
@ -273,7 +274,7 @@
padding-top: $s-12; padding-top: $s-12;
svg { svg {
fill: $df-secondary; stroke: $df-secondary;
height: $s-20; height: $s-20;
width: $s-20; width: $s-20;
} }
@ -287,7 +288,7 @@
&.warning { &.warning {
background-color: $db-cuaternary; background-color: $db-cuaternary;
.icon svg { .icon svg {
fill: var(--warning-color); stroke: var(--warning-color);
} }
} }
} }
@ -310,7 +311,7 @@
width: 100%; width: 100%;
.icon svg { .icon svg {
fill: $df-secondary; stroke: $df-secondary;
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
} }