more work on search

public/app/core/components/search/search.html

@@ -68,8 +68,12 @@
 							<span class="search-item__icon">
 								<i class="fa fa-th-large"></i>
 							</span>
-							<span class="search-item__title">
-								{{::item.title}}
+							<span class="search-item__body">
+								<div class="search-item__body-title">{{::item.title}}</div>
+								<div class="search-item__body-sub-title" ng-show="::section.hideHeader">
+									<i class="fa fa-folder-o"></i>
+									{{::item.folderTitle}}
+								</div>
 							</span>
 							<span class="search-item__tags">
 								<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">

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;

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 {