From 1b82fe3c99b6e4b456cc3a78d852e66bfadfdb92 Mon Sep 17 00:00:00 2001 From: Tienson Qin Date: Tue, 3 Jun 2025 06:26:18 +0800 Subject: [PATCH] enhance: share modal for tabs --- src/main/capacitor/components/app.cljs | 180 ++++++++++------------ src/main/capacitor/components/app.css | 2 +- src/main/capacitor/components/modal.cljs | 25 +++ src/main/capacitor/components/search.cljs | 5 +- 4 files changed, 108 insertions(+), 104 deletions(-) create mode 100644 src/main/capacitor/components/modal.cljs diff --git a/src/main/capacitor/components/app.cljs b/src/main/capacitor/components/app.cljs index 148f51b4f2..0f5ee08f31 100644 --- a/src/main/capacitor/components/app.cljs +++ b/src/main/capacitor/components/app.cljs @@ -1,5 +1,6 @@ (ns capacitor.components.app (:require ["../externals.js"] + [capacitor.components.modal :as modal] [capacitor.components.search :as search] [capacitor.components.settings :as settings] [capacitor.components.ui :as ui-component] @@ -7,7 +8,6 @@ [capacitor.state :as state] [clojure.string :as string] [frontend.components.journal :as journal] - [frontend.components.page :as page] [frontend.components.rtc.indicator :as rtc-indicator] [frontend.config :as config] [frontend.date :as date] @@ -93,103 +93,74 @@ [:div.pt-3 (journal/all-journals)])) -(rum/defc modal < rum/reactive - [presenting-element] - (let [{:keys [open? block]} (rum/react state/*modal-data) - show-action-bar? (fstate/sub :mobile/show-action-bar?)] - (ion/modal - {:isOpen (boolean open?) - :presenting-element presenting-element - :onDidDismiss (fn [] (state/set-modal! nil)) - :expand "block"} - (ion/content {:class "ion-padding"} - (page/page-cp (db/entity [:block/uuid (:block/uuid block)])) - (mobile-bar/mobile-bar) - (when show-action-bar? - (action-bar/action-bar)))))) - (rum/defc home-inner - [db-restoring?] - (let [[current-tab] (state/use-tab) - search? (= current-tab "search") - *page (hooks/use-ref nil) - [presenting-element set-presenting-element!] (hooks/use-state nil)] - (hooks/use-effect! - (fn [] - (set-presenting-element! (rum/deref *page))) - []) - (ion/page - {:id "app-main-content" - :ref *page} - (ion/header - (ion/toolbar - (ion/buttons {:slot "start"} - (app-graphs-select)) + [*page db-restoring?] + (ion/page + {:id "app-main-content" + :ref *page} + (ion/header + (ion/toolbar + (ion/buttons {:slot "start"} + (app-graphs-select)) - (ion/buttons {:slot "end"} - (ion/button - {:size "small" - :fill "clear" - :on-click (fn [] - (let [apply-date! (fn [date] - (let [page-name (date/journal-name (gdate/Date. (js/Date. date)))] - (if-let [journal (db/get-page page-name)] - (state/open-block-modal! journal) - (-> (page-handler/ (page-handler/ (.showDatePicker mobile-util/ui-local) - (p/then (fn [^js e] (some-> e (.-value) (apply-date!))))) + (if (mobile-util/native-platform?) + (-> (.showDatePicker mobile-util/ui-local) + (p/then (fn [^js e] (some-> e (.-value) (apply-date!))))) - (ui-component/open-modal! - (fn [{:keys [close!]}] - (ion/datetime - {:presentation "date" - :onIonChange (fn [^js e] - (let [val (.-value (.-detail e))] - (apply-date! val) - (close!)))}))))))} - [:span.text-muted-foreground {:slot "icon-only"} - (ion/tabler-icon "calendar-month" {:size 24})]) + (ui-component/open-modal! + (fn [{:keys [close!]}] + (ion/datetime + {:presentation "date" + :onIonChange (fn [^js e] + (let [val (.-value (.-detail e))] + (apply-date! val) + (close!)))}))))))} + [:span.text-muted-foreground {:slot "icon-only"} + (ion/tabler-icon "calendar-month" {:size 24})]) - (let [repo (fstate/get-current-repo)] - [:div.flex.flex-row.items-center.gap-2.text-muted-foreground - (when (and repo - (ldb/get-graph-rtc-uuid (db/get-db)) - (user-handler/logged-in?) - (config/db-based-graph? repo) - (user-handler/team-member?)) - [:<> + (let [repo (fstate/get-current-repo)] + [:div.flex.flex-row.items-center.gap-2.text-muted-foreground + (when (and repo + (ldb/get-graph-rtc-uuid (db/get-db)) + (user-handler/logged-in?) + (config/db-based-graph? repo) + (user-handler/team-member?)) + [:<> ;; (rum/with-key (rtc-collaborators) ;; (str "collab-" repo)) - (rtc-indicator/indicator) + (rtc-indicator/indicator) ;; (when (user-handler/logged-in?) ;; (rtc-indicator/downloading-detail)) ;; (when (user-handler/logged-in?) ;; (rtc-indicator/uploading-detail)) - ])])))) + ])])))) ;; main content - (cond - db-restoring? - (ion/content - [:strong.flex.justify-center.items-center.py-24 - (ion/tabler-icon "loader" {:class "animate animate-spin opacity-50" :size 30})]) - search? - "" - :else - (ion/content - (journals) - (modal presenting-element)))))) + (if db-restoring? + (ion/content + [:strong.flex.justify-center.items-center.py-24 + (ion/tabler-icon "loader" {:class "animate animate-spin opacity-50" :size 30})]) + (ion/content (journals))))) (rum/defc home < rum/reactive {:did-mount (fn [state] (ui/inject-document-devices-envs!) state)} - [] + [*page] (let [db-restoring? (fstate/sub :db/restoring?)] - (home-inner db-restoring?))) + (home-inner *page db-restoring?))) (defn use-theme-effects! [current-repo] @@ -214,31 +185,38 @@ (rum/defc tabs [current-repo] (use-theme-effects! current-repo) - (ion/tabs - {:onIonTabsDidChange (fn [^js e] - (state/set-tab! (.-tab (.-detail e))))} - (ion/tab - {:tab "home"} - (ion/content - (home))) - (ion/tab - {:tab "search"} - (ion/content - (search/search))) - (ion/tab - {:tab "settings"} - (ion/content - (settings/page))) + (let [*page (hooks/use-ref nil) + [presenting-element set-presenting-element!] (hooks/use-state nil)] + (hooks/use-effect! + (fn [] + (set-presenting-element! (rum/deref *page))) + []) + (ion/tabs + {:onIonTabsDidChange (fn [^js e] + (state/set-tab! (.-tab (.-detail e))))} + (ion/tab + {:tab "home"} + (ion/content + (home *page))) + (ion/tab + {:tab "search"} + (ion/content + (search/search *page))) + (ion/tab + {:tab "settings"} + (ion/content + (settings/page))) - (bottom-tabs) + (bottom-tabs) - (keep-keyboard-open) - (ui-component/install-notifications) - (ui-component/install-modals) + (keep-keyboard-open) + (ui-component/install-notifications) + (ui-component/install-modals) - (shui-toaster/install-toaster) - (shui-dialog/install-modals) - (shui-popup/install-popups))) + (shui-toaster/install-toaster) + (shui-dialog/install-modals) + (shui-popup/install-popups) + (modal/modal presenting-element)))) (rum/defc main < rum/reactive [] diff --git a/src/main/capacitor/components/app.css b/src/main/capacitor/components/app.css index 0eda979a0d..dbc3c403f5 100644 --- a/src/main/capacitor/components/app.css +++ b/src/main/capacitor/components/app.css @@ -27,7 +27,7 @@ html.plt-capacitor.plt-android { html.has-mobile-keyboard { .ion-page:not(.ion-page-hidden) { & > ion-content::part(scroll) { - padding-bottom: 512px !important; + padding-bottom: 100px !important; } } } diff --git a/src/main/capacitor/components/modal.cljs b/src/main/capacitor/components/modal.cljs new file mode 100644 index 0000000000..1de2dc7bd3 --- /dev/null +++ b/src/main/capacitor/components/modal.cljs @@ -0,0 +1,25 @@ +(ns capacitor.components.modal + (:require ["../externals.js"] + [capacitor.ionic :as ion] + [capacitor.state :as state] + [frontend.components.page :as page] + [frontend.db :as db] + [frontend.mobile.action-bar :as action-bar] + [frontend.mobile.mobile-bar :as mobile-bar] + [frontend.state :as fstate] + [rum.core :as rum])) + +(rum/defc modal < rum/reactive + [presenting-element] + (let [{:keys [open? block]} (rum/react state/*modal-data) + show-action-bar? (fstate/sub :mobile/show-action-bar?)] + (ion/modal + {:isOpen (boolean open?) + :presenting-element presenting-element + :onDidDismiss (fn [] (state/set-modal! nil)) + :expand "block"} + (ion/content {:class "ion-padding"} + (page/page-cp (db/entity [:block/uuid (:block/uuid block)])) + (mobile-bar/mobile-bar) + (when show-action-bar? + (action-bar/action-bar)))))) diff --git a/src/main/capacitor/components/search.cljs b/src/main/capacitor/components/search.cljs index e4f5deb431..1441fecefc 100644 --- a/src/main/capacitor/components/search.cljs +++ b/src/main/capacitor/components/search.cljs @@ -45,7 +45,7 @@ recent-pages))) (rum/defc search - [] + [*page] (let [*ref (hooks/use-ref nil) [input set-input!] (hooks/use-state "") [search-result set-search-result!] (hooks/use-state nil) @@ -73,7 +73,8 @@ (js/clearTimeout timeout)))) [(hooks/use-debounced-value input 150)]) (ion/page - {:id "search-tab"} + {:id "search-tab" + :ref *page} (ion/header (ion/toolbar (ion/searchbar