mirror of
https://github.com/logseq/logseq.git
synced 2026-05-30 07:29:48 +00:00
fix: always render popup
This commit is contained in:
Tienson Qin
@@ -1,7 +1,6 @@
|
||||
(ns mobile.components.app
|
||||
"App root"
|
||||
(:require ["../externals.js"]
|
||||
[logseq.shui.silkhq :as silkhq]
|
||||
[clojure.string :as string]
|
||||
[frontend.components.journal :as journal]
|
||||
[frontend.components.rtc.indicator :as rtc-indicator]
|
||||
@@ -23,6 +22,7 @@
|
||||
[logseq.shui.dialog.core :as shui-dialog]
|
||||
[logseq.shui.hooks :as hooks]
|
||||
[logseq.shui.popup.core :as shui-popup]
|
||||
[logseq.shui.silkhq :as silkhq]
|
||||
[logseq.shui.toaster.core :as shui-toaster]
|
||||
[logseq.shui.ui :as shui]
|
||||
[mobile.components.editor-toolbar :as editor-toolbar]
|
||||
@@ -41,44 +41,44 @@
|
||||
[]
|
||||
(let [current-repo (state/get-current-repo)
|
||||
graphs (->> (state/sub [:me :repos])
|
||||
(util/distinct-by :url))
|
||||
(util/distinct-by :url))
|
||||
remote-graphs (state/sub :rtc/graphs)
|
||||
graphs (->>
|
||||
(if (seq remote-graphs)
|
||||
(repo-handler/combine-local-&-remote-graphs graphs remote-graphs)
|
||||
graphs)
|
||||
(filter (fn [item] (config/db-based-graph? (:url item)))))
|
||||
(if (seq remote-graphs)
|
||||
(repo-handler/combine-local-&-remote-graphs graphs remote-graphs)
|
||||
graphs)
|
||||
(filter (fn [item] (config/db-based-graph? (:url item)))))
|
||||
short-repo-name (if current-repo
|
||||
(db-conn/get-short-repo-name current-repo)
|
||||
"Select a Graph")]
|
||||
[:.app-graph-select
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:class "ml-1 text-primary !font-semibold !opacity-90 text-base"
|
||||
:on-click (fn []
|
||||
(let [buttons (concat
|
||||
(->>
|
||||
(for [repo graphs]
|
||||
{:text (some-> (:url repo) (string/replace #"^logseq_db_" ""))
|
||||
:role (:url repo)})
|
||||
(remove (fn [{:keys [text]}] (string/blank? text))))
|
||||
[{:text [:span.text-gray-09.pb-4.active:opacity-80 "+ Add new graph"]
|
||||
:role "add-new-graph"}])]
|
||||
(ui-component/open-modal! "Switch graph"
|
||||
{:type :action-sheet
|
||||
:buttons buttons
|
||||
:on-action (fn [e]
|
||||
(when-let [role (:role e)]
|
||||
(if (= "add-new-graph" role)
|
||||
(state/pub-event! [:graph/new-db-graph])
|
||||
(when (string/starts-with? role "logseq_db_")
|
||||
(state/pub-event! [:graph/switch role])))))
|
||||
:modal-props {:class "graph-switcher"}})))}
|
||||
[:span.flex.items-center.gap-2.opacity-80.pt-1
|
||||
[:strong.overflow-hidden.text-ellipsis.block.font-normal
|
||||
{:style {:max-width "40vw"}}
|
||||
short-repo-name]])]))
|
||||
{:variant :text
|
||||
:size :sm
|
||||
:class "ml-1 text-primary !font-semibold !opacity-90 text-base"
|
||||
:on-click (fn []
|
||||
(let [buttons (concat
|
||||
(->>
|
||||
(for [repo graphs]
|
||||
{:text (some-> (:url repo) (string/replace #"^logseq_db_" ""))
|
||||
:role (:url repo)})
|
||||
(remove (fn [{:keys [text]}] (string/blank? text))))
|
||||
[{:text [:span.text-gray-09.pb-4.active:opacity-80 "+ Add new graph"]
|
||||
:role "add-new-graph"}])]
|
||||
(ui-component/open-modal! "Switch graph"
|
||||
{:type :action-sheet
|
||||
:buttons buttons
|
||||
:on-action (fn [e]
|
||||
(when-let [role (:role e)]
|
||||
(if (= "add-new-graph" role)
|
||||
(state/pub-event! [:graph/new-db-graph])
|
||||
(when (string/starts-with? role "logseq_db_")
|
||||
(state/pub-event! [:graph/switch role])))))
|
||||
:modal-props {:class "graph-switcher"}})))}
|
||||
[:span.flex.items-center.gap-2.opacity-80.pt-1
|
||||
[:strong.overflow-hidden.text-ellipsis.block.font-normal
|
||||
{:style {:max-width "40vw"}}
|
||||
short-repo-name]])]))
|
||||
|
||||
(rum/defc keep-keyboard-open
|
||||
[]
|
||||
@@ -90,8 +90,8 @@
|
||||
(rum/defc journals
|
||||
[]
|
||||
(ui-component/classic-app-container-wrap
|
||||
[:div.pt-3
|
||||
(journal/all-journals)]))
|
||||
[:div.pt-3
|
||||
(journal/all-journals)]))
|
||||
|
||||
(rum/defc home-inner
|
||||
[*page db-restoring? current-tab]
|
||||
@@ -109,9 +109,9 @@
|
||||
(journals)))])
|
||||
|
||||
(rum/defc home < rum/reactive
|
||||
{:did-mount (fn [state]
|
||||
(ui/inject-document-devices-envs!)
|
||||
state)}
|
||||
{:did-mount (fn [state]
|
||||
(ui/inject-document-devices-envs!)
|
||||
state)}
|
||||
[*page current-tab]
|
||||
(let [db-restoring? (state/sub :db/restoring?)]
|
||||
(home-inner *page db-restoring? current-tab)))
|
||||
@@ -120,62 +120,62 @@
|
||||
[current-repo]
|
||||
(let [[theme] (frum/use-atom-in state/state :ui/theme)]
|
||||
(hooks/use-effect!
|
||||
(fn []
|
||||
(state/sync-system-theme!)
|
||||
(ui/setup-system-theme-effect!))
|
||||
[])
|
||||
(fn []
|
||||
(state/sync-system-theme!)
|
||||
(ui/setup-system-theme-effect!))
|
||||
[])
|
||||
(hooks/use-effect!
|
||||
#(let [^js doc js/document.documentElement
|
||||
^js cls (.-classList doc)
|
||||
^js cls-body (.-classList js/document.body)]
|
||||
(.setAttribute doc "data-theme" theme)
|
||||
(if (= theme "dark") ;; for tailwind dark mode
|
||||
(do (.add cls "dark") (.add cls "ion-palette-dark")
|
||||
(doto cls-body (.remove "light-theme") (.add "dark-theme")))
|
||||
(do (.remove cls "dark") (.remove cls "ion-palette-dark")
|
||||
(doto cls-body (.remove "dark-theme") (.add "light-theme")))))
|
||||
[theme]))
|
||||
#(let [^js doc js/document.documentElement
|
||||
^js cls (.-classList doc)
|
||||
^js cls-body (.-classList js/document.body)]
|
||||
(.setAttribute doc "data-theme" theme)
|
||||
(if (= theme "dark") ;; for tailwind dark mode
|
||||
(do (.add cls "dark") (.add cls "ion-palette-dark")
|
||||
(doto cls-body (.remove "light-theme") (.add "dark-theme")))
|
||||
(do (.remove cls "dark") (.remove cls "ion-palette-dark")
|
||||
(doto cls-body (.remove "dark-theme") (.add "light-theme")))))
|
||||
[theme]))
|
||||
|
||||
(hooks/use-effect!
|
||||
(fn []
|
||||
(some-> js/window.externalsjs (.settleStatusBar)))
|
||||
[current-repo]))
|
||||
(fn []
|
||||
(some-> js/window.externalsjs (.settleStatusBar)))
|
||||
[current-repo]))
|
||||
|
||||
(defn use-screen-size-effects!
|
||||
[]
|
||||
(hooks/use-effect!
|
||||
(fn []
|
||||
(let [handle-size! (fn []
|
||||
(.setProperty (.-style js/document.body) "--ls-full-screen-height" (str js/window.screen.height "px")))]
|
||||
(handle-size!)
|
||||
(.addEventListener js/window "orientationchange" handle-size!)
|
||||
#(.removeEventListener js/window "orientationchange" handle-size!)))
|
||||
[]))
|
||||
(fn []
|
||||
(let [handle-size! (fn []
|
||||
(.setProperty (.-style js/document.body) "--ls-full-screen-height" (str js/window.screen.height "px")))]
|
||||
(handle-size!)
|
||||
(.addEventListener js/window "orientationchange" handle-size!)
|
||||
#(.removeEventListener js/window "orientationchange" handle-size!)))
|
||||
[]))
|
||||
|
||||
(rum/defc journal-calendar-btn
|
||||
[]
|
||||
(shui/button
|
||||
{:variant :text
|
||||
:size :sm
|
||||
: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)]
|
||||
(mobile-state/open-block-modal! journal)
|
||||
(-> (page-handler/<create! page-name {:redirect? false})
|
||||
(p/then #(mobile-state/open-block-modal! (db/get-page page-name)))))))]
|
||||
(-> (.showDatePicker mobile-util/ui-local)
|
||||
(p/then (fn [^js e] (some-> e (.-value) (apply-date!)))))))}
|
||||
[:span.text-muted-foreground.mt-1
|
||||
(shui/tabler-icon "calendar-month" {:size 24})]))
|
||||
{:variant :text
|
||||
:size :sm
|
||||
: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)]
|
||||
(mobile-state/open-block-modal! journal)
|
||||
(-> (page-handler/<create! page-name {:redirect? false})
|
||||
(p/then #(mobile-state/open-block-modal! (db/get-page page-name)))))))]
|
||||
(-> (.showDatePicker mobile-util/ui-local)
|
||||
(p/then (fn [^js e] (some-> e (.-value) (apply-date!)))))))}
|
||||
[:span.text-muted-foreground.mt-1
|
||||
(shui/tabler-icon "calendar-month" {:size 24})]))
|
||||
|
||||
(rum/defc rtc-indicator-btn
|
||||
[]
|
||||
(let [repo (state/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?))
|
||||
(ldb/get-graph-rtc-uuid (db/get-db))
|
||||
(user-handler/logged-in?))
|
||||
(rtc-indicator/indicator))]))
|
||||
|
||||
(rum/defc app
|
||||
@@ -185,81 +185,79 @@
|
||||
(use-screen-size-effects!)
|
||||
(use-theme-effects! current-repo)
|
||||
(silkhq/depth-sheet-stack {:as-child true}
|
||||
(silkhq/depth-sheet-scenery-outlets
|
||||
(silkhq/scroll {:as-child true}
|
||||
(silkhq/scroll-view
|
||||
{:class "app-silk-index-scroll-view"
|
||||
:pageScroll true
|
||||
:nativePageScrollReplacement false}
|
||||
(silkhq/scroll-content
|
||||
{:class "app-silk-index-scroll-content"}
|
||||
[:div.app-silk-index-container
|
||||
{:data-tab (str tab)}
|
||||
(case (keyword tab)
|
||||
:home
|
||||
(home *home tab)
|
||||
:settings
|
||||
(settings/page)
|
||||
:search
|
||||
(search/search)
|
||||
(silkhq/depth-sheet-scenery-outlets
|
||||
(silkhq/scroll {:as-child true}
|
||||
(silkhq/scroll-view
|
||||
{:class "app-silk-index-scroll-view"
|
||||
:pageScroll true
|
||||
:nativePageScrollReplacement false}
|
||||
(silkhq/scroll-content
|
||||
{:class "app-silk-index-scroll-content"}
|
||||
[:div.app-silk-index-container
|
||||
{:data-tab (str tab)}
|
||||
(case (keyword tab)
|
||||
:home
|
||||
(home *home tab)
|
||||
:settings
|
||||
(settings/page)
|
||||
:search
|
||||
(search/search)
|
||||
;:demos
|
||||
;(demos/demos-inner)
|
||||
"Not Found")
|
||||
])))
|
||||
"Not Found")])))
|
||||
|
||||
;; app topbar
|
||||
(ui-silk/app-silk-topbar
|
||||
(cond-> {:title [:span.capitalize (str tab)]
|
||||
:props {:class (str tab)}}
|
||||
(= tab "home")
|
||||
(assoc
|
||||
:title ""
|
||||
:left-render (app-graphs-select)
|
||||
:right-render [:div.flex.items-center.gap-1
|
||||
(journal-calendar-btn)
|
||||
(rtc-indicator-btn)])
|
||||
;; app topbar
|
||||
(ui-silk/app-silk-topbar
|
||||
(cond-> {:title [:span.capitalize (str tab)]
|
||||
:props {:class (str tab)}}
|
||||
(= tab "home")
|
||||
(assoc
|
||||
:title ""
|
||||
:left-render (app-graphs-select)
|
||||
:right-render [:div.flex.items-center.gap-1
|
||||
(journal-calendar-btn)
|
||||
(rtc-indicator-btn)])
|
||||
|
||||
(= tab "settings")
|
||||
(assoc
|
||||
:right-render
|
||||
[:<>
|
||||
(shui/button
|
||||
{:variant :icon :size :sm
|
||||
:on-click (fn []
|
||||
(ui-component/open-popup!
|
||||
(fn []
|
||||
[:div.-mx-2
|
||||
(when login?
|
||||
(ui/menu-link {:on-click #(user-handler/logout)}
|
||||
[:span.text-lg.flex.gap-2.items-center.text-red-700
|
||||
(shui/tabler-icon "logout" {:class "opacity-80" :size 22})
|
||||
"Logout"]))
|
||||
(ui/menu-link {:on-click #(js/window.open "https://github.com/logseq/db-test/issues")}
|
||||
[:span.text-lg.flex.gap-2.items-center
|
||||
(shui/tabler-icon "bug" {:class "opacity-70" :size 22})
|
||||
"Report bug"])])
|
||||
{:title "Actions"}))}
|
||||
(shui/tabler-icon "dots" {:size 23}))])))
|
||||
(= tab "settings")
|
||||
(assoc
|
||||
:right-render
|
||||
[:<>
|
||||
(shui/button
|
||||
{:variant :icon :size :sm
|
||||
:on-click (fn []
|
||||
(ui-component/open-popup!
|
||||
(fn []
|
||||
[:div.-mx-2
|
||||
(when login?
|
||||
(ui/menu-link {:on-click #(user-handler/logout)}
|
||||
[:span.text-lg.flex.gap-2.items-center.text-red-700
|
||||
(shui/tabler-icon "logout" {:class "opacity-80" :size 22})
|
||||
"Logout"]))
|
||||
(ui/menu-link {:on-click #(js/window.open "https://github.com/logseq/db-test/issues")}
|
||||
[:span.text-lg.flex.gap-2.items-center
|
||||
(shui/tabler-icon "bug" {:class "opacity-70" :size 22})
|
||||
"Report bug"])])
|
||||
{:title "Actions"}))}
|
||||
(shui/tabler-icon "dots" {:size 23}))])))
|
||||
|
||||
;; app tabs
|
||||
(ui-silk/app-silk-tabs)
|
||||
(ui-silk/app-silk-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)
|
||||
(modal/block-modal)
|
||||
(popup/popup)
|
||||
))))
|
||||
(shui-toaster/install-toaster)
|
||||
(shui-dialog/install-modals)
|
||||
(shui-popup/install-popups)
|
||||
(modal/block-modal)
|
||||
(popup/popup)))))
|
||||
|
||||
(rum/defc main < rum/reactive
|
||||
[]
|
||||
(let [current-repo (state/sub :git/current-repo)
|
||||
login? (and (state/sub :auth/id-token)
|
||||
(user-handler/logged-in?))
|
||||
(user-handler/logged-in?))
|
||||
show-action-bar? (state/sub :mobile/show-action-bar?)]
|
||||
[:<>
|
||||
(app current-repo {:login? login?})
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns mobile.components.popup
|
||||
"Mobile popup"
|
||||
(:require [dommy.core :as dom]
|
||||
[frontend.handler.editor :as editor-handler]
|
||||
(:require [frontend.handler.editor :as editor-handler]
|
||||
[frontend.state :as state]
|
||||
[logseq.shui.popup.core :as shui-popup]
|
||||
[logseq.shui.silkhq :as silkhq]
|
||||
@@ -73,27 +72,27 @@
|
||||
(state/clear-edit!)
|
||||
(init/keyboard-hide))
|
||||
|
||||
(when open?
|
||||
(silkhq/bottom-sheet
|
||||
(merge
|
||||
{:presented (boolean open?)
|
||||
:onPresentedChange (fn [v?]
|
||||
(if (false? v?)
|
||||
(do
|
||||
(mobile-state/set-popup! nil)
|
||||
(state/clear-edit!)
|
||||
(state/pub-event! [:mobile/keyboard-will-hide]))
|
||||
(when (= :ls-quick-add (:id opts))
|
||||
(editor-handler/quick-add-open-last-block!))))}
|
||||
(:modal-props opts))
|
||||
(silkhq/bottom-sheet-portal
|
||||
(silkhq/bottom-sheet-view
|
||||
{:class "app-silk-popup-sheet-view"}
|
||||
(silkhq/bottom-sheet-backdrop)
|
||||
(silkhq/bottom-sheet-content
|
||||
{:class "flex flex-col items-center p-2"}
|
||||
(silkhq/bottom-sheet-handle)
|
||||
[:div.w-full.app-silk-popup-content-inner.p-2
|
||||
(when-let [title (:title opts)]
|
||||
[:h2.py-2.opacity-40 title])
|
||||
(if (fn? content-fn) (content-fn) content-fn)])))))))
|
||||
(silkhq/bottom-sheet
|
||||
(merge
|
||||
{:presented (boolean open?)
|
||||
:onPresentedChange (fn [v?]
|
||||
(cond
|
||||
(false? v?)
|
||||
(do
|
||||
(mobile-state/set-popup! nil)
|
||||
(state/clear-edit!)
|
||||
(state/pub-event! [:mobile/keyboard-will-hide]))
|
||||
(and (true? v?) (= :ls-quick-add (:id opts)))
|
||||
(editor-handler/quick-add-open-last-block!)))}
|
||||
(:modal-props opts))
|
||||
(silkhq/bottom-sheet-portal
|
||||
(silkhq/bottom-sheet-view
|
||||
{:class "app-silk-popup-sheet-view"}
|
||||
(silkhq/bottom-sheet-backdrop)
|
||||
(silkhq/bottom-sheet-content
|
||||
{:class "flex flex-col items-center p-2"}
|
||||
(silkhq/bottom-sheet-handle)
|
||||
[:div.w-full.app-silk-popup-content-inner.p-2
|
||||
(when-let [title (:title opts)]
|
||||
[:h2.py-2.opacity-40 title])
|
||||
(if (fn? content-fn) (content-fn) content-fn)]))))))
|
||||
|
||||
Reference in New Issue
Block a user