refactor mobile bar

1. add an update observer to watch icon click on mobile bar
2. add a submenu to input some timestamps

src/main/frontend/components/editor.css

@@ -1,36 +1,3 @@
-#mobile-editor-toolbar {
-  position: fixed;
-  bottom: 0;
-  transition: bottom 260ms;
-  /* transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68); */
-  /* transition-timing-function: steps(10, jump-end); */
-  /* transition-timing-function: steps(5, end); */
-  transition-timing-function: ease-out;
-  left: 0;
-  width: 100%;
-  z-index: 9999;
-  display: flex;
-  justify-content: space-between;
-
-  button {
-    padding: 7px 10px;
-  }
-  
-  .toolbar-commands {
-    justify-content: space-between;
-    display: flex;
-    align-items: center;
-    overflow-x: overlay;
-    overflow-y: hidden;
-    width: 95%;
-  }
-
-  .toolbar-hide-keyboard {
-    border-left: 1px solid;
-    border-color: var(--ls-quaternary-background-color);
-  }
-}
-
 #audio-record-toolbar {
     position: fixed;
     background-color: var(--ls-secondary-background-color);

src/main/frontend/components/sidebar.cljs

@@ -1,7 +1,6 @@
 (ns frontend.components.sidebar
   (:require [cljs-drag-n-drop.core :as dnd]
             [clojure.string :as string]
-            [frontend.commands :as commands]
             [frontend.components.command-palette :as command-palette]
             [frontend.components.header :as header]
             [frontend.components.journal :as journal]
@@ -20,17 +19,15 @@
             [frontend.db.model :as db-model]
             [frontend.extensions.pdf.assets :as pdf-assets]
             [frontend.extensions.srs :as srs]
-            [frontend.handler.config :as config-handler]
             [frontend.handler.editor :as editor-handler]
-            [frontend.handler.history :as history]
             [frontend.handler.mobile.swipe :as swipe]
             [frontend.handler.page :as page-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
             [frontend.mixins :as mixins]
-            [frontend.mobile.camera :as mobile-camera]
             [frontend.mobile.footer :as footer]
             [frontend.mobile.util :as mobile-util]
+            [frontend.mobile.mobile-bar :refer [mobile-bar]]
             [frontend.modules.shortcut.data-helper :as shortcut-dh]
             [frontend.state :as state]
             [frontend.ui :as ui]
@@ -273,92 +270,6 @@
      (sidebar-nav route-match close-fn left-sidebar-open?)
      [:span.shade-mask {:on-click close-fn}]]))
 
