ux: work on dashboard settings views

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

@@ -1,57 +1,59 @@
-<div ng-controller="AnnotationsEditorCtrl">
-	<div class="tabbed-view-header">
-		<h2 class="tabbed-view-title">
-			Annotations
-		</h2>
-
-		<ul class="gf-tabs">
-			<li class="gf-tabs-item" >
-				<a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}">
-					Queries
-				</a>
-			</li>
-			<li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'">
-				<a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}">
-					Edit Query
-				</a>
-			</li>
-			<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
-				<span class="active gf-tabs-link">New Query</span>
-			</li>
+<h3 class="dashboard-settings__header">Annotations</h3>
 
-			<li class="gf-tabs-item" >
-        <a class="gf-tabs-link" ng-click="ctrl.mode = 'help';" ng-class="{active: ctrl.mode === 'help'}">
-          Help
-        </a>
-      </li>
-		</ul>
+<div ng-controller="AnnotationsEditorCtrl">
 
-		<button class="tabbed-view-close-btn" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</button>
-	</div>
+	<!-- <div class="tabbed&#45;view&#45;header"> -->
+	<!-- 	<h2 class="tabbed&#45;view&#45;title"> -->
+	<!-- 		Annotations -->
+	<!-- 	</h2> -->
+  <!--  -->
+	<!-- 	<ul class="gf&#45;tabs"> -->
+	<!-- 		<li class="gf&#45;tabs&#45;item" > -->
+	<!-- 			<a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.mode = 'list';" ng&#45;class="{active: ctrl.mode === 'list'}"> -->
+	<!-- 				Queries -->
+	<!-- 			</a> -->
+	<!-- 		</li> -->
+	<!-- 		<li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'edit'"> -->
+	<!-- 			<a class="gf&#45;tabs&#45;link" ng&#45;class="{active: ctrl.mode === 'edit'}"> -->
+	<!-- 				Edit Query -->
+	<!-- 			</a> -->
+	<!-- 		</li> -->
+	<!-- 		<li class="gf&#45;tabs&#45;item" ng&#45;show="ctrl.mode === 'new'"> -->
+	<!-- 			<span class="active gf&#45;tabs&#45;link">New Query</span> -->
+	<!-- 		</li> -->
+  <!--  -->
+	<!-- 		<li class="gf&#45;tabs&#45;item" > -->
+  <!--       <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.mode = 'help';" ng&#45;class="{active: ctrl.mode === 'help'}"> -->
+  <!--         Help -->
+  <!--       </a> -->
+  <!--     </li> -->
+	<!-- 	</ul> -->
+  <!--  -->
+	<!-- 	<button class="tabbed&#45;view&#45;close&#45;btn" ng&#45;click="dismiss();"> -->
+	<!-- 		<i class="fa fa&#45;remove"></i> -->
+	<!-- 	</button> -->
+	<!-- </div> -->
 
-	<div class="tabbed-view-body">
+		<!-- <div ng&#45;show="ctrl.mode === 'help'"> -->
+		<!-- 	<div class="grafana&#45;info&#45;box col&#45;lg&#45;8"> -->
+		<!-- 		<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 title, tags, and text information for the event. -->
+		<!-- 			In the <i>Queries</i> tab you can add queries that return annotation events. -->
+		<!-- 		</p> -->
+		<!-- 		<p> -->
+		<!-- 			You can add annotations 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&#45;link" target="_blank" href="http://docs.grafana.org/reference/annotations/">Annotations documentation</a> for more information. -->
+		<!-- 	</div> -->
+		<!-- </div> -->
 
-		<div ng-show="ctrl.mode === 'help'">
-			<div class="grafana-info-box col-lg-8">
-				<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 title, tags, and text information for the event.
-					In the <i>Queries</i> tab you can add queries that return annotation events.
-				</p>
-				<p>
-					You can add annotations 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 class="editor-row row" ng-if="ctrl.mode === 'list'">
+		<div class="editor-row row">
 			<div ng-if="ctrl.annotations.length === 0">
 				<em>No annotation queries defined</em>
 			</div>
+
 			<table class="grafana-options-table">
 				<tr ng-repeat="annotation in ctrl.annotations">
 					<td style="width:90%" ng-hide="annotation.builtIn">
@@ -79,67 +81,67 @@
 			</table>
 		</div>
 
-		<div class="gf-form" ng-show="ctrl.mode === 'list'">
+		<div class="gf-form">
 			<div class="gf-form-button-row">
 				<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.setupNew()"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
 			</div>
 		</div>
 
