From e139cba62103d4d22ebd970baf8a59752371cc68 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 22 Feb 2022 17:34:51 +0100 Subject: [PATCH] :sparkles: Scroll to selected font size or closest in font size selector --- CHANGES.md | 1 + .../partials/sidebar-element-options.scss | 2 ++ .../main/ui/components/editable_select.cljs | 32 +++++++++++++------ .../sidebar/options/menus/typography.cljs | 2 +- frontend/src/app/util/dom.cljs | 6 ++++ 5 files changed, 32 insertions(+), 11 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 64856913c..70aea80a0 100644 --- a/CHANGES.md +++ b/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) diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index f46983802..49c2beb30 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/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; diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index b11e4159a..42013291f 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/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/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]])))]]])) 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 78f57f88e..2f2d08f9b 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 @@ -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) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index 15cbf004e..76a7500cf 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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))