enhance(capacitor): improve ux for android

Author: xyhp915

src/main/capacitor/components/app.cljs

@@ -217,18 +217,20 @@
      (fn []
        (let [handle-back!
              (fn []
-               (fstate/clear-edit!)
-               (fstate/clear-selection!)
                (cond
                  (seq (ui/get-modal))
                  (ui/close-modal!)
 
+                 (seq (fstate/get-selection-blocks))
+                 (fstate/clear-selection!)
+
                  :else
                  (-> (nav/nav-length?)
-                     (p/then (fn [len]
-                               (if (= len 1)
-                                 (.exitApp App)
-                                 (nav/nav-pop!)))))))
+                   (p/then (fn [len]
+                             (if (= len 1)
+                               (.exitApp App)
+                               (nav/nav-pop!))))))
+               (fstate/clear-edit!))
              ^js back-listener (.addListener App "backButton" handle-back!)]
          #(.remove back-listener)))
      [])

src/main/frontend/mobile/core.cljs

@@ -2,7 +2,6 @@
   "Main ns for handling mobile start"
   (:require ["@capacitor/app" :refer [^js App]]
             ["@capacitor/keyboard" :refer [^js Keyboard]]
-            [clojure.string :as string]
             [frontend.handler.editor :as editor-handler]
             [frontend.mobile.deeplink :as deeplink]
             [frontend.mobile.intent :as intent]
@@ -33,35 +32,6 @@
 (defn- android-init
   "Initialize Android-specified event listeners"
   []
-  ;; patch back navigation
-  (.addListener App "backButton"
-                #(let [href js/window.location.href]
-                   (when (true? (cond
-                                  (state/settings-open?)
-                                  (state/close-settings!)
-
-                                  (state/modal-opened?)
-                                  (state/close-modal!)
-
-                                  (state/get-left-sidebar-open?)
-                                  (state/set-left-sidebar-open! false)
-
-                                  (state/action-bar-open?)
-                                  (state/set-state! :mobile/show-action-bar? false)
-
-                                  (not-empty (state/get-selection-blocks))
-                                  (editor-handler/clear-selection!)
-
-                                  (state/editing?)
-                                  (editor-handler/escape-editing)
-
-                                  :else true))
-                     (if (or (string/ends-with? href "#/")
-                             (string/ends-with? href "/")
-                             (not (string/includes? href "#/")))
-                       (.exitApp App)
-                       (js/window.history.back)))))
-
   (.addEventListener js/window "sendIntentReceived"
                      #(intent/handle-received)))
 

src/main/frontend/mobile/index.css

@@ -38,7 +38,7 @@
 }
 
 #mobile-editor-toolbar {
-  @apply fixed bottom-0 left-0 w-full z-[9999] flex justify-between bg-gray-100 border-t border-gray-200;
+  @apply fixed -bottom-1 left-0 w-full z-[9999] flex justify-between bg-gray-100 border-t border-gray-200;
 
   transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
 

src/main/frontend/mobile/mobile_bar.cljs

@@ -35,11 +35,11 @@
   [command-handler {:keys [icon class]} & [event?]]
   [:div
    [:button.bottom-action
-    {:on-pointer-down (fn [e]
-                      (util/stop e)
+    {:on-mouse-down (fn [e]
                       (if event?
                         (command-handler e)
-                        (command-handler)))}
+                        (command-handler))
+                      (util/stop e))}
     (ui/icon icon {:size ui/icon-size :class class})]])
 
 (rum/defc timestamp-submenu
@@ -55,12 +55,6 @@
                                         (callback e))}
                       description])]
     [:div
-     [:button.bottom-action
-      {:on-pointer-down (fn [event]
-                        (util/stop event)
-                        (let [target (gdom/getElement "mobile-toolbar-timestamp-submenu")]
-                          (dom/add-class! target "show-submenu")))}
-      (ui/icon "calendar" {:size ui/icon-size})]
      [:div#mobile-toolbar-timestamp-submenu.submenu
       {:style {:bottom @util/keyboard-height}}
       (command-cp #(let [today (page-handler/get-page-ref-text (date/today))]