From 7febf330ac25b597b5fc9f7cd4fbb5c9ba74f39e Mon Sep 17 00:00:00 2001 From: Miguel de Benito Delgado Date: Sat, 19 Jul 2025 11:08:15 +0000 Subject: [PATCH 1/3] :sparkles: Enable wheel scrolling over templates-section in the dashboard --- frontend/src/app/main/ui/dashboard/templates.cljs | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index ac4a62512b..86c7db5678 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -17,6 +17,7 @@ [app.main.store :as st] [app.main.ui.icons :as i] [app.util.dom :as dom] + [app.util.dom.normalize-wheel :as nw] [app.util.i18n :refer [tr]] [app.util.keyboard :as kbd] [app.util.storage :as storage] @@ -206,6 +207,17 @@ (fn [_event] (swap! collapsed* not))) + on-wheel + (mf/use-fn + (mf/deps content-ref) + (fn [^js event] + (let [event* (nw/normalize-wheel event) + deltaY (.-spinY event*) + deltaX (.-spinX event*) + node (mf/ref-val content-ref)] + (when (> (abs deltaY) (abs deltaX)) + (.scrollBy node #js {:left (* 300 deltaY) :mode "smooth"}))))) + on-scroll (mf/use-fn (fn [e] @@ -258,6 +270,7 @@ [:div {:class (stl/css :content) :on-scroll on-scroll + :on-wheel on-wheel :ref content-ref} (for [index (range (count templates))] From d22ade3289436f55f4c1f4b98837482edf20e69b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 21 Jul 2025 10:38:18 +0200 Subject: [PATCH 2/3] :sparkles: Remove duplicated code --- .../src/app/main/ui/dashboard/templates.cljs | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index 86c7db5678..cfc13e3616 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -199,9 +199,6 @@ ;; We need space for total plus the libraries&templates link content-ref (mf/use-ref) - move-left (fn [] (dom/scroll-by! (mf/ref-val content-ref) -300 0)) - move-right (fn [] (dom/scroll-by! (mf/ref-val content-ref) 300 0)) - on-toggle-collapse (mf/use-fn (fn [_event] @@ -209,7 +206,6 @@ on-wheel (mf/use-fn - (mf/deps content-ref) (fn [^js event] (let [event* (nw/normalize-wheel event) deltaY (.-spinY event*) @@ -231,16 +227,10 @@ :right (> scroll-available client-width)})))) on-move-left - (mf/use-fn #(move-left)) - - on-move-left-key-down - (mf/use-fn #(move-left)) + (mf/use-fn #(dom/scroll-by! (mf/ref-val content-ref) -300 0)) on-move-right - (mf/use-fn #(move-right)) - - on-move-right-key-down - (mf/use-fn #(move-right)) + (mf/use-fn #(dom/scroll-by! (mf/ref-val content-ref) 300 0)) on-import-template (mf/use-fn @@ -248,7 +238,7 @@ (fn [template _event] (import-template! template team-id project-id default-project-id section)))] - (mf/with-effect [content-ref templates] + (mf/with-effect [templates] (let [content (mf/ref-val content-ref)] (when (and (some? content) (some? templates)) (dom/scroll-to content #js {:behavior "instant" :left 0 :top 0}) @@ -292,13 +282,13 @@ [:button {:class (stl/css :move-button :move-left) :tab-index (if ^boolean collapsed "-1" "0") :on-click on-move-left - :on-key-down on-move-left-key-down} + :on-key-down on-move-left} arrow-icon]) (when (:right @can-move) [:button {:class (stl/css :move-button :move-right) :tab-index (if collapsed "-1" "0") :on-click on-move-right - :aria-label (tr "labels.next") - :on-key-down on-move-right-key-down} + :on-key-down on-move-right + :aria-label (tr "labels.next")} arrow-icon])])) From 622fed2f0d9b83d7907d53acceb203b9e1b2d97e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 21 Jul 2025 10:39:50 +0200 Subject: [PATCH 3/3] :lipstick: Add minor formating enhancements to dashboard templates ui code --- .../src/app/main/ui/dashboard/templates.cljs | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index cfc13e3616..7d7590b5d2 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -172,32 +172,32 @@ (mf/defc templates-section* {::mf/props :obj} [{:keys [default-project-id profile project-id team-id]}] - (let [templates (mf/deref builtin-templates) - templates (mf/with-memo [templates] - (filterv #(and - (not= (:id %) "welcome") - (not= (:id %) "tutorial-for-beginners")) templates)) + (let [templates (mf/deref builtin-templates) + templates (mf/with-memo [templates] + (filterv #(and + (not= (:id %) "welcome") + (not= (:id %) "tutorial-for-beginners")) templates)) - route (mf/deref refs/route) - route-name (get-in route [:data :name]) - section (if (= route-name :dashboard-files) - (if (= project-id default-project-id) - "dashboard-drafts" - "dashboard-project") - (name route-name)) + route (mf/deref refs/route) + route-name (get-in route [:data :name]) + section (if (= route-name :dashboard-files) + (if (= project-id default-project-id) + "dashboard-drafts" + "dashboard-project") + (name route-name)) - collapsed* (mf/use-state - #(get storage/global ::collapsed)) - collapsed (deref collapsed*) + collapsed* (mf/use-state + #(get storage/global ::collapsed)) + collapsed (deref collapsed*) - can-move (mf/use-state {:left false :right true}) + can-move (mf/use-state {:left false :right true}) - total (count templates) + total (count templates) ;; We need space for total plus the libraries&templates link - content-ref (mf/use-ref) + content-ref (mf/use-ref) on-toggle-collapse (mf/use-fn