From 2f354ed926d0bea96f198d7bf42a1f528643021d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 24 Nov 2016 13:58:51 +0100
Subject: [PATCH] fix(getting started panel): some more work on this, #6466

---
 .../plugins/panel/gettingstarted/module.ts    | 28 +++++++++++++
 .../components/_panel_gettingstarted.scss     | 41 +++++++------------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts
index 28fa43ec9cb..4a490259c31 100644
--- a/public/app/plugins/panel/gettingstarted/module.ts
+++ b/public/app/plugins/panel/gettingstarted/module.ts
@@ -24,6 +24,34 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.stepIndex = 0;
     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({
       title: 'Install Grafana',
       icon: 'icon-gf icon-gf-check',
diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss
index 03f5019ff8e..b3967c0b421 100644
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@@ -14,32 +14,6 @@ $path-height:               4px !default;
 $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 {
   color: $text-color-weak;
   float: right;
@@ -105,6 +79,19 @@ $path-position:             $marker-size-half - ($path-height / 2);
     .progress-title {
       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 {
@@ -145,6 +132,7 @@ $path-position:             $marker-size-half - ($path-height / 2);
   background-color: $panel-bg;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: $spacer;
   color: $text-color-weak;
   font-size: 35px;
   vertical-align: sub;
@@ -153,7 +141,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
 // Progress text
 .progress-text {
   display: block;
-  padding: $spacer;
   overflow: hidden;
   text-overflow: ellipsis;
 }