From ad2e74d1fef3b2639f0bb6433239ca4b39c7ac66 Mon Sep 17 00:00:00 2001
From: Michel Engelen <32863416+michelengelen@users.noreply.github.com>
Date: Wed, 26 Aug 2020 10:13:20 +0200
Subject: [PATCH] Dashboard: Adds folder name and link to the dashboard
 overview on the homepage (#27214)

* Chore: Added foldername to the dashboard overview on the startpage

## Dashlist

### added
- new `<span>` containing `dash.folderTitle`
- styling for the newly created `<span>`

### changed
- added sass-nesting to classes in `_panel_dashlist.scss`

closes #26869

* Chore: Added foldername to the dashboard overview on the startpage

## Dashlist

### changed
- added `ng-if` directive to the dashlist-folder span

* Chore: Added foldername to the dashboard overview on the startpage

## Dashlist

### changed
- added folder-icon and removed brackets to indicate `folderTitle`
- changed font-size of folderTitle-`span` and added left margin
---
 public/app/plugins/panel/dashlist/module.html |  4 ++++
 public/sass/components/_panel_dashlist.scss   | 22 +++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html
index d6664722fd4..e382c283b71 100644
--- a/public/app/plugins/panel/dashlist/module.html
+++ b/public/app/plugins/panel/dashlist/module.html
@@ -9,6 +9,10 @@
           <span class="dashlist-title">
             {{dash.title}}
           </span>
+          <span ng-if="dash.folderTitle" class="dashlist-folder">
+            <icon name="'folder'" type="mono" size="'xs'"></icon>
+            {{dash.folderTitle}}
+          </span>
           <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
             <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
           </span>
diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss
index 193484db713..06006e2ead9 100644
--- a/public/sass/components/_panel_dashlist.scss
+++ b/public/sass/components/_panel_dashlist.scss
@@ -8,18 +8,26 @@
   padding-top: 3px;
 }
 
-.dashlist-link {
-  @include list-item();
+.dashlist {
+  &-link {
+    @include list-item();
 
-  .fa {
-    padding-top: 3px;
+    .fa {
+      padding-top: 3px;
+    }
+
+    .fa-star {
+      color: $orange;
+    }
   }
 
-  .dashlist-star {
+  &-star {
     float: right;
   }
 
-  .fa-star {
-    color: $orange;
+  &-folder {
+    color: $text-color-weak;
+    margin-left: $space-sm;
+    font-size: $font-size-xs;
   }
 }