fix: scrolling in modal

src/main/capacitor/components/app.cljs

@@ -152,7 +152,7 @@
      (ion/content
       [:strong.flex.justify-center.items-center.py-24
        (ion/tabler-icon "loader" {:class "animate animate-spin opacity-50" :size 30})])
-     (ion/content {:class "ion-padding"}
+     (ion/content {:class "scrolling ion-padding"}
                   (journals)))))
 
 (rum/defc home < rum/reactive
@@ -223,10 +223,11 @@
   []
   (let [current-repo (fstate/sub :git/current-repo)
         show-action-bar? (fstate/sub :mobile/show-action-bar?)
-        {:keys [open?]} (rum/react state/*modal-data)]
+        {:keys [open?]} (rum/react state/*modal-data)
+        search? (= "search" (rum/react state/*tab))]
     (ion/app
      (tabs current-repo)
-     (when-not open?
+     (when-not (or open? search?)
        [:<>
         (mobile-bar/mobile-bar)
         (when show-action-bar?

src/main/capacitor/components/modal.cljs

@@ -19,7 +19,7 @@
       :presenting-element presenting-element
       :onDidDismiss (fn [] (state/set-modal! nil))
       :expand "block"}
-     (ion/content {:class "ion-padding"}
+     (ion/content {:class "ion-padding scrolling"}
                   (ui/classic-app-container-wrap
                    (page/page-cp (db/entity [:block/uuid (:block/uuid block)])))
                   (mobile-bar/mobile-bar)

src/main/capacitor/state.cljs

@@ -10,8 +10,6 @@
   [tab]
   (reset! *tab tab))
 
-(defn use-tab [] (r/use-atom *tab))
-
 (defonce *modal-data (atom nil))
 (defn set-modal!
   [data]

src/main/frontend/components/container.cljs

@@ -35,7 +35,6 @@
             [frontend.mixins :as mixins]
             [frontend.mobile.action-bar :as action-bar]
             [frontend.mobile.footer :as footer]
-            [frontend.mobile.mobile-bar :refer [mobile-bar]]
             [frontend.mobile.util :as mobile-util]
             [frontend.modules.shortcut.data-helper :as shortcut-dh]
             [frontend.modules.shortcut.utils :as shortcut-utils]
@@ -636,7 +635,6 @@
        (when show-recording-bar?
          (recording-bar))
 
-       (mobile-bar)
        (footer/footer)
 
        (cond

src/main/frontend/handler/events.cljs

@@ -227,9 +227,7 @@
       (.setProperty (.-style html) "--ls-native-toolbar-opacity" 1))
     (when (mobile-util/native-ios?)
       (reset! util/keyboard-height keyboard-height)
-      (set! (.. main-node -style -marginBottom) (str keyboard-height "px"))
-      (when-let [toolbar (.querySelector main-node "#mobile-editor-toolbar")]
-        (set! (.. toolbar -style -bottom) (str keyboard-height "px"))))))
+      (set! (.. main-node -style -marginBottom) (str keyboard-height "px")))))
 
 (defmethod handle :mobile/keyboard-will-hide [[_]]
   (let [main-node (util/app-scroll-container-node)]
@@ -246,9 +244,7 @@
       (when-let [left-sidebar-node (gdom/getElement "left-sidebar")]
         (set! (.. left-sidebar-node -style -bottom) "0px"))
       (when-let [right-sidebar-node (gdom/getElementByClass "sidebar-item-list")]
-        (set! (.. right-sidebar-node -style -paddingBottom) "150px"))
-      (when-let [toolbar (.querySelector main-node "#mobile-editor-toolbar")]
-        (set! (.. toolbar -style -bottom) 0)))))
+        (set! (.. right-sidebar-node -style -paddingBottom) "150px")))))
 
 (defmethod handle :plugin/hook-db-tx [[_ {:keys [blocks tx-data] :as payload}]]
   (when-let [payload (and (seq blocks)

src/main/frontend/mobile/mobile_bar.cljs

@@ -75,15 +75,11 @@
                              (util/scroll-editor-cursor input :to-vw-one-quarter? true)
                              (.focus input)))]
     [(command #(do (viewport-fn) (editor-handler/toggle-page-reference-embed parent-id)) {:icon "brackets"} true)
-     (command #(do (viewport-fn) (editor-handler/toggle-block-reference-embed parent-id)) {:icon "parentheses"} true)
      (command #(do (viewport-fn) (commands/simple-insert! parent-id "/" {})) {:icon "command"} true)]))
 
 (rum/defc mobile-bar < rum/reactive
   []
   (when (util/capacitor-new?)
-      ;; (and (or (state/sub :mobile/show-toolbar?)
-      ;;          (mobile-util/native-ipad?))
-      ;;     (state/editing?))
     (let [parent-id (state/get-edit-input-id)
           commands' (commands parent-id)]
       [:div#mobile-editor-toolbar
@@ -92,20 +88,14 @@
         (indent-outdent true "indent-increase")
         (command (editor-handler/move-up-down true) {:icon "arrow-bar-to-up"})
         (command (editor-handler/move-up-down false) {:icon "arrow-bar-to-down"})
-        (command #(if (state/sub :document/mode?)
-                    (editor-handler/insert-new-block! nil)
-                    (commands/simple-insert! parent-id "\n" {})) {:icon "arrow-back"})
-        ;; On mobile devies, some IME(keyboard) uses composing mode.
-        ;; The composing text can be committed by losing focus.
-        ;; 100ms is enough to commit the composing text to db.
         (command #(do
                     (blur-if-compositing)
                     (editor-handler/cycle-todo!))
                  {:icon "checkbox"} true)
-        (command #(mobile-camera/embed-photo parent-id) {:icon "camera"} true)
-        (command history/undo! {:icon "rotate" :class "rotate-180"} true)
-        (command history/redo! {:icon "rotate-clockwise" :class "rotate-180"} true)
-        (timestamp-submenu parent-id)
+        ;; (command #(mobile-camera/embed-photo parent-id) {:icon "camera"} true)
+        ;; (command history/undo! {:icon "rotate" :class "rotate-180"} true)
+        ;; (command history/redo! {:icon "rotate-clockwise" :class "rotate-180"} true)
+        ;; (timestamp-submenu parent-id)
         (for [command' commands']
           command')]
        [:div.toolbar-hide-keyboard

src/main/frontend/util.cljc

@@ -94,10 +94,13 @@
 #?(:cljs
    (defn current-page-scroll
      []
-     (some-> (js/document.querySelector ".ion-page:not(.ion-page-hidden)")
-             (.querySelector "ion-content")
+     (some-> (or
+              (js/document.querySelector "ion-modal.show-modal")
+              (js/document.querySelector ".ion-page:not(.ion-page-hidden)"))
+             (.querySelector "ion-content.scrolling")
              (.-shadowRoot)
              (.querySelector "[part=scroll]"))))
+
 #?(:cljs (defn app-scroll-container-node
            ([]
             (if (capacitor-new?)