From 245cebedde8644ebf8d5be91f3d951c9a73aff48 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Thu, 23 Nov 2017 11:49:50 +0100
Subject: [PATCH] dashlist: style list to be same as dash search

---
 .../dashboard/partials/dashboardList.html     | 24 ++++++++++---------
 public/sass/components/_search.scss           | 22 ++++++++++++-----
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html
index 0ab7aa28175..10e7be6b2a9 100644
--- a/public/app/features/dashboard/partials/dashboardList.html
+++ b/public/app/features/dashboard/partials/dashboardList.html
@@ -51,8 +51,8 @@
         </div>
       </div>
 
-        <div class="admin-list-table" style="height: 80%">
-          <div>
+        <div style="height: 80%">
+          <div style="width: 40%; display: flex; float: right;">
             <select
               class="gf-form-input"
               ng-model="ctrl.selectedStarredFilter"
@@ -67,16 +67,15 @@
             />
           </div>
           <div gemini-scrollbar>
-            <div ng-show="ctrl.sections.length > 0">
+            <div class="search-results-container" ng-show="ctrl.sections.length > 0">
               <div ng-repeat="section in ctrl.sections" class="search-section">
 
-                <div class="search-section__header pointer" ng-show="::section.title">
+                <div class="search-section__header__with-checkbox" ng-hide="section.hideHeader">
                   <gf-form-switch
-                    switch-class="gf-form-switch--table-cell"
                     on-change="ctrl.selectionChanged()"
                     checked="section.checked">
                   </gf-form-switch>
-                  <a ng-click="ctrl.toggleFolder(section)">
+                  <a  class="search-section__header pointer" ng-click="ctrl.toggleFolder(section)" ng-hide="section.hideHeader">
                     <i class="search-section__header__icon" ng-class="section.icon"></i>
                     <span class="search-section__header__text">{{::section.title}}</span>
                     <i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
@@ -85,17 +84,20 @@
                 </div>
 
                 <div ng-if="section.expanded">
-                  <div ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}">
+                  <div ng-repeat="item in section.items" class="search-item__with-checkbox" ng-class="{'selected': item.selected}">
                     <gf-form-switch
-                      switch-class="gf-form-switch--table-cell"
                       on-change="ctrl.selectionChanged()"
                       checked="item.checked" />
-                    <a ng-href="{{::item.url}}">
+                    <a ng-href="{{::item.url}}" class="search-item">
                       <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="item.folderTitle && 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">
diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss
index 972a7fe61b6..5ab8c1e75f3 100644
--- a/public/sass/components/_search.scss
+++ b/public/sass/components/_search.scss
@@ -16,12 +16,6 @@
   bottom: 0;
   z-index: ($zindex-modal-backdrop + 10);
   position: fixed;
-
-  .label-tag {
-    margin-left: 6px;
-    font-size: 11px;
-    padding: 2px 6px;
-  }
 }
 
 // Search
@@ -84,6 +78,12 @@
   position: relative;
   flex-grow: 10;
 
+  .label-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+
   .selected {
     .search-result-tag {
       opacity: 0.70;
@@ -97,6 +97,7 @@
   padding: 0.6rem 0;
   color: $text-color-weak;
   display: flex;
+  flex-grow: 1;
 
   &:hover {
     color: $text-color-weak;
@@ -107,6 +108,10 @@
   }
 }
 
+.search-section__header__with-checkbox {
+  display: flex;
+}
+
 .search-section__header__icon {
   padding: 3px 10px;
 }
@@ -119,8 +124,13 @@
   flex-grow: 1;
 }
 
+.search-item__with-checkbox {
+  display: flex;
+}
+
 .search-item {
   display: flex;
+  flex-grow: 1;
   height: 37px;
   padding: 0px;
   white-space: nowrap;