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

feat: add more space & color contrast to search result

pull/1644/head
Junyu Zhan 2021-04-09 15:42:58 +08:00 committed by Tienson Qin
parent fcce095c92
commit 13790587bb
3 changed files with 49 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/frontend/components/editor.cljs
View File

@ -89,6 +89,7 @@
matched-pages
{:on-chosen (page-handler/on-chosen-handler input id q pos format)
:on-enter #(page-handler/page-not-exists-handler input id q current-pos)
:item-render (fn [item] [:div.py-2 (search/highlight-exact-query item q)])
:empty-div [:div.text-gray-500.pl-4.pr-4 "Search for a page"]
:class "black"}))))))
@ -118,7 +119,7 @@
repo (state/sub :git/current-repo)
format (db/get-page-format page)]
(search/block-search-result-item repo uuid format content q)))
[:.py-2 (search/block-search-result-item repo uuid format content q)]))
:class "black"}))))
(rum/defcs block-search < rum/reactive
@ -286,6 +287,7 @@
:style (merge
{:top (+ top offset-top)
:max-height to-max-height
:max-width 700
:z-index 11}
(if set-default-width?
{:width max-width})
@ -408,7 +410,7 @@
(transition-cp
(block-search id format)
true
false
*slash-caret-pos)
(transition-cp

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

@ -17,23 +17,12 @@
[medley.core :as medley]
[frontend.context.i18n :as i18n]))
(rum/defc dropdown-content-wrapper [state content]
[:div.origin-top-left.absolute.left-0.mt-0.rounded-md.shadow-lg
{:class (case state
"entering" "transition ease-out duration-100 transform opacity-0 scale-95"
"entered" "transition ease-out duration-100 transform opacity-100 scale-100"
"exiting" "transition ease-in duration-75 transform opacity-100 scale-100"
"exited" "transition ease-in duration-75 transform opacity-0 scale-95")}
content])
(defn- partition-between
"Split `coll` at positions where `pred?` is true."
[pred? coll]
(let [switch (reductions not= true (map pred? coll (rest coll)))]
(map (partial map first) (partition-by second (map list coll switch)))))
(defn highlight-exact-query
[content q]
(if (or (string/blank? content) (string/blank? q))
@ -72,9 +61,16 @@
(conj result [:span content])))]
[:p {:class "m-0"} elements])))))
(rum/defc search-result-item
[type content]
[:.text-sm.font-medium.flex.items-baseline
[:.text-xs.rounded.border.mr-2.px-1 {:title type}
(get type 0)]
content])
(rum/defc block-search-result-item
[repo uuid format content q]
[:div [(block/block-parents {:id "block-search-block-parent" :block? true} repo (clojure.core/uuid uuid) format)
[:div [[:div {:class "mb-1"} (block/block-parents {:id "block-search-block-parent" :block? true} repo (clojure.core/uuid uuid) format)]
[:div {:class "font-medium"} (highlight-exact-query content q)]]])
(rum/defc highlight-fuzzy
@ -160,7 +156,7 @@
{:style (merge
{:top 48
:left 32
:width 500})}
:width 700})}
(ui/auto-complete
result
{:class "search-results"
@ -210,39 +206,31 @@
nil))
:item-render (fn [{:keys [type data]}]
(case type
:new-page
[:div.text.font-bold (str (t :new-page) ": ")
[:span.ml-1 (str "\"" search-q "\"")]]
:new-file
[:div.text.font-bold (str (t :new-file) ": ")
[:span.ml-1 (str "\"" search-q "\"")]]
[:div {:class "py-2"} (case type
:new-page
[:div.text.font-bold (str (t :new-page) ": ")
[:span.ml-1 (str "\"" search-q "\"")]]
:page
[:div.text-sm.font-medium
[:span.text-xs.rounded.border.mr-2.px-1 {:title "Page"}
"P"]
data]
:new-file
[:div.text.font-bold (str (t :new-file) ": ")
[:span.ml-1 (str "\"" search-q "\"")]]
:file
[:div.text-sm.font-medium
[:span.text-xs.rounded.border.mr-2.px-1 {:title "File"}
"F"]
data]
:page
(search-result-item "Page" (highlight-exact-query data search-q))
:block
(let [{:block/keys [page content uuid]} data
page (or (:page/original-name page)
(:page/name page))
repo (state/sub :git/current-repo)
format (db/get-page-format page)]
[:div.flex-1.flex.items-center
[[:span.text-xs.rounded.border.mr-2.px-1 {:title "Block"}
"B"]
(block-search-result-item repo uuid format content search-q)]])
:file
(search-result-item "File" (highlight-exact-query data search-q))
nil))})])))
:block
(let [{:block/keys [page content uuid]} data
page (or (:page/original-name page)
(:page/name page))
repo (state/sub :git/current-repo)
format (db/get-page-format page)]
(search-result-item "Block" (block-search-result-item repo uuid format content search-q)))
nil)])})])))
(rum/defcs search < rum/reactive
(rum/local false ::inside-box?)

25
src/main/frontend/components/theme.css
View File

@ -1,6 +1,7 @@
:root {
scrollbar-width: thin;
scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
scrollbar-color: var(--ls-scrollbar-foreground-color)
var(--ls-scrollbar-background-color);
--ls-z-index-level-0: 0;
--ls-z-index-level-1: 9;
@ -54,7 +55,7 @@ html {
transform: scale(1.1);
}
html[data-theme=dark] {
html[data-theme='dark'] {
background-color: var(--ls-primary-background-color);
input.form-input {
@ -62,7 +63,7 @@ html[data-theme=dark] {
}
}
html[data-theme=light] {
html[data-theme='light'] {
.form-checkbox {
&:focus {
border-color: var(--ls-page-checkbox-border-color);
@ -73,6 +74,12 @@ html[data-theme=light] {
a {
color: var(--ls-primary-text-color);
}
.block-parents {
a {
color: var(--ls-link-ref-text-color);
}
}
}
a.right-sidebar-button {
@ -115,7 +122,7 @@ html.is-electron {
}
&:before {
content: " ";
content: ' ';
position: fixed;
top: 0;
left: 0;
@ -174,7 +181,7 @@ html.is-electron {
}
& > .c {
font-size: .7rem;
font-size: 0.7rem;
}
a.it {
@ -191,15 +198,15 @@ html.is-electron {
}
svg {
transform: scale(.6);
transform: scale(0.6);
color: var(--ls-primary-text-color);
cursor: pointer;
}
&.maximize {
svg {
transform: scale(.5) translateY(2px) translateX(1px);
opacity: .7;
transform: scale(0.5) translateY(2px) translateX(1px);
opacity: 0.7;
}
}
}
@ -214,4 +221,4 @@ html.is-resizing-buf {
#right-sidebar {
transition: none;
}
}
}