From 13790587bbb3b3192822658071a188428e11450e Mon Sep 17 00:00:00 2001 From: Junyu Zhan Date: Fri, 9 Apr 2021 15:42:58 +0800 Subject: [PATCH] feat: add more space & color contrast to search result --- src/main/frontend/components/editor.cljs | 6 +- src/main/frontend/components/search.cljs | 70 ++++++++++-------------- src/main/frontend/components/theme.css | 25 ++++++--- 3 files changed, 49 insertions(+), 52 deletions(-) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 01ec39d3f52..a10a1900aeb 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -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 diff --git a/src/main/frontend/components/search.cljs b/src/main/frontend/components/search.cljs index f8feb9c39c8..fab3c786424 100644 --- a/src/main/frontend/components/search.cljs +++ b/src/main/frontend/components/search.cljs @@ -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 "\"")]] + + :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?) diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index 4981672e25b..b4b002178db 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -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; } -} \ No newline at end of file +}