Merge branch 'dash-edit-mode' of github.com:grafana/grafana into dash-edit-mode

public/app/plugins/panel/dashlist/module.html

@@ -1,3 +1,51 @@
+<div class="dashlist">
+  <div class="dashlist-section">
+    <h6 class="dashlist-section-header">
+      Getting Started with Grafana
+      <button class="dashlist-CTA-close-btn"><i class="fa fa-remove"></i></button>
+    </h6>
+    <div class="dashlist-flex-container">
+      <div class="dashlist-panel-CTA-flex-container--left">
+        <h5 class="dashlist-next-up">Next up:</h5>
+        <span class="dashlist-title">Create your first data source</span>
+        <p class="dashlist-next-up-blurb">If Grafana dashboards are like the eyes, man, datasources are the heart. Cosmic.</p>
+        <button class="btn btn-success">Add Data Source</button>
+      </div>
+      <ul class="dashlist-panel-CTA-flex-container--right">
+        <li class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-check dashlist-icon-success"></i>
+          </div>
+          <span class="dashlist-blurb dashlist-blurb-success">Install Grafana like a boss.</span>
+        </li>
+        <li class="dashlist-panel-CTA-items dashlist-icons-container--active">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-datasources dashlist-icon-active"></i>
+          </div>
+          <a href="#" class="dashlist-blurb">Add your first data source.</a>
+        </li>
+        <li class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-dashboard dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Create your first dashboard.</a>
+        </li>
+        <li class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-users dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Invite your team.</a>
+        </li>
+        <li class="dashlist-panel-CTA-items">
+          <div class="dashlist-icons-container">
+              <i class="icon-gf icon-gf-grafana-icon dashlist-icon-upcoming"></i>
+          </div>
+          <a href="#" class="dashlist-blurb dashlist-blurb-upcoming">Extend on Grafana.net.</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
 <div class="dashlist" ng-repeat="group in ctrl.groups">
   <div class="dashlist-section" ng-if="group.show">
     <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">

public/sass/components/_panel_dashlist.scss

@@ -24,3 +24,125 @@
     background-color: $tight-form-func-bg;
   }
 }
+
+.dashlist-flex-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: $tight-form-bg;
+  padding: 20px;
+}
+
+.dashlist-panel-CTA-flex-container--left {
+  flex-grow: 2;
+  align-items: center;
+}
+
+ul.dashlist-panel-CTA-flex-container--right {
+  padding-left: 1rem;
+  border-left: solid 1px black;
+  list-style-type: none;
+}
+
+li.dashlist-panel-CTA-items {
+  text-align: left;
+  margin: 10px 0;
+}
+
+li.dashlist-icons-container--active::before {
+    content: ' ';
+    border-top: 1px solid black;
+    width: 13px;
+    position: absolute;
+    margin-left: -14px;
+    margin-top: 9px;
+}
+
+p.dashlist-blurb{
+     font-size:14px;
+     color: $text-color;
+     margin: 0;
+}
+
+a.dashlist-blurb{
+     font-size:14px;
+     color: $text-color;
+     margin: 0;
+}
+
+a.dashlist-blurb:hover{
+     text-decoration: underline;
+}
+
+.dashlist-blurb-success {
+  color: $text-color-weak;
+  text-decoration: line-through;
+}
+
+a.dashlist-blurb-upcoming {
+  color: $text-color-weak;
+}
+
+.dashlist-icon-active {
+  color: $brand-primary;
+  -webkit-text-fill-color: transparent;
+  background: $brand-gradient;
+  -webkit-background-clip: text;
+  text-decoration:none;
+  font-size: 20px;
+  vertical-align: sub;
+}
+
+.dashlist-icon-upcoming {
+  color: $text-color-weak;
+  text-decoration:none;
+  font-size: 20px;
+  vertical-align: sub;
+}
+
+.rt-dashboard-icon-warning {
+  color: $text-color-strong;
+  text-decoration:none;
+  font-size: 20px;
+  vertical-align: sub;
+}
+
+.dashlist-icon-success {
+  color: $online;
+  font-size: 24px;
+  text-decoration:none;
+  vertical-align: sub;
+}
+
+.dashlist-icons-container {
+  width: 30px;
+  display: inline-block;
+  margin-right: 5px;
+  text-align: center;
+  vertical-align: top;
+}
+
+h5.dashlist-next-up {
+  color: $text-color-weak;
+  font-style: italic;
+}
+
+p.dashlist-next-up-blurb {
+  color: $text-color-weak;
+  max-width: 375px;
+}
+
+.dashlist-CTA-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0 2px 0 0;
+  background-color: transparent;
+  border: none;
+  i {
+    font-size: 80%;
+  }
+  color: $text-color-weak;
+  &:hover {
+    color: $white;
+  }
+}