enhance(ux): smooth fade out for command bar

src/main/frontend/components/container.cljs

@@ -702,8 +702,6 @@
                                               [(:db/id (db/get-page page)) :page])]
                      (state/sidebar-add-block! current-repo db-id block-type)))
                  (reset! sidebar-inited? true))))
-           (when (mobile-util/native-platform?)
-             (state/set-state! :mobile/show-tabbar? true))
            state)}
   []
   (let [default-home (get-default-home-if-valid)

src/main/frontend/handler/events.cljs

@@ -218,44 +218,30 @@
 
 (defmethod handle :mobile/keyboard-will-show [[_ keyboard-height]]
   (let [main-node (util/app-scroll-container-node)]
-    (state/set-state! :mobile/show-tabbar? false)
-    (state/set-state! :mobile/show-toolbar? true)
     (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"))
+      (.add (.-classList html) "has-mobile-keyboard")
+      (.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 [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")]
-        (set! (.. right-sidebar-node -style -paddingBottom) (str (+ 150 keyboard-height) "px")))
-      (when-let [card-preview-el (js/document.querySelector ".cards-review")]
-        (set! (.. card-preview-el -style -marginBottom) (str keyboard-height "px")))
-      (when-let [card-preview-el (js/document.querySelector ".encryption-password")]
-        (set! (.. card-preview-el -style -marginBottom) (str keyboard-height "px")))
-      (js/setTimeout (fn []
-                       (when-let [toolbar (.querySelector main-node "#mobile-editor-toolbar")]
-                         (set! (.. toolbar -style -bottom) (str keyboard-height "px"))))
-                     100))))
+      (when-let [toolbar (.querySelector main-node "#mobile-editor-toolbar")]
+        (set! (.. toolbar -style -bottom) (str keyboard-height "px"))))))
 
 (defmethod handle :mobile/keyboard-will-hide [[_]]
   (let [main-node (util/app-scroll-container-node)]
-    (state/set-state! :mobile/show-toolbar? false)
-    (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")
+      (.setProperty (.-style html) "--ls-native-toolbar-opacity" 0)
       (.remove (.-classList html) "has-mobile-keyboard"))
     (when (mobile-util/native-ios?)
       (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")]
-        (set! (.. card-preview-el -style -marginBottom) "0px"))
       (set! (.. main-node -style -marginBottom) "0px")
       (when-let [left-sidebar-node (gdom/getElement "left-sidebar")]
         (set! (.. left-sidebar-node -style -bottom) "0px"))

src/main/frontend/mobile/index.css

@@ -1,20 +1,3 @@
-.cp__footer {
-  @apply fixed bottom-0 left-0 px-5 py-2.5 z-10 flex flex-auto whitespace-nowrap h-20 items-start
-  bg-[var(--ls-primary-background-color)];
-
-  .bottom-action {
-    @apply w-6 h-6;
-  }
-
-  .ti, .timer {
-    color: var(--ls-primary-text-color);
-  }
-
-  .timer {
-    @apply absolute left-10;
-  }
-}
-
 .action-bar {
   @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
   shadow-md bg-[var(--ls-secondary-background-color)] z-[100];
@@ -45,10 +28,13 @@
 #mobile-editor-toolbar {
   @apply fixed -bottom-1 left-0 w-full z-[9999] flex justify-between bg-gray-100 border-t border-gray-200;
 
+  will-change: transform;
   transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
+  opacity: var(--ls-native-toolbar-opacity, 0);
+  transition: transform 250ms ease-out, opacity 50ms ease-out;
 
   button {
-    @apply flex items-center py-2 px-2 active:opacity-50;
+    @apply flex items-center py-2 px-2 opacity-70 active:opacity-80;
   }
 
   .submenu {
@@ -74,17 +60,9 @@
 }
 
 html.is-native-ipad {
-  .cp__footer {
-    @apply h-[55px] right-0 shadow-none flex-1 z-0;
-  }
-
   .action-bar {
     @apply w-[70%] min-w-[550px];
 
-    .action-bar-commands {
-      @apply w-full;
-    }
-
     @media (orientation: landscape) {
       @apply w-1/2;
     }
@@ -108,10 +86,6 @@ html.is-native-iphone {
       right: 15%;
       width: 70%;
       min-width: 450px;
-
-      .action-bar-commands {
-        width: 100%;
-      }
     }
   }
 }
@@ -134,10 +108,6 @@ html.is-native-android {
       left: 15%;
       right: 15%;
       width: 70%;
-
-      .action-bar-commands {
-        width: 100%;
-      }
     }
   }
 

src/main/frontend/mobile/mobile_bar.cljs

@@ -13,7 +13,6 @@
             [goog.dom :as gdom]
             [rum.core :as rum]))
 
-
 (defn- blur-if-compositing
   "Call blur on the textarea if it is in composition mode, let the IME commit the composing text"
   []
@@ -26,9 +25,9 @@
   [:div
    [:button.bottom-action
     {:on-pointer-down (fn [e]
-                      (util/stop e)
-                      (blur-if-compositing)
-                      (editor-handler/indent-outdent indent?))}
+                        (util/stop e)
+                        (blur-if-compositing)
+                        (editor-handler/indent-outdent indent?))}
     (ui/icon icon {:size ui/icon-size})]])
 
 (rum/defc command
@@ -51,8 +50,8 @@
         command-cp (fn [action description]
                      [:button
                       {:on-pointer-down (fn [e]
-                                        (action)
-                                        (callback e))}
+                                          (action)
+                                          (callback e))}
                       description])]
     [:div
      [:div#mobile-toolbar-timestamp-submenu.submenu
@@ -81,12 +80,13 @@
 
 (rum/defc mobile-bar < rum/reactive
   []
-  (when (and (or (state/sub :mobile/show-toolbar?)
-               (mobile-util/native-ipad?))
-          (state/editing?))
+  (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.fade-in.delay
+      [:div#mobile-editor-toolbar
        [:div.toolbar-commands
         (indent-outdent false "indent-decrease")
         (indent-outdent true "indent-increase")
@@ -101,7 +101,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)

src/main/frontend/state.cljs

@@ -214,9 +214,7 @@
       ;; mobile
       :mobile/container-urls                 nil
       :mobile/show-action-bar?               false
-      :mobile/show-toolbar?                  false
       :mobile/show-recording-bar?            false
-      :mobile/show-tabbar?                   false
 
       ;; plugin
       :plugin/enabled                        (and util/plugin-platform?