Skip to content

Commit

Permalink
feat: add more space & color contrast to search result
Browse files Browse the repository at this point in the history
  • Loading branch information
@thezjy @tiensonqin
thezjy authored and tiensonqin committed Apr 9, 2021
1 parent fcce095 commit 1379058
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 52 deletions.
6 changes: 4 additions & 2 deletions src/main/frontend/components/editor.cljs
View file
Expand Up @@ -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"}))))))

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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})
Expand Down Expand Up @@ -408,7 +410,7 @@

(transition-cp
(block-search id format)
true
false
*slash-caret-pos)

(transition-cp
Expand Down
70 changes: 29 additions & 41 deletions src/main/frontend/components/search.cljs
View file
Expand Up @@ -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))
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -160,7 +156,7 @@
{:style (merge
{:top 48
:left 32
:width 500})}
:width 700})}
(ui/auto-complete
result
{:class "search-results"
Expand Down Expand Up @@ -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 "\"")]]

:new-file
[:div.text.font-bold (str (t :new-file) ": ")
[: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]
:page
(search-result-item "Page" (highlight-exact-query data search-q))

:file
[:div.text-sm.font-medium
[:span.text-xs.rounded.border.mr-2.px-1 {:title "File"}
"F"]
data]
:file
(search-result-item "File" (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)]])
: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))})])))
nil)])})])))

(rum/defcs search < rum/reactive
(rum/local false ::inside-box?)
Expand Down
25 changes: 16 additions & 9 deletions 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;
Expand Down Expand Up @@ -54,15 +55,15 @@ html {
transform: scale(1.1);
}

html[data-theme=dark] {
html[data-theme='dark'] {
background-color: var(--ls-primary-background-color);

input.form-input {
background: none;
}
}

html[data-theme=light] {
html[data-theme='light'] {
.form-checkbox {
&:focus {
border-color: var(--ls-page-checkbox-border-color);
Expand All @@ -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 {
Expand Down Expand Up @@ -115,7 +122,7 @@ html.is-electron {
}

&:before {
content: " ";
content: ' ';
position: fixed;
top: 0;
left: 0;
Expand Down Expand Up @@ -174,7 +181,7 @@ html.is-electron {
}

& > .c {
font-size: .7rem;
font-size: 0.7rem;
}

a.it {
Expand All @@ -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;
}
}
}
Expand All @@ -214,4 +221,4 @@ html.is-resizing-buf {
#right-sidebar {
transition: none;
}
}
}

0 comments on commit 1379058

Please sign in to comment.