✨ Add configurable nudge amount

frontend/src/app/main/data/users.cljs

@@ -447,6 +447,20 @@
         (->> (rp/query :team-users {:team-id team-id})
              (rx/map #(partial fetched %)))))))
 
+;; --- Update Nudge
+
+(defn update-nudge
+  [value]
+  (ptk/reify ::update-nudge
+    ptk/UpdateEvent
+    (update [_ state]
+      (update-in state [:profile :props] assoc :nudge value))
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [props {:nudge value}]
+        (->> (rp/mutation :update-profile-props {:props props})
+             (rx/map (constantly (fetch-profile))))))))
+
 ;; --- EVENT: request-account-deletion
 
 (defn request-account-deletion

frontend/src/app/main/data/workspace/transforms.cljs

@@ -606,13 +606,14 @@
       (watch [_ state stream]
         (if (= same-event (get-in state [:workspace-local :current-move-selected]))
           (let [selected (wsh/lookup-selected state {:omit-blocked? true})
+                nudge (get-in state [:profile :props :nudge] {:big 10 :small 1})
                 move-events (->> stream
                                  (rx/filter (ptk/type? ::move-selected))
                                  (rx/filter #(= direction (deref %))))
                 stopper (->> move-events
                              (rx/debounce 100)
                              (rx/first))
-                scale (if shift? (gpt/point 10) (gpt/point 1))
+                scale (if shift? (gpt/point (:big nudge)) (gpt/point (:small nudge)))
                 mov-vec (gpt/multiply (get-displacement direction) scale)]
 
             (rx/concat

frontend/src/app/main/ui/workspace.cljs

@@ -21,6 +21,7 @@
    [app.main.ui.workspace.header :refer [header]]
    [app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
    [app.main.ui.workspace.libraries]
+   [app.main.ui.workspace.nudge]
    [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [app.main.ui.workspace.textpalette :refer [textpalette]]
    [app.main.ui.workspace.viewport :refer [viewport]]

frontend/src/app/main/ui/workspace/header.cljs

@@ -353,7 +353,10 @@
          (if (contains? layout :dynamic-alignment)
            (tr "workspace.header.menu.disable-dynamic-alignment")
            (tr "workspace.header.menu.enable-dynamic-alignment"))]
-        [:span.shortcut (sc/get-tooltip :toggle-alignment)]]]]]))
+        [:span.shortcut (sc/get-tooltip :toggle-alignment)]]
+
+       [:li {:on-click #(st/emit! (modal/show {:type :nudge-option}))}
+        [:span (tr "modals.nudge-title")]]]]]))
 
 ;; --- Header Component
 

frontend/src/app/main/ui/workspace/nudge.cljs

@@ -0,0 +1,62 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.workspace.nudge
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.data.users :as du]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as k]
+   [goog.events :as events]
+   [rumext.alpha :as mf])
+  (:import goog.events.EventType))
+
+
+(mf/defc nudge-modal
+  {::mf/register modal/components
+   ::mf/register-as :nudge-option}
+  []
+  (let [profile (mf/deref refs/profile)
+        nudge (get-in profile [:props :nudge] {:big 10 :small 1})
+        update-nudge (fn [value size] (let [update-nudge (if (= :big size)
+                                                           {:big value :small (:small nudge)}
+                                                           {:small value :big (:big nudge)})]
+                                        (st/emit! (du/update-nudge update-nudge))))
+        update-big   (fn [value] (update-nudge value :big))
+        update-small (fn [value] (update-nudge value :small))
+        close        #(modal/hide!)]
+    (mf/with-effect
+      (letfn [(on-keydown [event]
+                (when (k/enter? event)
+                  (dom/prevent-default event)
+                  (dom/stop-propagation event)
+                  (close)))]
+        (->> (events/listen js/document EventType.KEYDOWN on-keydown)
+             (partial events/unlistenByKey))))
+
+    [:div.nudge-modal-overlay
+     [:div.nudge-modal-container
+      [:div.nudge-modal-header
+       [:p.nudge-modal-title (tr "modals.nudge-title")]
+       [:button.modal-close-button {:on-click close} i/close]]
+      [:div.nudge-modal-body
+       [:div.input-wrapper
+        [:span
+         [:p.nudge-subtitle (tr "modals.small-nudge")]
+         [:> numeric-input {:min 1
+                            :value (:small nudge)
+                            :on-change update-small}]]]
+       [:div.input-wrapper
+        [:span
+         [:p.nudge-subtitle (tr "modals.big-nudge")]
+         [:> numeric-input {:min 1
+                            :value (:big nudge)
+                            :on-change update-big}]]]]]]))