Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 06:48:19 -05:00
Code Issues Activity

✨ Scroll to selected font size or closest in font size selector

Browse source
This commit is contained in:
Eva 2022-02-22 17:34:51 +01:00 • committed by Andrey Antukh
parent 07e8d110a2
commit e139cba621
5 changed files with 32 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -5,6 +5,7 @@
### :boom: Breaking changes
### :sparkles: New features
- Scroll to selected size in font size selector [Taiga #2825](https://tree.taiga.io/project/penpot/us/2825)
- Duplicate artboards create new flows if needed [Taiga #2221](https://tree.taiga.io/project/penpot/issue/2221)
- Add new invitations section [Taiga #2797](https://tree.taiga.io/project/penpot/us/2797)
- Ability to add multiple fills to a shape [Taiga #1394](https://tree.taiga.io/project/penpot/us/1394)

2
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -355,6 +355,8 @@
& li.checked-element {
padding-left: 0;
display: flex;
justify-content: space-around;
& span {
margin: 0;

32
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -33,6 +33,7 @@
(math/finite? val)))
emit-blur? (mf/use-ref nil)
font-size-wrapper-ref (mf/use-ref)
open-dropdown #(swap! state assoc :is-open? true)
close-dropdown #(swap! state assoc :is-open? false)
@ -109,7 +110,7 @@
(and (num? max-val) (> new-value max-val)) max-val
:else new-value)]
(set-value new-value)))))))
(set-value new-value)))))))
handle-focus
(mf/use-callback
@ -127,13 +128,23 @@
(mf/use-effect
(mf/deps value (:current-value @state))
#(when (not= value (:current-value @state))
#(when (not= (str value) (:current-value @state))
(reset! state {:current-value value})))
(mf/use-effect
(mf/deps (:is-open? @state))
(fn []
(mf/set-ref-val! emit-blur? (not (:is-open? @state)))))
(mf/with-effect [(:is-open? @state)]
(let [wrapper-node (mf/ref-val font-size-wrapper-ref)
node (dom/get-element-by-class "checked-element is-selected" wrapper-node)
nodes (dom/get-elements-by-class "checked-element-value" wrapper-node)
closest (fn [a b] (first (sort-by #(math/abs (- % b)) a)))
closest-value (str (closest options value))]
(when (:is-open? @state)
(if (some? node)
(dom/scroll-into-view-if-needed! node)
(some->> nodes
(d/seek #(= closest-value (dom/get-inner-text %)))
(dom/scroll-into-view-if-needed!)))))
(mf/set-ref-val! emit-blur? (not (:is-open? @state))))
[:div.editable-select {:class class
:ref on-node-load}
@ -151,14 +162,15 @@
[:ul.custom-select-dropdown {:style {:position "fixed"
:top (:top @state)
:left (:left @state)
:bottom (:bottom @state)}}
:bottom (:bottom @state)
:ref font-size-wrapper-ref}}
(for [[index item] (map-indexed vector options)]
(if (= :separator item)
[:hr {:key (str (:id @state) "-" index)}]
(let [[value label] (as-key-value item)]
[:li.checked-element
{:key (str (:id @state) "-" index)
:class (when (= value (-> @state :current-value)) "is-selected")
:class (when (= (str value) (-> @state :current-value)) "is-selected")
:on-click (select-item value)}
[:span.check-icon i/tick]
[:span label]])))]]]))
[:span.checked-element-value label]
[:span.check-icon i/tick]])))]]]))

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

@ -339,7 +339,7 @@
[:div.row-flex
(let [size-options [8 9 10 11 12 14 18 24 36 48 72]
(let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
[:& editable-select
{:value (attr->string font-size)

6
frontend/src/app/util/dom.cljs
View file

@ -59,6 +59,12 @@
([classname node]
(dom/getElementByClass classname node)))
(defn get-elements-by-class
([classname]
(dom/getElementsByClass classname))
([classname node]
(dom/getElementsByClass classname node)))
(defn get-element
[id]
(dom/getElement id))