-		<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
-			<div>
-				<div class="gf-form-group">
-					<h5 class="section-heading">General</h5>
-					<div class="gf-form-inline">
-						<div class="gf-form">
-							<span class="gf-form-label width-7">Name</span>
-							<input type="text" class="gf-form-input width-20" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input>
-						</div>
-						<div class="gf-form">
-							<span class="gf-form-label width-7">Data source</span>
-							<div class="gf-form-select-wrapper">
-								<select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="gf-form-group">
-					<div class="gf-form-inline">
-						<gf-form-switch class="gf-form"
-														label="Enabled"
-														checked="ctrl.currentAnnotation.enable"
-														on-change="ctrl.annotationEnabledChange()"
-														label-class="width-7">
-						</gf-form-switch>
-						<gf-form-switch class="gf-form"
-														label="Hidden"
-														tooltip="Hides the annotation query toggle from showing at the top of the dashboard"
-														checked="ctrl.currentAnnotation.hide"
-														on-change="ctrl.annotationHiddenChanged()"
-														label-class="width-7">
-						</gf-form-switch>
-						<div class="gf-form">
-							<label class="gf-form-label width-9">Color</label>
-							<span class="gf-form-label">
-								<color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<h5 class="section-heading">Query</h5>
-			<rebuild-on-change property="ctrl.currentDatasource">
-				<plugin-component type="annotations-query-ctrl">
-				</plugin-component>
-			</rebuild-on-change>
-
-			<div class="gf-form">
-				<div class="gf-form-button-row p-y-0">
-					<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
-					<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+<!-- 		<div class="annotations&#45;basic&#45;settings" ng&#45;if="ctrl.mode === 'edit' || ctrl.mode === 'new'"> -->
+<!-- 			<div> -->
+<!-- 				<div class="gf&#45;form&#45;group"> -->
+<!-- 					<h5 class="section&#45;heading">General</h5> -->
+<!-- 					<div class="gf&#45;form&#45;inline"> -->
+<!-- 						<div class="gf&#45;form"> -->
+<!-- 							<span class="gf&#45;form&#45;label width&#45;7">Name</span> -->
+<!-- 							<input type="text" class="gf&#45;form&#45;input width&#45;20" ng&#45;model='ctrl.currentAnnotation.name' placeholder="name"></input> -->
+<!-- 						</div> -->
+<!-- 						<div class="gf&#45;form"> -->
+<!-- 							<span class="gf&#45;form&#45;label width&#45;7">Data source</span> -->
+<!-- 							<div class="gf&#45;form&#45;select&#45;wrapper"> -->
+<!-- 								<select class="gf&#45;form&#45;input" ng&#45;model="ctrl.currentAnnotation.datasource" ng&#45;options="f.name as f.name for f in ctrl.datasources" ng&#45;change="ctrl.datasourceChanged()"></select> -->
+<!-- 							</div> -->
+<!-- 						</div> -->
+<!-- 					</div> -->
+<!-- 				</div> -->
+<!--  -->
+<!-- 				<div class="gf&#45;form&#45;group"> -->
+<!-- 					<div class="gf&#45;form&#45;inline"> -->
+<!-- 						<gf&#45;form&#45;switch class="gf&#45;form" -->
+<!-- 														label="Enabled" -->
+<!-- 														checked="ctrl.currentAnnotation.enable" -->
+<!-- 														on&#45;change="ctrl.annotationEnabledChange()" -->
+<!-- 														label&#45;class="width&#45;7"> -->
+<!-- 						</gf&#45;form&#45;switch> -->
+<!-- 						<gf&#45;form&#45;switch class="gf&#45;form" -->
+<!-- 														label="Hidden" -->
+<!-- 														tooltip="Hides the annotation query toggle from showing at the top of the dashboard" -->
+<!-- 														checked="ctrl.currentAnnotation.hide" -->
+<!-- 														on&#45;change="ctrl.annotationHiddenChanged()" -->
+<!-- 														label&#45;class="width&#45;7"> -->
+<!-- 						</gf&#45;form&#45;switch> -->
+<!-- 						<div class="gf&#45;form"> -->
+<!-- 							<label class="gf&#45;form&#45;label width&#45;9">Color</label> -->
+<!-- 							<span class="gf&#45;form&#45;label"> -->
+<!-- 								<color&#45;picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color&#45;picker> -->
+<!-- 							</span> -->
+<!-- 						</div> -->
+<!-- 					</div> -->
+<!-- 				</div> -->
+<!-- 			</div> -->
+<!--  -->
+<!-- 			<h5 class="section&#45;heading">Query</h5> -->
+<!-- 			<rebuild&#45;on&#45;change property="ctrl.currentDatasource"> -->
+<!-- 				<plugin&#45;component type="annotations&#45;query&#45;ctrl"> -->
+<!-- 				</plugin&#45;component> -->
+<!-- 			</rebuild&#45;on&#45;change> -->
+<!--  -->
+<!-- 			<div class="gf&#45;form"> -->
+<!-- 				<div class="gf&#45;form&#45;button&#45;row p&#45;y&#45;0"> -->
+<!-- 					<button ng&#45;show="ctrl.mode === 'new'" type="button" class="btn gf&#45;form&#45;button btn&#45;success" ng&#45;click="ctrl.add()">Add</button> -->
+<!-- 					<button ng&#45;show="ctrl.mode === 'edit'" type="button" class="btn btn&#45;success pull&#45;left" ng&#45;click="ctrl.update()">Update</button> -->
+<!-- 				</div> -->
+<!-- 			</div> -->
+<!-- 		</div> -->
+<!-- 	</div> -->
+<!-- </div> -->

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

