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

CHANGES.md

@@ -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)

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

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

frontend/src/app/main/ui/components/editable_select.cljs

@@ -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/with-effect [(:is-open? @state)]
-     (mf/deps (:is-open? @state))
+      (let [wrapper-node (mf/ref-val font-size-wrapper-ref)
-     (fn []
+            node (dom/get-element-by-class "checked-element is-selected" wrapper-node)
-       (mf/set-ref-val! emit-blur? (not (:is-open? @state)))))
+            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.checked-element-value label]
-              [:span label]])))]]]))
+              [:span.check-icon i/tick]])))]]]))

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

@@ -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)

frontend/src/app/util/dom.cljs

@@ -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))