ux: dashboard stuff

public/app/core/directives/dash_edit_link.js

@@ -13,6 +13,7 @@ function ($, angular, coreModule, _) {
     'templating':  { src: 'public/app/features/templating/partials/editor.html'},
     'history':     { html: '<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>'},
     'timepicker':  { src: 'public/app/features/dashboard/timepicker/dropdown.html' },
+    'add-panel':    { html: '<add-panel></add-panel>' },
     'import':      { html: '<dash-import dismiss="dismiss()"></dash-import>', isModal: true },
     'permissions': { html: '<dash-acl-modal dismiss="dismiss()"></dash-acl-modal>', isModal: true },
     'new-folder':  {

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

@@ -69,6 +69,11 @@
 					</li>
 				</ul>
 			</li>
+			<li class="navbar-mini-btn-wrapper">
+				<button class="btn btn-secondary btn-mini" ng-click="ctrl.openEditView('add-panel')">
+					<i class="fa fa-plus-circle"></i> Add Panel
+				</button>
+			</li>
 		</ul>
 
 		<ul class="nav pull-right">
@@ -82,6 +87,7 @@
 			</li>
 		</ul>
 	</div>
+
 </div>
 
 <dashboard-search></dashboard-search>

public/app/features/dashboard/row/add_panel.html

@@ -1,15 +1,17 @@
-<div class="dash-row-dropview">
-	<a class="dash-row-dropview-close pointer" ng-click="ctrl.rowCtrl.closeDropView();">
-		<i class="fa fa-remove"></i>
-	</a>
+<div class="tabbed-view-header">
+	<h2 class="tabbed-view-title">
+		Add Panel
+	</h2>
 
-  <div class="gf-form-inline dash-row-add-panel-form">
-    <div class="gf-form">
-      <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
-    </div>
-  </div>
+	<input type="text" class="gf-form-input max-width-14 pull-left" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
 
-  <div class="add-panel-panels-scroll">
+	<button class="tabbed-view-close-btn" ng-click="ctrl.dismiss();">
+		<i class="fa fa-remove"></i>
+	</button>
+</div>
+
+<div class="tabbed-view-body tabbed-view-body--small">
+	<div class="add-panel-panels-scroll">
     <div class="add-panel-panels">
       <div class="add-panel-item"
 					ng-repeat="panel in ctrl.panelHits"
@@ -23,5 +25,4 @@
       </div>
     </div>
   </div>
-
 </div>

public/app/features/dashboard/row/add_panel.ts

@@ -6,18 +6,15 @@ import config from 'app/core/config';
 import {coreModule, appEvents} from 'app/core/core';
 
 export class AddPanelCtrl {
-  row: any;
   dashboard: any;
-  rowCtrl: any;
   allPanels: any;
   panelHits: any;
   activeIndex: any;
   panelSearch: any;
 
   /** @ngInject */
-  constructor(private $scope, private $timeout, private $rootScope) {
-    this.row = this.rowCtrl.row;
-    this.dashboard = this.rowCtrl.dashboard;
+  constructor(private $scope, private $timeout, private $rootScope, dashboardSrv) {
+    this.dashboard = dashboardSrv.getCurrent();
     this.activeIndex = 0;
 
     this.allPanels = _.chain(config.panels)
@@ -29,9 +26,13 @@ export class AddPanelCtrl {
     this.panelHits = this.allPanels;
   }
 
+  dismiss() {
+    this.$rootScope.appEvent('hide-dash-editor');
+  }
+
   keyDown(evt) {
     if (evt.keyCode === 27) {
-      this.rowCtrl.dropView = 0;
+      //this.rowCtrl.dropView = 0;
       return;
     }
 
@@ -78,24 +79,6 @@ export class AddPanelCtrl {
   }
 
   addPanel(panelPluginInfo) {
-    var defaultSpan = 6;
-    var span = 12 - this.row.span;
-
-    var panel = {
-      id: null,
-      title: config.new_panel_title,
-      span: span < defaultSpan && span > 0 ? span : defaultSpan,
-      type: panelPluginInfo.id,
-    };
-
-    this.rowCtrl.closeDropView();
-    this.dashboard.addPanel(panel, this.row);
-    this.$timeout(() => {
-      this.$rootScope.$broadcast('render');
-      //this.$rootScope.appEvent('panel-change-view', {
-      //  fullscreen: true, edit: true, panelId: panel.id
-      //});
-    });
   }
 }
 
@@ -106,10 +89,8 @@ export function addPanelDirective() {
     controller: AddPanelCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
-    scope: {
-      rowCtrl: "=",
-    },
+    scope: {},
   };
 }
 
-coreModule.directive('dashRowAddPanel', addPanelDirective);
+coreModule.directive('addPanel', addPanelDirective);

public/app/features/dashboard/row/row.html

@@ -1,12 +1,12 @@
-<div class="dash-row-header">
-	<a class="dash-row-header-title" ng-click="ctrl.toggleCollapse()">
-		<span class="dash-row-collapse-toggle pointer">
-			<i class="fa fa-chevron-down" ng-show="!ctrl.row.collapse"></i>
-			<i class="fa fa-chevron-right" ng-show="ctrl.row.collapse"></i>
-		</span>
-		<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
-	</a>
-</div>
+<!-- <div class="dash&#45;row&#45;header"> -->
+<!-- 	<a class="dash&#45;row&#45;header&#45;title" ng&#45;click="ctrl.toggleCollapse()"> -->
+<!-- 		<span class="dash&#45;row&#45;collapse&#45;toggle pointer"> -->
+<!-- 			<i class="fa fa&#45;chevron&#45;down" ng&#45;show="!ctrl.row.collapse"></i> -->
+<!-- 			<i class="fa fa&#45;chevron&#45;right" ng&#45;show="ctrl.row.collapse"></i> -->
+<!-- 		</span> -->
+<!-- 		<span ng&#45;class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span> -->
+<!-- 	</a> -->
+<!-- </div> -->
 
 <dash-grid ng-if="!ctrl.row.collapse" row="ctrl.row" dashboard="ctrl.dashboard"></dash-grid>
 

public/app/partials/dashboard.html

@@ -3,8 +3,8 @@
 
 	<div class="scroll-canvas scroll-canvas--dashboard">
 		<div gemini-scrollbar>
+			<div dash-editor-view class="dash-edit-view"></div>
 			<div class="dashboard-container">
-				<div dash-editor-view class="dash-edit-view"></div>
 				<div class="clearfix"></div>
 
 				<dashboard-submenu ng-if="dashboard.meta.submenuEnabled" dashboard="dashboard"></dashboard-submenu>
@@ -13,14 +13,6 @@
 
 				<dash-row class="dash-row" ng-repeat="row in dashboard.rows" row="row" dashboard="dashboard">
 				</dash-row>
-
-				<div ng-show='dashboard.meta.canEdit && !dashboard.meta.fullscreen' class="add-row-panel-hint">
-					<div class="span12" style="text-align:left;">
-						<span style="margin-left: 12px;" ng-click="addRowDefault()" class="pointer btn btn-inverse btn-small">
-							<span><i class="fa fa-plus"></i> ADD ROW</span>
-						</span>
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>

public/sass/_variables.dark.scss

@@ -62,7 +62,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
-$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+$page-gradient: linear-gradient(180deg, rgb(36, 36, 36) 40px, rgba(178, 31, 31, 0.03) 100px, rgba(253, 187, 45, 0.03));
 
 // Links
 // -------------------------

public/sass/components/_navbar.scss

@@ -4,13 +4,14 @@
   overflow: visible;
   position: relative;
   margin-left: $side-menu-width;
+  box-shadow: 0 0 20px black;
+  z-index: 1;
 }
 
 .navbar-inner {
   min-height: $navbarHeight;
   padding-right: $spacer;
   background-color: $navbarBackground;
-  border-bottom: $navbarBorder;
   @include clearfix();
 }
 
@@ -111,3 +112,7 @@
   position: relative;
   float: left;
 }
+
+.navbar-mini-btn-wrapper {
+  padding: 15px;
+}

public/sass/components/_tabbed_view.scss

@@ -1,8 +1,5 @@
 .tabbed-view {
   background-color: $page-bg;
-  background-image: $page-gradient;
-  margin: (-$panel-margin*2) (-$panel-margin);
-  margin-bottom: $spacer*2;
   padding: $spacer*3;
 
   &.tabbed-view--panel-edit {
@@ -49,6 +46,11 @@
 .tabbed-view-body {
   padding: $spacer*2 $spacer;
   min-height: 250px;
+
+  &--small {
+    min-height: 0px;
+    padding-bottom: 0px;
+  }
 }
 
 .section-heading {

public/sass/layout/_page.scss

@@ -11,9 +11,7 @@
 .main-view {
   position: relative;
   flex-grow: 1;
-
-  $gradient-opacity: 0.03;
-  background: linear-gradient(135deg, rgba(26, 42, 108, $gradient-opacity), rgba(178, 31, 31, $gradient-opacity), rgba(253, 187, 45, $gradient-opacity)); //Matt experiement
+  background: $page-gradient;
 }
 
 .page-container {

public/sass/pages/_dashboard.scss

@@ -1,14 +1,13 @@
 .dashboard-container {
   padding: $dashboard-padding;
   width: 100%;
+  background: $page-gradient;
 }
 
 .template-variable {
   color: $variable;
 }
 
-
-
 div.flot-text {
   color: $text-color !important;
 }
@@ -172,8 +171,6 @@ div.flot-text {
 }
 
 .panel-full-edit {
-  margin-top: 20px;
-  margin-bottom: 20px;
 }
 
 .panel-highlight  {
@@ -260,3 +257,12 @@ div.flot-text {
     transition: opacity 200ms ease-in-out;
   }
 }
+
+.dashboard-nav-shadow {
+  box-shadow: 0 0 20px black;
+  height: 10px;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  top: -10px;
+}