@@ -43,13 +43,20 @@
 			<i class="fa fa-link"></i>
 		</button>
 
-		<button class="btn navbar-button" ng-click="ctrl.openSettings()" bs-tooltip="'Settings'" data-placement="bottom">
+		<button class="btn navbar-button" ng-click="ctrl.toggleSettings()" bs-tooltip="'Settings'" data-placement="bottom">
 			<i class="fa fa-cog"></i>
 		</button>
 	</div>
 
 	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
 
+	<div class="navbar-buttons navbar-buttons--close">
+		<button class="btn navbar-button navbar-button--primary" ng-click="ctrl.toggleSettings()" bs-tooltip="'Close settings'" data-placement="bottom">
+			<i class="fa fa-remove"></i>
+			Close
+		</button>
+	</div>
+
 </div>
 
 <dashboard-search></dashboard-search>

public/app/features/dashboard/dashnav/dashnav.ts

@@ -32,7 +32,7 @@ export class DashNavCtrl {
       }
     }
 
-    openSettings() {
+    toggleSettings() {
       let search = this.$location.search();
       if (search.editview) {
         delete search.editview;

public/app/features/dashboard/partials/settings.html

@@ -1,4 +1,4 @@
-<h3 class="page-heading">General</h2>
+<h3 class="dashboard-settings__header">General</h3>
 
 <div class="gf-form-group">
 	<div class="gf-form">

public/app/features/dashboard/settings/settings.html

@@ -1,28 +1,20 @@
-<div class="sidenav">
-	<aside class="sidenav__aside">
-		<h2>
-			<i class="fa fa-cog"></i>
-			Settings
-		</h2>
+<aside class="dashboard-settings__aside">
+	<h2 class="dashboard-settings__aside-header">
+		<i class="fa fa-cog"></i>
+		Settings
+	</h2>
 
-		<ul class="edit-sidemenu">
-			<li ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
-        <a href="{{::section.url}}">
-					{{::section.title}}
-				</a>
-			</li>
-		</ul>
-	</aside>
+	<a href="{{::section.url}}" class="dashboard-settings__nav-item" ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
+		{{::section.title}}
+	</a>
+</aside>
 
-	<div class="sidenav__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
-	</div>
-
-	<div class="sidenav__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
-	</div>
-
-	<div class="sidenav__content" ng-if="ctrl.viewId === 'templating'">
-		annotations
-	</div>
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
 </div>
 
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
+</div>
 
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'">
+	annotationus
+</div>

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

@@ -1,4 +1,4 @@
-import {coreModule, appEvents} from 'app/core/core';
+import {coreModule} from 'app/core/core';
 import {DashboardModel} from '../dashboard_model';
 import $ from 'jquery';
 import _ from 'lodash';
@@ -17,6 +17,9 @@ export class SettingsCtrl {
 
   /** @ngInject */
   constructor($scope, private $location, private $rootScope) {
+    // temp hack
+    $scope.dashboard = this.dashboard;
+
     const params = this.$location.search();
     const url = $location.path();
 

public/sass/_grafana.scss

@@ -88,7 +88,6 @@
 @import "components/page_header";
 @import "components/dashboard_settings";
 @import "components/empty_list_cta";
-@import "components/sidenav";
 
 
 // PAGES

public/sass/_variables.dark.scss

@@ -189,7 +189,7 @@ $input-label-border-color:       $gray-blue;
 $input-invalid-border-color:     lighten($red, 5%);
 
 // Search
-$search-shadow: 0 0 35px 0 $body-bg;
+$search-shadow: 0 0 30px 0 $black;
 $search-filter-box-bg: $gray-blue;
 
 // Dropdowns
@@ -226,10 +226,10 @@ $horizontalComponentOffset:       180px;
 // -------------------------
 $wellBackground:                  #131517;
 
-$navbarHeight:                    52px;
+$navbarHeight:                    55px;
 $navbarBackgroundHighlight:       $dark-3;
 $navbarBackground:                $panel-bg;
-$navbarBorder:                    1px solid $body-bg;
+$navbarBorder:                    1px solid $dark-3;
 $navbarShadow:                    0 0 20px black;
 
 $navbarText:                      $gray-4;

public/sass/components/_dashboard_settings.scss

@@ -1,7 +1,8 @@
 .dashboard-settings {
   opacity: 0;
-  display: block;
-  padding: $spacer*2;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
 }
 
 .dashboard-page--settings-opening {
@@ -13,6 +14,44 @@
 .dashboard-page--settings-open {
   .dashboard-settings {
     opacity: 1;
-    transition: opacity 250ms ease-in-out;
+    transition: opacity 300ms ease-in-out;
+  }
+}
+
+.dashboard-settings__content {
+  flex-grow: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 30px;
+}
+
+.dashboard-settings__aside {
+  padding: 30px 0 0 30px;
+  background: $search-filter-box-bg;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-settings__aside-header {
+  color: $text-muted;
+  font-size: $font-size-h3;
+  margin-bottom: 20px;
+  padding-right: 60px;
+  white-space: nowrap;
+}
+
+.dashboard-settings__header {
+  font-size: $font-size-h3;
+  margin-bottom: 20px;
+}
+
+.dashboard-settings__nav-item {
+  padding: 7px 12px;
+  color: $text-color;
+  @include left-brand-border;
+
+  &.active {
+    @include left-brand-border-gradient();
+    background: $page-bg;
   }
 }

public/sass/components/_navbar.scss

@@ -9,10 +9,26 @@
   padding-right: $spacer;
   display: flex;
   flex-grow: 1;
+  border-bottom: 1px solid transparent;
+  transition: all 300ms ease-in-out;
+}
+
+.dashboard-page--settings-open {
+  .navbar {
+    background: $page-header-bg;
+    box-shadow: $search-shadow;
+    border-bottom: $navbarBorder;
+  }
+
+  .navbar-buttons--actions,
+  .navbar-page-btn .fa-caret-down,
+  .gf-timepicker-nav {
+    display: none;
+  }
 
-  background: $page-header-bg;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
+  .navbar-buttons--close {
+    display: flex;
+  }
 }
 
 .sidemenu-open {
@@ -29,8 +45,9 @@
   margin: 0;
   color: darken($link-color, 5%);
   font-size: $font-size-lg;
-  padding: 1rem 1rem 0.75rem 1rem;
+  padding-left: 1rem;
   min-height: $navbarHeight;
+  line-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 60%;
@@ -71,6 +88,10 @@
   align-items: center;
   justify-content: flex-end;
   margin-right: $spacer;
+
+  &--close {
+    display: none;
+  }
 }
 
 .navbar__spacer {
@@ -82,7 +103,7 @@
 
   display: inline-block;
   font-weight: $btn-font-weight;
-  padding: 8px 11px;
+  padding: 6px 11px;
   line-height: 16px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
@@ -98,7 +119,7 @@
   }
 
   &--add-panel {
-    padding: 5px 10px;
+    padding: 3px 10px;
 
     .gicon {
       font-size: 22px;
@@ -106,7 +127,7 @@
   }
 
   &--tight {
-    padding: 9px 4px;
+    padding: 7px 4px;
 
     .fa {
       font-size: 14px;
@@ -114,4 +135,8 @@
       top: 2px;
     }
   }
+
+  &--primary {
+    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+  }
 }

public/sass/components/_sidenav.scss

@@ -1,15 +0,0 @@
-.sidenav {
-  display: flex;
-  flex-direction: row;
-}
-
-.sidenav__content {
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.sidenav__aside {
-  margin-right: $spacer*2;
-}
-
-

public/sass/components/_view_states.scss

@@ -45,7 +45,7 @@
     background: transparent;
     transform: translate3d(-40px, 0, 0);
     transition: all 1.5s ease-in-out 1s;
-    .icon-gf {
+    i {
       opacity: 0;
       transition: all 1.5s ease-in-out 1s;
     }