enhance(ux): haptics when collapsing/expanding block

src/main/capacitor/app.cljs

@@ -136,9 +136,11 @@
      [:div.pt-4.px-4
        ;; (journals-list)
 
-      [:div#main-container.flex.flex-1
-       [:div#main-content-container.w-full
-        (journal/all-journals)]]
+      [:main#app-container-wrapper.ls-fold-button-on-right
+       [:div#app-container
+        [:div#main-container.flex.flex-1
+         [:div#main-content-container.w-full
+          (journal/all-journals)]]]]
 
        ;(contents-playground)
       ]

src/main/frontend/components/block.cljs

@@ -58,6 +58,7 @@
             [frontend.handler.ui :as ui-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.mixins :as mixins]
+            [frontend.mobile.haptics :as haptics]
             [frontend.mobile.intent :as mobile-intent]
             [frontend.mobile.util :as mobile-util]
             [frontend.modules.outliner.tree :as tree]
@@ -2148,17 +2149,21 @@
                                 :is-with-icon  with-icon?
                                 :bullet-closed collapsed?
                                 :bullet-hidden (:hide-bullet? config)}])}
-     (when (not (:table? config))
+     (when (and (or (not fold-button-right?) collapsable? collapsed?)
+                (not (:table? config)))
        [:a.block-control
         {:id       (str "control-" uuid)
          :on-click (fn [event]
                      (util/stop event)
                      (state/clear-edit!)
-                     (if ref?
-                       (state/toggle-collapsed-block! uuid)
-                       (if collapsed?
-                         (editor-handler/expand-block! uuid)
-                         (editor-handler/collapse-block! uuid)))
+                     (p/do!
+                      (if ref?
+                        (state/toggle-collapsed-block! uuid)
+                        (if collapsed?
+                          (editor-handler/expand-block! uuid)
+                          (editor-handler/collapse-block! uuid)))
+                      (when (util/mobile?)
+                        (haptics/haptics :light)))
                      ;; debug config context
                      (when (and (state/developer-mode?) (.-metaKey event))
                        (js/console.debug "[block config]==" config)))}
@@ -3005,18 +3010,17 @@
   [_config {:block/keys [uuid] :as _block}]
   [:div.block-left-menu.flex.bg-base-2.rounded-r-md.mr-1
    [:div.commands-button.w-0.rounded-r-md
-    {:id (str "block-left-menu-" uuid)}
+    {:id (str "block-left-menu-" uuid)
+     :style {:max-width 40}}
     [:div.indent (ui/icon "indent-increase" {:size 18})]]])
 
 (rum/defc block-right-menu < rum/reactive
-  [_config {:block/keys [uuid] :as _block} edit?]
+  [_config {:block/keys [uuid] :as _block}]
   [:div.block-right-menu.flex.bg-base-2.rounded-md.ml-1
    [:div.commands-button.w-0.rounded-md
     {:id (str "block-right-menu-" uuid)
-     :style {:max-width (if edit? 40 80)}}
-    [:div.outdent (ui/icon "indent-decrease" {:size 18})]
-    (when-not edit?
-      [:div.more (ui/icon "dots-circle-horizontal" {:size 18})])]])
+     :style {:max-width 40}}
+    [:div.outdent (ui/icon "indent-decrease" {:size 18})]]])
 
 (rum/defc block-content-with-error
   [config block edit-input-id block-id *show-query? editor-box]
@@ -3686,7 +3690,7 @@
            (block-positioned-properties config block :block-below))]
 
         (when (and @*show-right-menu? (not in-whiteboard?) (not (or table? property?)))
-          (block-right-menu config block editing?))])
+          (block-right-menu config block))])
 
      (when (and db-based?
                 (not collapsed?)

src/main/frontend/handler/block.cljs

@@ -310,6 +310,7 @@
                   y (.-clientY touch)]
               (reset! *swipe {:x0 x :y0 y :xi x :yi y :tx x :ty y :direction nil}))))))))
 
+;; FIXME: disable scroll
 (defn on-touch-move
   [event block uuid edit? *show-left-menu? *show-right-menu?]
   (when-let [touches (.-targetTouches event)]
@@ -396,24 +397,24 @@
       (try
         (when (> (. js/Math abs dx) 10)
           (cond
-            (and left-menu (>= (.-clientWidth left-menu) 40))
+            left-menu
             (when (indentable? block)
               (haptics/with-haptics-impact
                 (indent-outdent-blocks! [block] true nil)
                 :light))
 
-            (and right-menu (<= 40 (.-clientWidth right-menu) 79))
+            right-menu
             (when (outdentable? block)
               (haptics/with-haptics-impact
                 (indent-outdent-blocks! [block] false nil)
                 :light))
 
-            (and right-menu (>= (.-clientWidth right-menu) 80))
-            (haptics/with-haptics-impact
-              (do (state/set-state! :mobile/show-action-bar? true)
-                  (state/set-state! :mobile/actioned-block block)
-                  (select-block! uuid))
-              :light)
+;; TODO: long press to select
+            ;; (haptics/with-haptics-impact
+            ;;   (do (state/set-state! :mobile/show-action-bar? true)
+            ;;       (state/set-state! :mobile/actioned-block block)
+            ;;       (select-block! uuid))
+            ;;   :light)
 
             :else
             nil))

src/main/frontend/mobile/haptics.cljs

@@ -3,13 +3,18 @@
    ["@capacitor/haptics" :refer [Haptics ImpactStyle]]
    [promesa.core :as p]))
 
-(defn with-haptics-impact
-  [fn impact-style]
+(defn haptics
+  [impact-style]
   (let [style (cond
                 (= impact-style :light)
                 {:style (.-Light ImpactStyle)}
 
                 (= impact-style :medium)
                 {:style (.-Medium ImpactStyle)})]
-    (p/do! (.impact Haptics (clj->js style))
-           fn)))
+    (.impact Haptics (clj->js style))))
+
+(defn with-haptics-impact
+  [result impact-style]
+  (p/do!
+   (haptics impact-style)
+   result))

tailwind.capacitor.css

@@ -11,6 +11,7 @@
 
 @import "src/main/frontend/common.css";
 @import "src/main/frontend/ui.css";
+@import "src/main/frontend/components/theme.css";
 @import "src/main/frontend/components/block.css";
 @import "src/main/frontend/components/property.css";
 @import "src/main/frontend/components/editor.css";