greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ui): refactor classic modals with the shui dialog

experiment/tanstack-table
charlie 2024-06-25 15:37:11 +08:00
parent 74b327fb64
commit e2ff6e1990
7 changed files with 75 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
deps/shui/src/logseq/shui/dialog/core.cljs vendored
View File

@ -72,13 +72,16 @@
(swap! *modals #(->> % (medley/remove-nth index) (vec)))))
;; apis
(declare close!)
(defn open!
[content-or-config & config']
(let [config (if (map? content-or-config)
content-or-config
{:content content-or-config})
content (:content config)
config (merge {:id (gen-id) :open? true} config (first config'))
id (gen-id)
config (merge {:id id :open? true :close #(close! id)} config (first config'))
config (cond-> config
(fn? content)
(assoc :content (content config)))]

6
src/main/frontend/components/file_sync.css
View File

@ -554,12 +554,6 @@
}
}
div[label=modal-page-histories] {
.panel-content {
overflow: hidden;
}
}
html[data-theme='light'] {
.cp__file-sync {
&-welcome-logseq-sync {

47
src/main/frontend/components/server.cljs
View File

@ -1,14 +1,15 @@
(ns frontend.components.server
(:require
[clojure.string :as string]
[rum.core :as rum]
[electron.ipc :as ipc]
[medley.core :as medley]
[promesa.core :as p]
[frontend.state :as state]
[frontend.util :as util]
[frontend.handler.notification :as notification]
[frontend.ui :as ui]))
[clojure.string :as string]
[logseq.shui.ui :as shui]
[rum.core :as rum]
[electron.ipc :as ipc]
[medley.core :as medley]
[promesa.core :as p]
[frontend.state :as state]
[frontend.util :as util]
[frontend.handler.notification :as notification]
[frontend.ui :as ui]))
(rum/defcs panel-of-tokens
< rum/reactive
@ -22,7 +23,7 @@
(let [server-state (state/sub :electron/server)
*tokens (::tokens _state)
changed? (not= @*tokens (:tokens server-state))]
[:div.cp__server-tokens-panel.-mx-2
[:div.cp__server-tokens-panel.pt-6
[:h2.text-3xl.-translate-y-4 "Authorization tokens"]
;; items
(let [update-value! (fn [idx k v] (swap! *tokens assoc-in [idx k] v))]
@ -48,7 +49,7 @@
[:p.flex.justify-end.pt-6.space-x-3
(ui/button "+ Add new token"
:on-click #(swap! *tokens conj {})
:intent "logseq")
:variant :outline)
(ui/button "Save"
:on-click (fn [] (-> (ipc/ipc :server/set-config {:tokens @*tokens})
(p/then #(notification/show! "Update tokens successfully!" :success))
@ -75,7 +76,7 @@
(mapv #(cond-> % (nil? %) not))
(apply not=)))]
[:div.cp__server-configs-panel.-mx-2
[:div.cp__server-configs-panel.pt-5
[:h2.text-3xl.-translate-y-4 "Server configurations"]
[:div.item.flex.items-center.space-x-3
@ -107,7 +108,7 @@
[:strong.select-none "Auto start server with the app launched"]]]
[:p.flex.justify-end.pt-6.space-x-3
(ui/button "Reset" :intent "logseq"
(ui/button "Reset" :variant :outline
:on-click #(reset! *configs (select-keys server-state [:host :port :autostart])))
(ui/button "Save & Apply"
:disabled (not changed?)
@ -165,18 +166,16 @@
:icon [:span.text-green-500.flex.items-center (ui/icon "player-play")]})
{:title "Authorization tokens"
:options {:on-click #(state/set-modal!
(fn [close]
(panel-of-tokens close))
{:center? true})}
:icon (ui/icon "key")}
:options {:on-click #(shui/dialog-open!
(fn []
(panel-of-tokens shui/dialog-close!)))}
:icon (ui/icon "key")}
{:title "Server configurations"
:options {:on-click #(state/set-modal!
(fn [close]
(panel-of-configs close))
{:center? true})}
:icon (ui/icon "server-cog")}])
{:title "Server configurations"
:options {:on-click #(shui/dialog-open!
(fn []
(panel-of-configs shui/dialog-close!)))}
:icon (ui/icon "server-cog")}])
{:links-header
[:div.links-header.flex.justify-center.py-2
[:span.ml-1.text-sm

7
src/main/frontend/extensions/pdf/toolbar.cljs
View File

@ -13,6 +13,7 @@
[frontend.storage :as storage]
[frontend.ui :as ui]
[frontend.util :as util]
[logseq.shui.ui :as shui]
[promesa.core :as p]
[rum.core :as rum]))
@ -100,8 +101,10 @@
[:div.extensions__pdf-settings-item.toggle-input
[:a.is-info.w-full.text-gray-500
{:title (t :pdf/doc-metadata)
:on-click #(p/let [ret (pdf-utils/get-meta-data$ viewer)]
(state/set-modal! (make-docinfo-in-modal ret)))}
:on-click (fn []
(p/let [ret (pdf-utils/get-meta-data$ viewer)]
(hide-settings!)
(shui/dialog-open! (make-docinfo-in-modal ret))))}
[:span.flex.items-center.justify-between.w-full
(t :pdf/doc-metadata)

66
src/main/frontend/handler/events.cljs
View File

@ -250,12 +250,11 @@
(p/catch (fn [^js e]
(notification/show! (str e) :error)
(js/console.error e)))))))))
(state/set-modal!
(file-sync/pick-dest-to-sync-panel graph)
{:center? true})))
(shui/dialog-open!
(file-sync/pick-dest-to-sync-panel graph))))
(defmethod handle :graph/pick-page-histories [[_ graph-uuid page-name]]
(state/set-modal!
(shui/dialog-open!
(file-sync/pick-page-histories-panel graph-uuid page-name)
{:id :page-histories :label "modal-page-histories"}))
@ -292,7 +291,7 @@
(defmethod handle :modal/nfs-ask-permission []
(when-let [repo (get-local-repo)]
(state/set-modal! (ask-permission repo))))
(shui/dialog-open! (ask-permission repo))))
(defonce *query-properties (atom {}))
(rum/defc query-properties-settings-inner < rum/reactive
@ -350,12 +349,16 @@
{})))
(defmethod handle :modal/show-cards [_]
(state/set-modal! srs/global-cards {:id :srs
:label "flashcards__cp"}))
(shui/dialog-open!
srs/global-cards
{:id :srs
:label "flashcards__cp"}))
(defmethod handle :modal/show-instruction [_]
(state/set-modal! capacitor-fs/instruction {:id :instruction
:label "instruction__cp"}))
(shui/dialog-open!
capacitor-fs/instruction
{:id :instruction
:label "instruction__cp"}))
(defmethod handle :modal/show-themes-modal [[_ classic?]]
(if classic?
@ -371,15 +374,8 @@
{:id label
:label label}))))
(rum/defc modal-output
[content]
content)
(defmethod handle :modal/show [[_ content]]
(state/set-modal! #(modal-output content)))
(defmethod handle :modal/set-git-username-and-email [[_ _content]]
(state/set-modal! git-component/set-git-username-and-email))
(shui/dialog-open! git-component/set-git-username-and-email))
(defmethod handle :page/create [[_ page-name opts]]
(if (= page-name (date/today))
@ -404,7 +400,8 @@
(defmethod handle :modal/display-file-version-selector [[_ versions path get-content]]
(state/set-modal! #(git-component/file-version-selector versions path get-content)))
(shui/dialog-open!
#(git-component/file-version-selector versions path get-content)))
(defmethod handle :graph/sync-context []
(let [context {:dev? config/dev?
@ -673,17 +670,16 @@
(file-sync-restart!))
(defmethod handle :graph/ask-for-re-fresh [_]
(handle
[:modal/show
[:div {:style {:max-width 700}}
[:p (t :sync-from-local-changes-detected)]
(ui/button
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:on-click (fn []
(state/close-modal!)
(nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]]))
(shui/dialog-open!
[:div {:style {:max-width 700}}
[:p (t :sync-from-local-changes-detected)]
(ui/button
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:on-click (fn []
(state/close-modal!)
(nfs-handler/refresh! (state/get-current-repo) refresh-cb)))]))
(defmethod handle :sync/create-remote-graph [[_ current-repo]]
(let [graph-name (js/decodeURI (util/node-path.basename current-repo))]
@ -704,7 +700,7 @@
(state/get-repos)))))))
(defmethod handle :modal/remote-encryption-input-pw-dialog [[_ repo-url remote-graph-info type opts]]
(state/set-modal!
(shui/dialog-open!
(encryption/input-password
repo-url nil (merge
(assoc remote-graph-info
@ -744,15 +740,15 @@
:path-params {:name (:block/name page-entity)}}))))))
(defmethod handle :whiteboard/onboarding [[_ opts]]
(state/set-modal!
(fn [close-fn] (whiteboard/onboarding-welcome close-fn))
(shui/dialog-open!
(fn [{:keys [close]}] (whiteboard/onboarding-welcome close))
(merge {:close-btn? false
:center? true
:close-backdrop? false} opts)))
(defmethod handle :file-sync/onboarding-tip [[_ type opts]]
(let [type (keyword type)]
(state/set-modal!
(shui/dialog-open!
(file-sync/make-onboarding-panel type)
(merge {:close-btn? false
:center? true
@ -827,7 +823,7 @@
:native-icloud? (not (string/blank? (state/get-icloud-container-root-url)))
:logged? (user-handler/logged-in?)} opts)]
(if (mobile-util/native-ios?)
(state/set-modal!
(shui/dialog-open!
#(graph-picker/graph-picker-cp opts')
{:label "graph-setup"})
(page-handler/ls-dir-files! st/refresh! opts'))))
@ -1035,7 +1031,7 @@
(defmethod handle :show/multiple-tabs-error-dialog [_]
(state/set-state! :error/multiple-tabs-access-opfs? true)
(state/set-modal! multi-tabs-dialog {:container-overflow-visible? true}))
(shui/dialog-open! multi-tabs-dialog))
(defmethod handle :rtc/sync-state [[_ state]]
(state/update-state! :rtc/state (fn [old] (merge old state))))

24
src/main/frontend/handler/file_based/events.cljs
View File

@ -10,29 +10,29 @@
[frontend.state :as state]
[frontend.ui :as ui]
[frontend.util :as util]
[frontend.config :as config]))
[frontend.config :as config]
[logseq.shui.ui :as shui]))
(defmethod events/handle :graph/ask-for-re-index [[_ *multiple-windows? ui]]
;; *multiple-windows? - if the graph is opened in multiple windows, boolean atom
;; ui - custom message to show on asking for re-index
(if (and (util/atom? *multiple-windows?) @*multiple-windows?)
(events/handle
[:modal/show
(shui/dialog-open!
[:div
(when (not (nil? ui)) ui)
[:p (t :re-index-multiple-windows-warning)]]])
(events/handle
[:modal/show
[:p (t :re-index-multiple-windows-warning)]])
(shui/dialog-open!
[:div {:style {:max-width 700}}
(when (not (nil? ui)) ui)
[:p (t :re-index-discard-unsaved-changes-warning)]
(ui/button
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:on-click (fn []
(state/close-modal!)
(state/pub-event! [:graph/re-index])))]])))
(t :yes)
:autoFocus "on"
:class "ui__modal-enter"
:on-click (fn []
(shui/dialog-close!)
(state/pub-event! [:graph/re-index])))])))
(defmethod events/handle :graph/re-index [[_]]
;; Ensure the graph only has ONE window instance

29
src/main/frontend/ui.css
View File

@ -179,16 +179,6 @@
}
}
&[label="flashcards__cp"] {
.panel-content {
padding: 2rem 0;
@screen sm {
padding: 2rem 2rem;
}
}
}
&[label="instruction__cp"] {
.ui__modal-panel {
@ -222,25 +212,6 @@ html.is-native-iphone-without-notch {
.ls-card {
min-height: 65vh;
}
.ui__modal {
&[label="flashcards__cp"] {
.panel-content {
padding: 2rem 1rem 1rem;
width: 90vw;
.cards-review {
padding-left: 0px;
padding-right: 0px;
}
.blocks-container {
transform: translateX(-7px);
width: 103%;
}
}
}
}
}
html.is-mobile {