mirror of https://github.com/logseq/logseq
fix: search input issues
parent
fac1180a07
commit
322e3a730a
|
@ -128,6 +128,8 @@
|
|||
(fn [data]
|
||||
(let [data' (bean/->clj data)]
|
||||
(state/set-state! [:ui/find-in-page :matches] data')
|
||||
(state/set-state! [:ui/find-in-page :searching?] false)
|
||||
(ui/focus-element "search-in-page-input")
|
||||
true)))
|
||||
|
||||
(js/window.apis.on "loginCallback"
|
||||
|
|
|
@ -6,35 +6,23 @@
|
|||
[frontend.handler.search :as search-handler]
|
||||
[goog.dom :as gdom]
|
||||
[goog.functions :refer [debounce]]
|
||||
[frontend.mixins :as mixins]
|
||||
[clojure.string :as string]))
|
||||
|
||||
(defn focus-input!
|
||||
[]
|
||||
(when-let [element ^js (gdom/getElement "search-in-page-input")]
|
||||
(.focus element)))
|
||||
[frontend.mixins :as mixins]))
|
||||
|
||||
(defn find-in-page!
|
||||
[]
|
||||
(search-handler/electron-find-in-page! focus-input!))
|
||||
(search-handler/electron-find-in-page!))
|
||||
|
||||
(defonce debounced-search (debounce find-in-page! 500))
|
||||
|
||||
(defn- enter-to-search
|
||||
(defn enter-to-search
|
||||
[e]
|
||||
(when (and (= (.-code e) "Enter")
|
||||
(not (state/editing?)))
|
||||
(let [shift? (.-shiftKey e)]
|
||||
(state/set-state! [:ui/find-in-page :backward?] shift?)
|
||||
(search-handler/electron-find-in-page!))))
|
||||
(debounced-search))))
|
||||
|
||||
(rum/defc search-inner <
|
||||
{:did-mount (fn [state]
|
||||
(js/document.addEventListener "keyup" enter-to-search)
|
||||
state)
|
||||
:will-unmount (fn [state]
|
||||
(js/document.removeEventListener "keyup" enter-to-search)
|
||||
state)}
|
||||
(mixins/event-mixin
|
||||
(fn [state]
|
||||
(mixins/hide-when-esc-or-outside
|
||||
|
@ -42,45 +30,65 @@
|
|||
:node (gdom/getElement "search-in-page")
|
||||
:on-hide (fn []
|
||||
(search-handler/electron-exit-find-in-page!)))))
|
||||
[{:keys [matches]}]
|
||||
[{:keys [matches searching? match-case? q]}]
|
||||
[:div#search-in-page.flex.flex-row.absolute.top-2.right-4.shadow-lg.px-2.py-1.faster-fade-in.items-center
|
||||
[:div.flex
|
||||
[:input#search-in-page-input.form-input.block.w-48.sm:text-sm.sm:leading-5.my-2.border-none.mr-4.outline-none
|
||||
[:div.flex.w-48
|
||||
(when searching? (ui/loading nil))
|
||||
[:input#search-in-page-input.form-input.block.sm:text-sm.sm:leading-5.my-2.border-none.mr-4.outline-none
|
||||
{:auto-focus true
|
||||
:style {:visibility (when searching? "hidden")}
|
||||
:type (if searching? "password" "text")
|
||||
:placeholder "Find in page"
|
||||
:aria-label "Find in page"
|
||||
:value q
|
||||
:on-key-down enter-to-search
|
||||
:on-change (fn [e]
|
||||
(let [value (util/evalue e)]
|
||||
(state/set-state! [:ui/find-in-page :q] value)
|
||||
(if (string/blank? value)
|
||||
(search-handler/electron-exit-find-in-page!)
|
||||
(debounced-search))))}]]
|
||||
|
||||
(debounced-search)))}]]
|
||||
[:div.px-4.text-sm.opacity-80
|
||||
(:activeMatchOrdinal matches 0)
|
||||
"/"
|
||||
(:matches matches 0)]
|
||||
|
||||
(ui/button
|
||||
(ui/icon "caret-up" {:style {:font-size 18}})
|
||||
:on-click (fn []
|
||||
(state/set-state! [:ui/find-in-page :backward?] true)
|
||||
(search-handler/electron-find-in-page!))
|
||||
:intent "link"
|
||||
:small? true)
|
||||
(ui/icon "letter-case")
|
||||
:on-click (fn []
|
||||
(state/update-state! [:ui/find-in-page :match-case?] not)
|
||||
(debounced-search))
|
||||
:intent "link"
|
||||
:small? true
|
||||
:class (str (when match-case? "active ") "text-lg"))
|
||||
|
||||
(ui/button
|
||||
(ui/icon "caret-down" {:style {:font-size 18}})
|
||||
:on-click (fn []
|
||||
(state/set-state! [:ui/find-in-page :backward?] false)
|
||||
(search-handler/electron-find-in-page!))
|
||||
:intent "link"
|
||||
:small? true)
|
||||
(ui/icon "caret-up")
|
||||
:on-click (fn []
|
||||
(state/set-state! [:ui/find-in-page :backward?] true)
|
||||
(debounced-search))
|
||||
:intent "link"
|
||||
:small? true
|
||||
:class "text-lg"
|
||||
:title "Previous result")
|
||||
|
||||
(ui/button
|
||||
[:span.px-1 "X"]
|
||||
:on-click (fn []
|
||||
(search-handler/electron-exit-find-in-page!))
|
||||
:intent "link"
|
||||
:small? true)])
|
||||
(ui/icon "caret-down")
|
||||
:on-click (fn []
|
||||
(state/set-state! [:ui/find-in-page :backward?] false)
|
||||
(debounced-search))
|
||||
:intent "link"
|
||||
:small? true
|
||||
:class "text-lg"
|
||||
:title "Next result")
|
||||
|
||||
(ui/button
|
||||
(ui/icon "x")
|
||||
:on-click (fn []
|
||||
(search-handler/electron-exit-find-in-page!))
|
||||
:intent "link"
|
||||
:small? true
|
||||
:class "text-lg"
|
||||
:title "Close")])
|
||||
|
||||
(rum/defc search < rum/reactive
|
||||
[]
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui__button[intent='link'], .ui__button[intent='link']:focus {
|
||||
.ui__button[intent='link'],
|
||||
.ui__button[intent='link']:focus {
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -49,25 +49,31 @@
|
|||
search-key (if more? :search/more-result :search/result)]
|
||||
(swap! state/state assoc search-key result)))))))
|
||||
|
||||
(defn open-find-in-page!
|
||||
[]
|
||||
(when (util/electron?)
|
||||
(let [{:keys [active?]} (:ui/find-in-page @state/state)]
|
||||
(when-not active? (state/set-state! [:ui/find-in-page :active?] true)))))
|
||||
|
||||
(defn electron-find-in-page!
|
||||
([]
|
||||
(electron-find-in-page! nil))
|
||||
([on-success]
|
||||
(when (util/electron?)
|
||||
(let [{:keys [active? backward? q]} (:ui/find-in-page @state/state)
|
||||
option (cond->
|
||||
{}
|
||||
[]
|
||||
(when (util/electron?)
|
||||
(let [{:keys [active? backward? match-case? q]} (:ui/find-in-page @state/state)
|
||||
option (cond->
|
||||
{}
|
||||
|
||||
(not active?)
|
||||
(assoc :findNext true)
|
||||
(not active?)
|
||||
(assoc :findNext true)
|
||||
|
||||
backward?
|
||||
(assoc :forward false))]
|
||||
(when-not active? (state/set-state! [:ui/find-in-page :active?] true))
|
||||
(when-not (string/blank? q)
|
||||
(ipc/ipc "find-in-page" q option)
|
||||
(when on-success
|
||||
(js/setTimeout #(on-success) 500)))))))
|
||||
backward?
|
||||
(assoc :forward false)
|
||||
|
||||
match-case?
|
||||
(assoc :matchCase true))]
|
||||
(open-find-in-page!)
|
||||
(when-not (string/blank? q)
|
||||
(state/set-state! [:ui/find-in-page :searching?] true)
|
||||
(ipc/ipc "find-in-page" q option)))))
|
||||
|
||||
(defn electron-exit-find-in-page!
|
||||
[& {:keys [clear-state?]
|
||||
|
|
|
@ -251,7 +251,7 @@
|
|||
|
||||
:go/electron-find-in-page {:binding "mod+f"
|
||||
:fn #(when (util/electron?)
|
||||
(search-handler/electron-find-in-page!))}
|
||||
(search-handler/open-find-in-page!))}
|
||||
|
||||
:go/journals {:binding "g j"
|
||||
:fn route-handler/go-to-journals!}
|
||||
|
|
|
@ -166,7 +166,7 @@
|
|||
opts))
|
||||
|
||||
(defn button
|
||||
[text & {:keys [background href class intent on-click small? large?]
|
||||
[text & {:keys [background href class intent on-click small? large? title]
|
||||
:or {small? false large? false}
|
||||
:as option}]
|
||||
(let [klass (when-not intent ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700.text-center")
|
||||
|
@ -176,6 +176,7 @@
|
|||
[:button.ui__button
|
||||
(merge
|
||||
{:type "button"
|
||||
:title title
|
||||
:class (str (util/hiccup->class klass) " " class)}
|
||||
(dissoc option :background :class :small? :large?)
|
||||
(when href
|
||||
|
@ -274,6 +275,11 @@
|
|||
[]
|
||||
(gdom/getElement "main-content-container"))
|
||||
|
||||
(defn focus-element
|
||||
[element]
|
||||
(when-let [element ^js (gdom/getElement element)]
|
||||
(.focus element)))
|
||||
|
||||
(defn get-scroll-top []
|
||||
(.-scrollTop (main-node)))
|
||||
|
||||
|
|
|
@ -243,6 +243,10 @@ html.is-mobile {
|
|||
@apply text-white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--ls-link-text-color);
|
||||
}
|
||||
|
||||
&[intent='logseq'] {
|
||||
@apply focus:border-gray-500 dark:hover:text-gray-200;
|
||||
|
||||
|
|
Loading…
Reference in New Issue