diff --git a/src/main/frontend/components/command_palette.css b/src/main/frontend/components/command_palette.css index db9f43c9b..ed839fd31 100644 --- a/src/main/frontend/components/command_palette.css +++ b/src/main/frontend/components/command_palette.css @@ -43,34 +43,6 @@ .search-result { @apply text-sm font-medium flex items-baseline; - - - &.highlight .search-result-icon { - color: var(--ls-selection-text-color); - border-color: var(--ls-selection-background-color); - - &:before { - opacity: 0.5; - background: var(--ls-selection-background-color); - } - } - } - - .search-result-icon { - @apply text-xs text-center flex items-center justify-center rounded border mr-2 relative; - - width: 1.5rem; - height: 1.5rem; - flex-shrink: 0; - border-color: transparent; - overflow: hidden; - color: var(--ls-secondary-text-color); - - &:before { - @apply block absolute inset-0 ; - background: var(--ls-primary-background-color); - content: ""; - } } } diff --git a/src/main/frontend/components/search.cljs b/src/main/frontend/components/search.cljs index d2759f1b5..65926f937 100644 --- a/src/main/frontend/components/search.cljs +++ b/src/main/frontend/components/search.cljs @@ -62,10 +62,9 @@ [:p {:class "m-0"} elements])))))) (rum/defc search-result-item - [{:keys [icon content class]}] - [:.search-result {:class class} - [:.search-result-icon {:title icon} - (ui/icon icon {:extension? (not= icon "file")})] + [icon content] + [:.search-result + (ui/type-icon icon) [:.self-center content]]) (rum/defc block-search-result-item @@ -194,10 +193,11 @@ (defn- create-item-render [icon label name] (search-result-item - {:icon icon + {:name icon :class "highlight" - :content [:div.text.font-bold (str label ": ") - [:span.ml-1 name]]})) + :extension? true} + [:div.text.font-bold (str label ": ") + [:span.ml-1 name]])) (defn- search-item-render [search-q {:keys [type data alias]}] @@ -219,12 +219,15 @@ (when alias (let [target-original-name (model/get-page-original-name alias)] [:span.mr-2.text-sm.font-medium.mb-2 (str "Alias -> " target-original-name)])) - (search-result-item {:icon (if (model/whiteboard-page? data) "whiteboard" "page") - :content (highlight-exact-query data search-q)})] + (search-result-item {:name (if (model/whiteboard-page? data) "whiteboard" "page") + :extension? true + :title (t (if (model/whiteboard-page? data) :search-item/whiteboard :search-item/page))} + (highlight-exact-query data search-q))] :file - (search-result-item {:icon "file" - :content (highlight-exact-query data search-q)}) + (search-result-item {:name "file" + :title (t :search-item/file)} + (highlight-exact-query data search-q)) :block (let [{:block/keys [page uuid]} data ;; content here is normalized @@ -234,11 +237,13 @@ block (model/query-block-by-uuid uuid) content (:block/content block)] [:span {:data-block-ref uuid} - (search-result-item {:icon "block" - :content (if block - (block-search-result-item repo uuid format content search-q search-mode) - (do (log/error "search result with non-existing uuid: " data) - (str "Cache is outdated. Please click the 'Re-index' button in the graph's dropdown menu.")))})]) + (search-result-item {:name "block" + :title (t :search-item/block) + :extension? true} + (if block + (block-search-result-item repo uuid format content search-q search-mode) + (do (log/error "search result with non-existing uuid: " data) + (str "Cache is outdated. Please click the 'Re-index' button in the graph's dropdown menu."))))]) nil)])) @@ -369,8 +374,9 @@ svg/search [:span.ml-2 data]] :page (when-let [original-name (model/get-page-original-name data)] ;; might be block reference - (search-result-item {:icon "page" - :content original-name})) + (search-result-item {:name "page" + :extension? true} + original-name)) nil))}))]) (defn default-placeholder diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs index 76e323a73..aa6b0409a 100644 --- a/src/main/frontend/components/sidebar.cljs +++ b/src/main/frontend/components/sidebar.cljs @@ -241,13 +241,16 @@ :class "new-page-link" :options {:on-click #((close-sidebar-on-mobile!) (state/pub-event! [:go/search]))} - :icon (ui/icon "page" {:extension? true})} + :icon (ui/type-icon {:name "new-page" + :class "highlight" + :extension? true})} {:title (t :left-side-bar/new-whiteboard) :class "new-whiteboard-link" :options {:on-click #((close-sidebar-on-mobile!) (whiteboard/create-new-whiteboard!))} - - :icon (ui/icon "whiteboard" {:extension? true})}]) + :icon (ui/type-icon {:name "new-whiteboard" + :class "highlight" + :extension? true})}]) {})) (rum/defc sidebar-nav diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css index 33f822276..d647a5792 100644 --- a/src/main/frontend/components/sidebar.css +++ b/src/main/frontend/components/sidebar.css @@ -287,10 +287,6 @@ bottom: 0; left: calc(100% + 6px); } - - i { - @apply text-xs rounded border mr-2 w-5 h-5 text-center; - } } #create-button { diff --git a/src/main/frontend/dicts.cljc b/src/main/frontend/dicts.cljc index fb8afd847..9d2a3c00a 100644 --- a/src/main/frontend/dicts.cljc +++ b/src/main/frontend/dicts.cljc @@ -45,6 +45,10 @@ :search/result-for "Search result for " :search/items "items" :search/page-names "Search page names" + :search-item/whiteboard "Whiteboard" + :search-item/page "Page" + :search-item/file "File" + :search-item/block "Block" :help/context-menu "Block context menu" :help/fold-unfold "Fold/unfold blocks (when not in edit mode)" :help/markdown-syntax "Markdown syntax" diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index ccd47a68b..df81b2441 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -930,6 +930,12 @@ (if extension? "tie tie" "ti ti"))} (dissoc opts :class :extension?))])) +(rum/defc type-icon + [{:keys [name class title extension?]}] + [:.type-icon {:class class + :title title} + (icon name {:extension? extension?})]) + (rum/defc with-shortcut < rum/reactive < {:key-fn (fn [key pos] (str "shortcut-" key pos))} [shortcut-key position content] diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css index e649c1422..f699438d6 100644 --- a/src/main/frontend/ui.css +++ b/src/main/frontend/ui.css @@ -352,3 +352,35 @@ html.is-mobile { .bg-quaternary { background-color: var(--ls-quaternary-background-color); } + +.type-icon { + @apply text-xs text-center flex items-center justify-center rounded border mr-2 relative; + + width: 1.5rem; + height: 1.5rem; + flex-shrink: 0; + border-color: var(--ls-primary-background-color); + overflow: hidden; + color: var(--ls-primary-text-color); + + .ti, + .tie { + z-index: 1; + } + + &:before { + @apply block absolute inset-0 ; + background: var(--ls-primary-background-color); + content: " "; + } + + &.highlight { + color: var(--ls-selection-text-color); + border-color: var(--ls-selection-background-color); + + &:before { + opacity: 0.5; + background: var(--ls-selection-background-color); + } + } +}