From 6f1237a8b554236dc402c00a343a5a2fa3ee2736 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Thu, 6 Apr 2023 23:37:42 +0800 Subject: [PATCH] enhance: bottom bar to show undo mode --- src/main/frontend/components/bottom_bar.cljs | 25 +++++++++++++++++++ src/main/frontend/components/bottom_bar.css | 7 ++++++ src/main/frontend/components/container.cljs | 7 ++++-- .../frontend/modules/editor/undo_redo.cljs | 14 ++++++++++- .../frontend/modules/shortcut/config.cljs | 3 ++- src/main/frontend/state.cljs | 10 -------- 6 files changed, 52 insertions(+), 14 deletions(-) create mode 100644 src/main/frontend/components/bottom_bar.cljs create mode 100644 src/main/frontend/components/bottom_bar.css diff --git a/src/main/frontend/components/bottom_bar.cljs b/src/main/frontend/components/bottom_bar.cljs new file mode 100644 index 00000000000..ffb1900f065 --- /dev/null +++ b/src/main/frontend/components/bottom_bar.cljs @@ -0,0 +1,25 @@ +(ns frontend.components.bottom-bar + "Bottom bar for editor's status, the general rule is to avoid using this + to present user a simple and clean UI." + (:require [frontend.ui :as ui] + [frontend.state :as state] + [rum.core :as rum] + [frontend.db :as db] + [frontend.modules.editor.undo-redo :as undo-redo])) + +(rum/defc bar < rum/reactive + [] + (let [page-only-mode? (state/sub :history/page-only-mode?) + undo-page-id (state/sub :history/page)] + (prn "render bar " {:page-only-mode? page-only-mode? + :undo-page-id undo-page-id}) + (when (or (and page-only-mode? undo-page-id) + ;; others + ) + [:div#ls-bottom-bar + [:div.items + (when undo-page-id + [:div.item.flex.items-center + (str "Undo: " (:block/original-name (db/entity undo-page-id))) + [:a.inline-flex.ml-1 {:on-click undo-redo/toggle-undo-redo-mode!} + (ui/icon "x")]])]]))) diff --git a/src/main/frontend/components/bottom_bar.css b/src/main/frontend/components/bottom_bar.css new file mode 100644 index 00000000000..87be8864df0 --- /dev/null +++ b/src/main/frontend/components/bottom_bar.css @@ -0,0 +1,7 @@ +#ls-bottom-bar { + @apply shadow-lg text-sm p-1 fixed bottom-0 rounded-md; + + .items { + @apply flex flex-row flex-1; + } +} diff --git a/src/main/frontend/components/container.cljs b/src/main/frontend/components/container.cljs index 231a6b9cd49..75c4a3d87f8 100644 --- a/src/main/frontend/components/container.cljs +++ b/src/main/frontend/components/container.cljs @@ -12,6 +12,7 @@ [frontend.components.svg :as svg] [frontend.components.theme :as theme] [frontend.components.widgets :as widgets] + [frontend.components.bottom-bar :as bottom-bar] [frontend.config :as config] [frontend.context.i18n :refer [t]] [frontend.db :as db] @@ -506,7 +507,7 @@ (left-sidebar {:left-sidebar-open? left-sidebar-open? :route-match route-match}) - [:div#main-content-container.scrollbar-spacing.w-full.flex.justify-center.flex-row.outline-none + [:div#main-content-container.scrollbar-spacing.w-full.flex.justify-center.flex-row.outline-none.relative {:tabIndex "-1" :data-is-margin-less-pages margin-less-pages?} @@ -551,7 +552,9 @@ main-content]) (when onboarding-and-home? - (onboarding/intro onboarding-and-home?))]]])) + (onboarding/intro onboarding-and-home?))] + + (bottom-bar/bar)]])) (defonce sidebar-inited? (atom false)) ;; TODO: simplify logic diff --git a/src/main/frontend/modules/editor/undo_redo.cljs b/src/main/frontend/modules/editor/undo_redo.cljs index 34c310fed45..8d4365a1263 100644 --- a/src/main/frontend/modules/editor/undo_redo.cljs +++ b/src/main/frontend/modules/editor/undo_redo.cljs @@ -44,7 +44,8 @@ (when-let [id (if (= :undo action) (get-page-from-block @(get-undo-stack)) (get-page-from-block @(get-redo-stack)))] - (swap! state/state assoc :history/page id)))) + (swap! state/state assoc :history/page id) + id))) (defn push-undo [txs] @@ -218,6 +219,17 @@ (state/pub-event! [:whiteboard/redo e])) (assoc e :txs-op new-txs)))) +(defn toggle-undo-redo-mode! + [] + (if (:history/page-only-mode? @state/state) + (swap! state/state assoc + :history/page-only-mode? false + :history/page nil) + (when-let [page-id (get-history-page :undo)] + (swap! state/state assoc + :history/page-only-mode? true + :history/page page-id)))) + (defn pause-listener! [] (reset! *pause-listener true)) diff --git a/src/main/frontend/modules/shortcut/config.cljs b/src/main/frontend/modules/shortcut/config.cljs index bf921ac3416..d1b296611d2 100644 --- a/src/main/frontend/modules/shortcut/config.cljs +++ b/src/main/frontend/modules/shortcut/config.cljs @@ -15,6 +15,7 @@ [frontend.handler.export :as export-handler] [frontend.handler.whiteboard :as whiteboard-handler] [frontend.handler.plugin-config :as plugin-config-handler] + [frontend.modules.editor.undo-redo :as undo-redo] [frontend.modules.shortcut.dicts :as dicts] [frontend.modules.shortcut.before :as m] [frontend.state :as state] @@ -258,7 +259,7 @@ :fn editor-handler/zoom-out!} :editor/toggle-undo-redo-mode {:binding "mod+c mod+u" - :fn state/toggle-undo-redo-mode!} + :fn undo-redo/toggle-undo-redo-mode!} :ui/toggle-brackets {:binding "mod+c mod+b" :fn config-handler/toggle-ui-show-brackets!} diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index 1c26af7bc56..7663891d0bb 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -2095,13 +2095,3 @@ Similar to re-frame subscriptions" (defn clear-user-info! [] (storage/remove :user-groups)) - -(defn toggle-undo-redo-mode! - [] - (if (:history/page-only-mode? @state) - (swap! state assoc - :history/page-only-mode? false - :history/page nil) - (swap! state assoc - :history/page-only-mode? true - :history/page nil)))