ux: dashboard settings progress

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

@@ -7,26 +7,6 @@
 	</h3>
 
 	<div ng-if="ctrl.mode === 'list'">
-		<!-- empty list cta, there is always one built in query -->
-		<div ng-if="ctrl.annotations.length === 1">
-			<div class="empty-list-cta">
-				<div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
-				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
-					<i class="gicon gicon-dashboard-new"></i>
-					Add Annotation Query
-				</a>
-				<div class="grafana-info-box">
-					<h5>What are Annotations?</h5>
-					<p>
-					Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
-					on all graph panels. When you hover over an annotation icon you can get event text &amp; tags for the event. You can add annotation events
-					directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database.
-					</p>
-					Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
-				</div>
-			</div>
-		</div>
-
 		<div class="page-action-bar" ng-if="ctrl.annotations.length > 1">
 			<div class="page-action-bar__spacer"></div>
 			<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
@@ -63,6 +43,26 @@
 				</tr>
 			</tbody>
 		</table>
+
+		<!-- empty list cta, there is always one built in query -->
+		<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
+			<div class="empty-list-cta">
+				<div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
+				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
+					<i class="gicon gicon-dashboard-new"></i>
+					Add Annotation Query
+				</a>
+				<div class="grafana-info-box">
+					<h5>What are Annotations?</h5>
+					<p>
+					Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons
+					on all graph panels. When you hover over an annotation icon you can get event text &amp; tags for the event. You can add annotation events
+					directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database.
+					</p>
+					Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information.
+				</div>
+			</div>
+		</div>
 	</div>
 
 	<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">

public/app/features/dashboard/dashnav/dashnav.html

@@ -27,23 +27,23 @@
 			<i class="gicon gicon-add-panel"></i>
 		</button>
 
-		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canStar" ng-click="ctrl.starDashboard()" bs-tooltip="'Mark as favorite'" data-placement="bottom">
+		<button class="btn navbar-button navbar-button--star" ng-show="::ctrl.dashboard.meta.canStar" ng-click="ctrl.starDashboard()" bs-tooltip="'Mark as favorite'" data-placement="bottom">
 			<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}"></i>
 		</button>
 
-		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
+		<button class="btn navbar-button navbar-button--share" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
 			<i class="fa fa-share-square-o"></i></a>
 		</button>
 
-		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
+		<button class="btn navbar-button navbar-button--save" ng-show="::ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
 			<i class="fa fa-save"></i>
 		</button>
 
-		<button class="btn navbar-button" ng-if="::ctrl.dashboard.snapshot.originalUrl" ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
+		<button class="btn navbar-button navbar-button--snapshot-origin" ng-if="::ctrl.dashboard.snapshot.originalUrl" ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
 			<i class="fa fa-link"></i>
 		</button>
 
-		<button class="btn navbar-button" ng-click="ctrl.toggleSettings()" bs-tooltip="'Settings'" data-placement="bottom">
+		<button class="btn navbar-button navbar-button--settings" ng-click="ctrl.toggleSettings()" bs-tooltip="'Settings'" data-placement="bottom">
 			<i class="fa fa-cog"></i>
 		</button>
 	</div>

public/sass/components/_empty_list_cta.scss

@@ -1,7 +1,7 @@
 .empty-list-cta {
   background-color: $search-filter-box-bg;
   text-align: center;
-  padding: 2rem;
+  padding: $spacer*2;
   border-radius: $border-radius;
 
   .grafana-info-box {
@@ -11,12 +11,12 @@
 }
 
 .empty-list-cta__title {
-  padding-bottom: 30px;
+  padding-bottom: $spacer*3;
   font-style: italic;
 }
 
 .empty-list-cta__button {
-  margin-bottom: 50px;
+  margin-bottom: $spacer*3;
 }
 
 .empty-list-cta__pro-tip-link {

public/sass/components/_navbar.scss

@@ -23,7 +23,10 @@
     @include navbar-alt-look();
   }
 
-  .navbar-buttons--actions,
+  .navbar-button--add-panel,
+  .navbar-button--star,
+  .navbar-button--share,
+  .navbar-button--settings,
   .navbar-page-btn .fa-caret-down,
   .gf-timepicker-nav {
     display: none;
@@ -39,7 +42,11 @@
     @include navbar-alt-look();
   }
 
-  .navbar-buttons--actions {
+  .navbar-button--add-panel,
+  .navbar-button--star,
+  .navbar-button--save,
+  .navbar-button--settings,
+  .navbar-page-btn .fa-caret-down {
     display: none;
   }
 
@@ -90,6 +97,7 @@
 
   &--close {
     display: none;
+    margin-right: 0;
   }
 }