ux: dashboard settings progress

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

-import React, { Component } from 'react';
+import React, { Component } from 'react';
 
 export interface IProps {
     model: any;
@@ -17,7 +17,7 @@ class EmptyListCTA extends Component<IProps, any> {
             proTipTarget
         } = this.props.model;
         return (
-            <div className="empty-list-cta p-t-2 p-b-1">
+            <div className="empty-list-cta">
                 <div className="empty-list-cta__title">{title}</div>
                 <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
                 <div className="empty-list-cta__pro-tip">

public/app/features/dashboard/settings/settings.ts

@@ -11,7 +11,7 @@ export class SettingsCtrl {
   sections: any[] = [
     {title: 'General',     id: 'settings', icon: "fa fa-fw fa-sliders"},
     {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
-    {title: 'Templating',  id: 'templating', icon: "fa fa-fw fa-dollar"},
+    {title: 'Variables',   id: 'templating', icon: "fa fa-fw fa-dollar"},
     {title: 'Links',       id: 'links', icon: "fa fa-fw fa-external-link"},
     {title: 'Versions',    id: 'versions', icon: "fa fa-fw fa-history"},
     {title: 'View JSON',   id: 'view_json', icon: "fa fa-fw fa-code"},

public/app/features/templating/partials/editor.html

-<h3 class="dashboard-settings__header">Templating</h3>
+<h3 class="dashboard-settings__header">Variables</h3>
 
 <div ng-controller="VariableEditorCtrl" ng-init="init()">
 	<div ng-if="mode === 'list'">
+
 		<div ng-if="variables.length === 0">
-			<em>No template variables defined</em>
-			<br /> <br />
+			<div class="empty-list-cta">
+				<div class="empty-list-cta__title">There are no template variables added yet</div>
+				<a ng-click="mode = 'new';" class="empty-list-cta__button btn btn-xlarge btn-success">
+					<i class="gicon gicon-dashboard-new"></i>
+					Add variable
+				</a>
+				<div class="grafana-info-box">
+					<h5>
+						What does variables do?
+					</h5>
+					<p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names
+					in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
+					the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
+
+					Checkout the
+					<a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
+						Templating documentation
+					</a> for more information.
+				</div>
+			</div>
+		</div>
+
+		<div ng-if="variables.length">
+			<div class="page-action-bar">
+				<div class="page-action-bar__spacer"></div>
+				<a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a>
 			</div>
+
 			<table class="filter-table filter-table--hover">
 				<thead>
 					<tr>
@@ -41,25 +67,6 @@
 				</tbody>
 			</table>
 		</div>
-
-	<div ng-show="mode === 'help'">
-		<div class="grafana-info-box col-lg-8">
-			<h5>What does templating do?</h5>
-			<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
-			and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
-			the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
-			<br>
-			<br>
-
-			Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
-			</p>
-		</div>
-	</div>
-
-	<div class="gf-form" ng-show="mode === 'list'">
-		<div class="gf-form-button-row">
-			<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
-		</div>
 	</div>
 
 	<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">

public/sass/components/_empty_list_cta.scss

-.empty-list-cta {
+.empty-list-cta {
   background-color: $search-filter-box-bg;
   text-align: center;
+  padding: 2rem 2rem 1rem 2rem;
+  border-radius: $border-radius;
 }
 
 .empty-list-cta__title {
@@ -13,7 +15,7 @@
 }
 
 .empty-list-cta__pro-tip {
-    padding-bottom: 20px;
+  padding-bottom: 1rem;
 }
 
 .empty-list-cta__pro-tip-link {

public/sass/components/_infobox.scss

-// .grafana-info-box::before {
-//   content: "\f05a";
-//   font-family:'FontAwesome';
-//   position: absolute;
-//   top: -13px;
-//   left: -8px;
-//   font-size: 20px;
-//   color: $text-color;
-// }
-
 .grafana-info-box {
   position: relative;
   background: $info-box-background;

public/sass/components/_navbar.scss

@@ -2,9 +2,7 @@
 .navbar {
   position: relative;
   padding-left: $side-menu-width;
-  // box-shadow: $navbarShadow;
   z-index: $zindex-navbar-fixed;
-  // background: $navbarBackground;
   height: $navbarHeight;
   padding-right: $spacer;
   display: flex;