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

fix(ui): polish search & commands palettle

pull/2838/head
charlie 2021-09-17 18:45:20 +08:00 committed by Tienson Qin
parent 1ea0d55280
commit 3881d11b18
3 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/frontend/components/command_palette.cljs
View File

@ -44,13 +44,15 @@
(rum/with-context [[t] i18n/*tongue-context*]
(let [input (::input state)]
[:div.cp__palette.cp__palette-main
[:input.cp__palette-input.w-full
{:type "text"
:placeholder (t :command-palette/prompt)
:auto-focus true
:value @input
:on-change (fn [e] (reset! input (util/evalue e)))}]
[:div.w-full
[:div.input-wrap
[:input.cp__palette-input.w-full
{:type "text"
:placeholder (t :command-palette/prompt)
:auto-focus true
:value @input
:on-change (fn [e] (reset! input (util/evalue e)))}]]
[:div.command-results-wrap
(ui/auto-complete
(if (str/blank? @input)
(cp/top-commands limit)

22
src/main/frontend/components/command_palette.css
View File

@ -1,7 +1,13 @@
.cp__palette {
--palettle-input-height: 64px;
--palettle-container-height: 70vh;
&-main {
max-height: 60vh;
margin: -1rem;
max-height: var(--palettle-container-height);
margin: -2rem;
overflow: hidden;
display: flex;
flex-direction: column;
width: 80vw;
@ -13,11 +19,23 @@
background-color: transparent;
transition: none;
border: none;
border-radius: unset !important;
}
.chosen {
background-color: var(--ls-quaternary-background-color);
}
.command-results-wrap,
.search-results-wrap > div:first-child {
overflow-x: hidden;
overflow-y: auto;
max-height: calc(var(--palettle-container-height) - var(--palettle-input-height));
}
.input-wrap {
height: var(--palettle-input-height);
}
}
&-input {

67
src/main/frontend/components/search.cljs
View File

@ -293,38 +293,41 @@
(rum/with-context [[t] i18n/*tongue-context*]
(let [input (::input state)]
[:div.cp__palette.cp__palette-main
[:input.cp__palette-input.w-full
{:type "text"
:auto-focus true
:placeholder (case search-mode
:graph
(t :graph-search)
:page
(t :page-search)
(t :search))
:auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
:default-value ""
:on-change (fn [e]
(when @search-timeout
(js/clearTimeout @search-timeout))
(let [value (util/evalue e)]
(if (string/blank? value)
(search-handler/clear-search! false)
(let [search-mode (state/get-search-mode)
opts (if (= :page search-mode)
(let [current-page (or (state/get-current-page)
(date/today))]
{:page-db-id (:db/id (db/entity [:block/name (string/lower-case current-page)]))})
{})]
(state/set-q! value)
(reset! search-timeout
(js/setTimeout
(fn []
(if (= :page search-mode)
(search-handler/search (state/get-current-repo) value opts)
(search-handler/search (state/get-current-repo) value)))
timeout))))))}]
[:div.w-full
[:div.input-wrap
[:input.cp__palette-input.w-full
{:type "text"
:auto-focus true
:placeholder (case search-mode
:graph
(t :graph-search)
:page
(t :page-search)
(t :search))
:auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
:default-value ""
:on-change (fn [e]
(when @search-timeout
(js/clearTimeout @search-timeout))
(let [value (util/evalue e)]
(if (string/blank? value)
(search-handler/clear-search! false)
(let [search-mode (state/get-search-mode)
opts (if (= :page search-mode)
(let [current-page (or (state/get-current-page)
(date/today))]
{:page-db-id (:db/id (db/entity [:block/name (string/lower-case current-page)]))})
{})]
(state/set-q! value)
(reset! search-timeout
(js/setTimeout
(fn []
(if (= :page search-mode)
(search-handler/search (state/get-current-repo) value opts)
(search-handler/search (state/get-current-repo) value)))
timeout))))))}]]
[:div.search-results-wrap
(search-auto-complete search-result search-q false)]]))))
(rum/defcs search < rum/reactive