-(rum/defc mobile-bar-indent-outdent [indent? icon]
-  [:div
-   [:button.bottom-action
-    {:on-mouse-down (fn [e]
-                      (util/stop e)
-                      (editor-handler/indent-outdent indent?))}
-    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
-
-(def ^:private mobile-bar-icons-keywords
-  [:checkbox :brackets :parentheses :command :tag :a-b :list :camera
-   :brand-youtube :link :rotate :rotate-clockwise :code :bold :italic :strikethrough :paint])
-
-(def ^:private mobile-bar-commands-stats
-  (atom (into {}
-              (mapv (fn [name] [name {:counts 0}])
-                    mobile-bar-icons-keywords))))
-
-(defn set-command-stats [icon]
-  (let [key (keyword icon)
-        counts (get-in @mobile-bar-commands-stats [key :counts])]
-    (swap! mobile-bar-commands-stats
-           assoc-in [key :counts] (inc counts))
-    (config-handler/set-config!
-     :mobile/toolbar-stats @mobile-bar-commands-stats)))
-
-(rum/defc mobile-bar-command
-  [command-handler icon & [count? event?]]
-  [:div
-   [:button.bottom-action
-    {:on-mouse-down (fn [e]
-                      (util/stop e)
-                      (when count?
-                        (set-command-stats icon))
-                      (if event?
-                        (command-handler e)
-                        (command-handler)))}
-    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
-
-(defn mobile-bar-commands
-  [parent-id]
-  (let [viewport-fn (fn [] (when-let [input (gdom/getElement parent-id)]
-                             (util/scroll-editor-cursor input :to-vw-one-quarter? true)
-                             (.focus input)))]
-    (zipmap mobile-bar-icons-keywords
-            [(mobile-bar-command editor-handler/cycle-todo! "checkbox" true)
-             (mobile-bar-command #(do (viewport-fn) (editor-handler/toggle-page-reference-embed parent-id)) "brackets" true)
-             (mobile-bar-command #(do (viewport-fn) (editor-handler/toggle-block-reference-embed parent-id)) "parentheses" true)
-             (mobile-bar-command #(do (viewport-fn) (commands/simple-insert! parent-id "/" {})) "command" true)
-             (mobile-bar-command #(do (viewport-fn) (commands/simple-insert! parent-id "#" {})) "tag" true)
-             (mobile-bar-command editor-handler/cycle-priority! "a-b" true)
-             (mobile-bar-command editor-handler/toggle-list! "list" true)
-             (mobile-bar-command #(mobile-camera/embed-photo parent-id) "camera" true)
-             (mobile-bar-command commands/insert-youtube-timestamp "brand-youtube" true)
-             (mobile-bar-command editor-handler/html-link-format! "link" true)
-             (mobile-bar-command history/undo! "rotate" true true)
-             (mobile-bar-command history/redo! "rotate-clockwise" true true)
-             (mobile-bar-command #(commands/simple-insert! parent-id "<" {}) "code" true)
-             (mobile-bar-command editor-handler/bold-format! "bold" true)
-             (mobile-bar-command editor-handler/italics-format! "italic" true)
-             (mobile-bar-command editor-handler/strike-through-format! "strikethrough" true)
-             (mobile-bar-command editor-handler/highlight-format! "paint" true)])))
-
-(rum/defc mobile-bar < rum/reactive
-  []
-  (when (state/sub :mobile/show-toolbar?)
-   (when-let [config-toolbar-stats (:mobile/toolbar-stats (state/get-config))]
-     (reset! mobile-bar-commands-stats config-toolbar-stats))
-   (let [parent-id (state/get-edit-input-id)
-         commands (mobile-bar-commands parent-id)
-         sorted-commands (sort-by (comp :counts second) > @mobile-bar-commands-stats)]
-     (when (and (state/sub :mobile/show-toolbar?)
-                (state/sub :editor/editing?))
-       [:div#mobile-editor-toolbar.bg-base-2
-        [:div.toolbar-commands
-         (mobile-bar-indent-outdent false "arrow-bar-left")
-         (mobile-bar-indent-outdent true "arrow-bar-right")
-         (mobile-bar-command (editor-handler/move-up-down true) "arrow-bar-to-up")
-         (mobile-bar-command (editor-handler/move-up-down false) "arrow-bar-to-down")
-         (mobile-bar-command #(if (state/sub :document/mode?)
-                                (editor-handler/insert-new-block! nil)
-                                (commands/simple-insert! parent-id "\n" {})) "arrow-back")
-         (for [command sorted-commands]
-           ((first command) commands))]
-        [:div.toolbar-hide-keyboard
-         (mobile-bar-command #(state/clear-edit!) "keyboard-show")]]))))
-
 (rum/defc main <
   {:did-mount (fn [state]
                 (when-let [element (gdom/getElement "main-content-container")]

src/main/frontend/mobile/index.css

@@ -23,6 +23,56 @@
     }
 }
 
+#mobile-editor-toolbar {
+  position: fixed;
+  bottom: 0;
+  transition: bottom 260ms;
+  /* transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68); */
+  /* transition-timing-function: steps(10, jump-end); */
+  /* transition-timing-function: steps(5, end); */
+  transition-timing-function: ease-out;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  display: flex;
+  justify-content: space-between;
+
+  button {
+      padding: 7px 10px;
+
+      .submenu {
+          background-color: red;
+          z-index: 100;
+          background-color: var(--ls-secondary-background-color);
+          border-radius: 5px;
+          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
+          overflow-x: overlay;
+          overflow-y: hidden;
+          left: 0px;
+          height: 40px;
+      }
+      
+      .show-submenu {
+          display: block;
+      }
+  }
+  
+  .toolbar-commands {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    overflow-x: overlay;
+    overflow-y: hidden;
+    width: 95%;
+  }
+
+  .toolbar-hide-keyboard {
+    border-left: 1px solid;
+    border-color: var(--ls-quaternary-background-color);
+  }
+}
+
+
 html.is-native-ipad {
     .cp__footer {
         height: 55px;

src/main/frontend/mobile/mobile_bar.cljs

@@ -0,0 +1,143 @@
+(ns frontend.mobile.mobile-bar
+  (:require
+   [dommy.core :as dom]
+   [frontend.commands :as commands]
+   [frontend.date :as date]
+   [frontend.handler.config :as config-handler]
+   [frontend.handler.editor :as editor-handler]
+   [frontend.handler.history :as history]
+   [frontend.handler.page :as page-handler]
+   [frontend.mobile.camera :as mobile-camera]
+   [frontend.state :as state]
+   [frontend.ui :as ui]
+   [frontend.util :as util]
+   [goog.dom :as gdom]
+   [goog.object :as gobj]
+   [rum.core :as rum]))
+
+(rum/defc indent-outdent [indent? icon]
+  [:div
+   [:button.bottom-action
+    {:on-mouse-down (fn [e]
+                      (util/stop e)
+                      (editor-handler/indent-outdent indent?))}
+    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+
+(def ^:private icons-keywords
+  [:checkbox :brackets :parentheses :command :tag :a-b :list :camera
+   :brand-youtube :link :rotate :rotate-clockwise :code :calendar :bold :italic :strikethrough :paint])
+
+(def ^:private commands-stats
+  (atom (into {}
+              (mapv (fn [name] [name {:counts 0}])
+                    icons-keywords))))
+
+(defn set-command-stats [icon]
+  (let [key (keyword icon)
+        counts (get-in @commands-stats [key :counts])]
+    (swap! commands-stats
+           assoc-in [key :counts] (inc counts))
+    (config-handler/set-config!
+     :mobile/toolbar-stats @commands-stats)))
+
+(rum/defc command
+  [command-handler icon & [count? event?]]
+  [:div
+   [:button.bottom-action
+    {:on-mouse-down (fn [e]
+                      (util/stop e)
+                      (when count?
+                        (set-command-stats icon))
+                      (if event?
+                        (command-handler e)
+                        (command-handler))
+                      (state/set-state! :mobile/toolbar-update-observer (rand-int 1000000)))}
+    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+
+(rum/defc timestamp-submenu
+  [parent-id]
+  (let [callback (fn [event]
+                   (util/stop event)
+                   (let [target (.-parentNode (.-target event))]
+                     (dom/remove-class! target "show-submenu")))
+        command-cp (fn [action description]
+                     [:button
+                      {:on-mouse-down (fn [e]
+                                        (action)
+                                        (callback e))}
+                      description])]
+    [:div
+     [:button.bottom-action
+      {:on-mouse-down (fn [event]
+                        (util/stop event)
+                        (set-command-stats :calendar)
+                        (state/set-state! :mobile/toolbar-update-observer (rand-int 1000000))
+                        (let [target (gdom/getNextElementSibling (.-target event))]
+                          (dom/add-class! target "show-submenu")))}
+      (ui/icon "calendar" {:style {:fontSize ui/icon-size}})
+      [:div.submenu.fixed.hidden.flex.flex-col.w-full.justify-evenly
+       {:style {:bottom @util/keyboard-height}}
+       (command-cp #(let [today (page-handler/get-page-ref-text (date/today))]
+                      (commands/simple-insert! parent-id today {}))
+                   "Today")
+       (command-cp #(let [tomorrow (page-handler/get-page-ref-text (date/tomorrow))]
+                      (commands/simple-insert! parent-id tomorrow {}))
+                   "Tomorrow")
+       (command-cp #(let [yesterday (page-handler/get-page-ref-text (date/yesterday))]
+                      (commands/simple-insert! parent-id yesterday {}))
+                   "Yesterday")
+       (command-cp #(let [timestamp (date/get-current-time)]
+                      (commands/simple-insert! parent-id timestamp {}))
+                   "Time")]]]))
+
+(defn commands
+  [parent-id]
+  (let [viewport-fn (fn [] (when-let [input (gdom/getElement parent-id)]
+                             (util/scroll-editor-cursor input :to-vw-one-quarter? true)
+                             (.focus input)))]
+    (zipmap icons-keywords
+            [(command editor-handler/cycle-todo! "checkbox" true)
+             (command #(do (viewport-fn) (editor-handler/toggle-page-reference-embed parent-id)) "brackets" true)
+             (command #(do (viewport-fn) (editor-handler/toggle-block-reference-embed parent-id)) "parentheses" true)
+             (command #(do (viewport-fn) (commands/simple-insert! parent-id "/" {})) "command" true)
+             (command #(do (viewport-fn) (commands/simple-insert! parent-id "#" {})) "tag" true)
+             (command editor-handler/cycle-priority! "a-b" true)
+             (command editor-handler/toggle-list! "list" true)
+             (command #(mobile-camera/embed-photo parent-id) "camera" true)
+             (command commands/insert-youtube-timestamp "brand-youtube" true)
+             (command editor-handler/html-link-format! "link" true)
+             (command history/undo! "rotate" true true)
+             (command history/redo! "rotate-clockwise" true true)
+             (timestamp-submenu parent-id)
+             (command #(commands/simple-insert! parent-id "<" {}) "code" true)
+             (command editor-handler/bold-format! "bold" true)
+             (command editor-handler/italics-format! "italic" true)
+             (command editor-handler/strike-through-format! "strikethrough" true)
+             (command editor-handler/highlight-format! "paint" true)])))
+
+(rum/defc mobile-bar < rum/reactive
+  []
+  (when (and (state/sub :mobile/toolbar-update-observer)
+             (state/sub :mobile/show-toolbar?))
+    (when-let [config-toolbar-stats (:mobile/toolbar-stats (state/get-config))]
+      (prn :config-toolbar-stats config-toolbar-stats)
+      (reset! commands-stats config-toolbar-stats))
+    (let [parent-id (state/get-edit-input-id)
+          commands (commands parent-id)
+          sorted-commands (sort-by (comp :counts second) > @commands-stats)]
+      (when (and (state/sub :mobile/show-toolbar?)
+                 (state/sub :editor/editing?))
+        [:div#mobile-editor-toolbar.bg-base-2
+         [:div.toolbar-commands
+          (indent-outdent false "arrow-bar-left")
+          (indent-outdent true "arrow-bar-right")
+          (command (editor-handler/move-up-down true) "arrow-bar-to-up")
+          (command (editor-handler/move-up-down false) "arrow-bar-to-down")
+          (command #(if (state/sub :document/mode?)
+                      (editor-handler/insert-new-block! nil)
+                      (commands/simple-insert! parent-id "\n" {})) "arrow-back")
+          (for [command sorted-commands]
+            ((first command) commands))]
+         [:div.toolbar-hide-keyboard
+          (command #(state/clear-edit!) "keyboard-show")]]))))
+

src/main/frontend/state.cljs

@@ -145,6 +145,9 @@
 
      ;; mobile
      :mobile/show-toolbar?                  false
+     ;;; toolbar icon doesn't update correctly when clicking after separate it from box,
+     ;;; add a random in (<= 1000000) to observer its update
+     :mobile/toolbar-update-observer        0 
      :mobile/show-tabbar?                   false
 
      ;; plugin