From fba44bbef2a0ca628e041664dbfbf04694047554 Mon Sep 17 00:00:00 2001 From: llcc Date: Fri, 29 Apr 2022 13:41:06 +0800 Subject: [PATCH] make mobile-bar independent with textarea fix toolbar overlaps editor when editing references --- src/main/frontend/components/editor.cljs | 87 ---------------------- src/main/frontend/components/editor.css | 7 +- src/main/frontend/components/sidebar.cljs | 91 ++++++++++++++++++++++- 3 files changed, 95 insertions(+), 90 deletions(-) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 054f6ecc4f..25115483c0 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -231,88 +231,6 @@ template) :class "black"})))))) -(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-state parent-id] - (let [viewport-fn (fn [] (when-let [input (gdom/getElement parent-id)] - (util/make-el-cursor-position-into-center-viewport input) - (.focus input)))] - (zipmap mobile-bar-icons-keywords - [(mobile-bar-command editor-handler/cycle-todo! "checkbox" true) - (mobile-bar-command #(editor-handler/toggle-page-reference-embed parent-id) "brackets" true) - (mobile-bar-command #(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 #(do (viewport-fn) (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 - [parent-state parent-id] - (when-let [config-toolbar-stats (:mobile/toolbar-stats (state/get-config))] - (reset! mobile-bar-commands-stats config-toolbar-stats)) - (let [commands (mobile-bar-commands parent-state parent-id) - sorted-commands (sort-by (comp :counts second) > @mobile-bar-commands-stats)] - [: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/defcs input < rum/reactive (rum/local {} ::input-value) (mixins/event-mixin @@ -615,11 +533,6 @@ (when (= (state/sub :editor/record-status) "RECORDING") [:div#audio-record-toolbar (footer/audio-record-cp)]) - - (when (and (or (mobile-util/is-native-platform?) - config/mobile?) - (not (:review-cards? config))) - (mobile-bar state id)) (ui/ls-textarea {:id id diff --git a/src/main/frontend/components/editor.css b/src/main/frontend/components/editor.css index b90e1f2ecc..80e3b3a45c 100644 --- a/src/main/frontend/components/editor.css +++ b/src/main/frontend/components/editor.css @@ -1,11 +1,14 @@ #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%; - /* height: 2.5rem; */ z-index: 9999; - transition: none; display: flex; justify-content: space-between; diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 74baa9c42d..42741a4aae 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/src/main/frontend/components/sidebar.cljs @@ -273,6 +273,92 @@ (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 :move-to-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")] @@ -303,10 +389,13 @@ :data-is-full-width (or global-graph-pages? (contains? #{:all-files :all-pages :my-publishing} route-name))} - (when (and (not (mobile-util/is-native-platform?)) + (when (and (not (mobile-util/native-platform?)) (contains? #{:page :home} route-name)) (widgets/demo-graph-alert)) + (when (mobile-util/native-platform?) + (mobile-bar)) + (cond (not indexeddb-support?) nil