enhance(capacitor): reuse mobile bar

src/main/capacitor/components/app.cljs

@@ -14,6 +14,7 @@
             [frontend.db.conn :as db-conn]
             [frontend.handler.page :as page-handler]
             [frontend.handler.repo :as repo-handler]
+            [frontend.mobile.mobile-bar :as mobile-bar ]
             [frontend.mobile.util :as mobile-util]
             [frontend.rum :as frum]
             [frontend.state :as fstate]
@@ -232,4 +233,6 @@
          #(.remove back-listener)))
      [])
 
-    (tabs)))
+    [:<>
+     (tabs)
+     (mobile-bar/mobile-bar)]))

src/main/capacitor/core.cljs

@@ -6,6 +6,7 @@
             [frontend.components.user.login :as login]
             [frontend.handler :as fhandler]
             [frontend.handler.route :as route-handler]
+            [frontend.mobile.core :as mobile]
             [frontend.util :as util]
             [reitit.frontend :as rf]
             [reitit.frontend.easy :as rfe]))
@@ -53,6 +54,7 @@
   ;; so it is available even in :advanced release builds
   (prn "[capacitor-new] init!")
   (set-router!)
+  (mobile/init!)
   (fhandler/start! render!))
 
 (defn ^:export stop! []

src/main/frontend/handler/events.cljs

@@ -223,12 +223,12 @@
     (state/set-state! :mobile/show-action-bar? false)
     (when (= (state/sub :editor/record-status) "RECORDING")
       (state/set-state! :mobile/show-recording-bar? true))
+    (when-let [^js html (js/document.querySelector ":root")]
+      (.setProperty (.-style html) "--ls-native-kb-height" (str keyboard-height "px"))
+      (.add (.-classList html) "has-mobile-keyboard"))
     (when (mobile-util/native-ios?)
       (reset! util/keyboard-height keyboard-height)
       (set! (.. main-node -style -marginBottom) (str keyboard-height "px"))
-      (when-let [^js html (js/document.querySelector ":root")]
-        (.setProperty (.-style html) "--ls-native-kb-height" (str keyboard-height "px"))
-        (.add (.-classList html) "has-mobile-keyboard"))
       (when-let [left-sidebar-node (gdom/getElement "left-sidebar")]
         (set! (.. left-sidebar-node -style -bottom) (str keyboard-height "px")))
       (when-let [right-sidebar-node (gdom/getElementByClass "sidebar-item-list")]
@@ -248,10 +248,10 @@
     (state/set-state! :mobile/show-tabbar? true)
     (when (= (state/sub :editor/record-status) "RECORDING")
       (state/set-state! :mobile/show-recording-bar? false))
+    (when-let [^js html (js/document.querySelector ":root")]
+      (.removeProperty (.-style html) "--ls-native-kb-height")
+      (.remove (.-classList html) "has-mobile-keyboard"))
     (when (mobile-util/native-ios?)
-      (when-let [^js html (js/document.querySelector ":root")]
-        (.removeProperty (.-style html) "--ls-native-kb-height")
-        (.remove (.-classList html) "has-mobile-keyboard"))
       (when-let [card-preview-el (js/document.querySelector ".cards-review")]
         (set! (.. card-preview-el -style -marginBottom) "0px"))
       (when-let [card-preview-el (js/document.querySelector ".encryption-password")]

src/main/frontend/mobile/index.css

@@ -38,10 +38,12 @@
 }
 
 #mobile-editor-toolbar {
-  @apply fixed bottom-0 left-0 w-full z-[9999] flex justify-between;
+  @apply fixed bottom-0 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)));
 
   button {
-    @apply flex items-center py-2 px-2;
+    @apply flex items-center py-2 px-2 active:opacity-50;
   }
 
   .submenu {
@@ -62,8 +64,7 @@
   }
 
   .toolbar-hide-keyboard {
-    border-left: 1px solid;
-    border-color: var(--ls-quaternary-background-color);
+    @apply border-l border-gray-200;
   }
 }
 

src/main/frontend/mobile/mobile_bar.cljs

@@ -87,12 +87,12 @@
 
 (rum/defc mobile-bar < rum/reactive
   []
-  (when (and (state/editing?)
-             (or (state/sub :mobile/show-toolbar?)
-                 (mobile-util/native-ipad?)))
+  (when (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.bg-base-2
+      [:div#mobile-editor-toolbar
        [:div.toolbar-commands
         (indent-outdent false "indent-decrease")
         (indent-outdent true "indent-increase")
@@ -107,7 +107,7 @@
         (command #(do
                     (blur-if-compositing)
                     (editor-handler/cycle-todo!))
-                 {:icon "checkbox"} true)
+          {: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)

tailwind.capacitor.css

@@ -12,6 +12,7 @@
 @import "src/main/frontend/common.css";
 @import "src/main/frontend/ui.css";
 @import "src/main/frontend/components/icon.css";
+@import "src/main/frontend/mobile/index.css";
 @import "src/main/frontend/components/theme.css";
 @import "src/main/frontend/components/block.css";
 @import "src/main/frontend/components/property.css";