chore: introduce type icon

pull/6707/head
Konstantinos Kaloutas 2022-09-15 12:18:58 +03:00
parent 7a975ac322
commit f0471bf902
7 changed files with 72 additions and 53 deletions

View File

@ -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: "";
}
}
}

View File

@ -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

View File

@ -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

View File

@ -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 {

View File

@ -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"

View File

@ -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]

View File

@ -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);
}
}
}