diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 76b2436ea35..712757a2aa4 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -68,8 +68,12 @@ - - {{::item.title}} + +
{{::item.title}}
+
+ + {{::item.folderTitle}} +
diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index b7717a826f3..6aa7e441d18 100644 --- a/public/app/core/services/search_srv.ts +++ b/public/app/core/services/search_srv.ts @@ -81,6 +81,7 @@ export class SearchSrv { toggleFolder(section) { section.expanded = !section.expanded; + section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder'; if (section.items.length) { return; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 796db537589..9fad62ef60c 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -118,7 +118,7 @@ .search-item { display: flex; - height: 35px; + height: 37px; padding: 0px; white-space: nowrap; background-color: $tight-form-bg; @@ -142,12 +142,24 @@ // color: $orange; // } } - -.search-item__title { - color: $grafanaListMainLinkColor; +.search-item__body { flex: 1 1 auto; overflow: hidden; - padding: 8px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 10px; +} + +.search-item__body-title { + color: $grafanaListMainLinkColor; +} + +.search-item__body-sub-title { + color: $grafanaListMainLinkColor; + color: $text-muted; + font-size: $font-size-sm; + line-height: 9pt; } .search-item__icon {