fix(getting started panel): some more work on this, #6466

public/app/plugins/panel/gettingstarted/module.ts

@@ -24,6 +24,34 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.stepIndex = 0;
     this.stepIndex = 0;
     this.steps = [];
     this.steps = [];
 
 
+    if (!contextSrv.hasRole('Admin')) {
+      this.steps.push({
+        cta: 'Basic Concepts Guide',
+        icon: 'fa fa-file-text-o',
+        href: 'http://docs.grafana.org/guides/basic_concepts/',
+        check: () => $q.when(false),
+        cssClass: 'active',
+      });
+
+      this.steps.push({
+        cta: 'Getting Started Guide',
+        icon: 'fa fa-file-text-o',
+        href: 'http://docs.grafana.org/guides/getting_started/',
+        check: () => $q.when(false),
+        cssClass: 'active',
+      });
+
+      this.steps.push({
+        cta: 'Building a dashboard',
+        icon: 'fa fa-film',
+        href: 'http://docs.grafana.org/tutorials/screencasts/',
+        check: () => $q.when(false),
+        cssClass: 'active',
+      });
+
+      return;
+    }
+
     this.steps.push({
     this.steps.push({
       title: 'Install Grafana',
       title: 'Install Grafana',
       icon: 'icon-gf icon-gf-check',
       icon: 'icon-gf icon-gf-check',

public/sass/components/_panel_gettingstarted.scss

@@ -14,32 +14,6 @@ $path-height:               4px !default;
 $path-position:             $marker-size-half - ($path-height / 2);
 $path-position:             $marker-size-half - ($path-height / 2);
 
 
 
 
-.gettingstarted-blurb-copy {
-  margin-bottom: $spacer/2;
-  text-align: center;
-}
-
-.gettingstarted-blurb {
-  @extend .gettingstarted-blurb-copy;
-  color: $text-color;
-  display: block;
-
-  &:hover{
-    text-decoration: underline;
-  }
-}
-
-.gettingstarted-blurb-success {
-  @extend .gettingstarted-blurb-copy;
-  color: $text-color-weak;
-}
-
-.gettingstarted-blurb-upcoming {
-  @extend .gettingstarted-blurb-copy;
-  color: $text-color-weak;
-}
-
-
 .dashlist-cta-close-btn {
 .dashlist-cta-close-btn {
   color: $text-color-weak;
   color: $text-color-weak;
   float: right;
   float: right;
@@ -105,6 +79,19 @@ $path-position:             $marker-size-half - ($path-height / 2);
     .progress-title {
     .progress-title {
       font-weight: 400;
       font-weight: 400;
     }
     }
+    .progress-text {
+      display: none;
+    }
+
+    .progress-marker {
+      .icon-gf {
+        color: $brand-primary;
+        -webkit-text-fill-color: transparent;
+        background: $brand-gradient;
+        -webkit-background-clip: text;
+        text-decoration:none;
+      }
+    }
   }
   }
 
 
   &.completed {
   &.completed {
@@ -145,6 +132,7 @@ $path-position:             $marker-size-half - ($path-height / 2);
   background-color: $panel-bg;
   background-color: $panel-bg;
   margin-left: auto;
   margin-left: auto;
   margin-right: auto;
   margin-right: auto;
+  margin-bottom: $spacer;
   color: $text-color-weak;
   color: $text-color-weak;
   font-size: 35px;
   font-size: 35px;
   vertical-align: sub;
   vertical-align: sub;
@@ -153,7 +141,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
 // Progress text
 // Progress text
 .progress-text {
 .progress-text {
   display: block;
   display: block;
-  padding: $spacer;
   overflow: hidden;
   overflow: hidden;
   text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 }