ux(dashboard): began removing build mode and adding new slide out row menu

public/app/core/services/keybindingSrv.ts

@@ -79,9 +79,9 @@ export class KeybindingSrv {
   }
 
   setupDashboardBindings(scope, dashboard) {
-    this.bind('b', () => {
-      dashboard.toggleEditMode();
-    });
+    // this.bind('b', () => {
+    //   dashboard.toggleEditMode();
+    // });
 
     this.bind('ctrl+o', () => {
       dashboard.sharedCrosshair = !dashboard.sharedCrosshair;

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

@@ -52,12 +52,6 @@
 	<li ng-if="::showSettingsMenu" class="dropdown">
 		<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
 		<ul class="dropdown-menu">
-			<li ng-if="dashboardMeta.canEdit" class="dropdown-menu-item-with-shortcut">
-        <a class="pointer" ng-click="dashboard.toggleEditMode();">
-          Build Mode
-          <span class="dropdown-menu-item-shortcut">b</span>
-        </a>
-      </li>
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>

public/app/features/dashboard/model.ts

@@ -88,7 +88,6 @@ export class DashboardModel {
     }
 
     this.meta = meta;
-    this.editMode = this.meta.isNew;
   }
 
   // cleans meta data and other non peristent state

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

@@ -31,14 +31,5 @@
 
   <div class="clearfix"></div>
 
-  <div class="pull-right">
-    <button class="btn btn-danger btn-small" ng-click="ctrl.removeRow()">
-      <i class="fa fa-trash"></i>
-      Delete row
-    </button>
-  </div>
-
-  <div class="clearfix"></div>
-
 </div>
 

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

@@ -19,10 +19,6 @@ export class RowOptionsCtrl {
     this.dashboard = this.rowCtrl.dashboard;
     this.row.titleSize = this.row.titleSize || 'h6';
   }
-
-  removeRow() {
-    this.dashboard.removeRow(this.row);
-  }
 }
 
 export function rowOptionsDirective() {

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

-<div ng-if="ctrl.dashboard.editMode">
-  <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>
+<div class="dash-row-menu-container" ng-hide="dashboard.meta.fullscreen">
+	<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
+		<li>
+			<a ng-click="ctrl.onMenuAddPanel()">
+				<i class="fa fa-plus"></i> Add Panel
 			</a>
-
-    <div class="dash-row-header-actions">
-      <a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()" ng-class="{active: ctrl.dropView===1}">
-        Add Panel
-        <i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
-        <i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuRowOptions()">
+				<i class="fa fa-cog"></i> Row Options
 			</a>
-      <a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()" ng-class="{active: ctrl.dropView===2}">
-        Row Options
-        <i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
-        <i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-arrow-up"></i> Move Up
 			</a>
-      <a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row up'" ng-click="ctrl.moveRow(-1)">
-        <i class="fa fa-arrow-up"></i>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-arrow-down"></i> Move Down
 			</a>
-      <a class="pointer dash-row-header-actions--tight" bs-tooltip="'Move row down'" ng-click="ctrl.moveRow(1)">
-        <i class="fa fa-arrow-down"></i>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-trash"></i> Delete row
 			</a>
-    </div>
-  </div>
-
-  <div ng-if="ctrl.dropView === 1">
-    <dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
-  </div>
-
-  <div ng-if="ctrl.dropView === 2">
-    <dash-row-options row-ctrl="ctrl"></dash-row-options>
-  </div>
+		</li>
+	</ul>
 </div>
 
-<div ng-if="!ctrl.dashboard.editMode">
-  <div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
-		<i class="fa fa-chevron-down"></i>
-  </div>
-
-  <div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
+<div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">
 	<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>
@@ -50,7 +36,14 @@
 		</span>
 		<span ng-class="ctrl.row.titleSize">{{ctrl.row.title | interpolateTemplateVars:this}}</span>
 	</a>
-  </div>
+</div>
+
+<div ng-if="ctrl.dropView === 1">
+	<dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
+</div>
+
+<div ng-if="ctrl.dropView === 2">
+	<dash-row-options row-ctrl="ctrl"></dash-row-options>
 </div>
 
 <div class="panels-wrapper" ng-if="!ctrl.row.collapse">

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

@@ -97,22 +97,13 @@ export class DashRowCtrl {
     this.row.collapse = !this.row.collapse;
   }
 
-  showAddPanel() {
-    this.row.collapse = false;
-    if (this.dropView === 1) {
-      this.closeDropView();
-    } else {
+  onMenuAddPanel() {
     this.dropView = 1;
   }
-  }
 
-  showRowOptions() {
-    if (this.dropView === 2) {
-      this.closeDropView();
-    } else {
+  onMenuRowOptions() {
     this.dropView = 2;
   }
-  }
 
   closeDropView() {
     this.dropView = 0;

public/app/features/dashboard/submenu/submenu.html

@@ -23,11 +23,5 @@
     <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
   </div>
 
-  <div class="gf-form" ng-if="ctrl.dashboard.editMode" ng-click="ctrl.exitBuildMode();">
-    <button class="btn btn-secondary gf-form-btn">
-      Exit Build Mode
-    </button>
-  </div>
-
   <div class="clearfix"></div>
 </div>

public/sass/components/_row.scss

@@ -40,131 +40,22 @@
   }
 }
 
-.dash-row-header-actions {
-  position: absolute;
-  color: $text-muted;
-  font-size: $font-size-sm;
-  bottom: 0px;
-  right: 1rem;
-  a {
-    display: inline-block;
-    padding: 6px 11px;
-    color: $text-muted;
-    padding-left: 1rem;
-    &:hover {
-      color: $link-hover-color;
-    }
-  }
-  a.active {
-    color: $link-color;
-    background: $panel-bg;
-    border: 1px solid $dash-row-border-color;
-    border-bottom: none;
-    position: relative;
-    top: 1px;
-  }
-}
-
-a.dash-row-header-actions--tight {
-  padding-left: 1px;
-  padding-right: 1px;
-}
-
-.dash-row-header-add-panel {
-  padding: 0.7rem;
-  i {
-    font-size: 0.9rem;
-    position: relative;
-    top: 2px;
-    left: 1px;
-    color: $text-muted;
-  }
-}
-
-.dash-row-header-spacer {
-  flex: 50;
-}
-
 .panels-wrapper {
   flex-grow: 1;
   position: relative;
 }
 
-.dash-edit-mode {
-  .dash-row-header {
-    display: flex;
-    border-bottom: 1px solid $dash-row-border-color;
-    border-right: 1px solid $dash-row-border-color;
-    margin-right: 0;
-  }
-  .dash-row-header::after {
-    content: ' ';
-    border-top: 1px solid $dash-row-border-color;
-    width: 15px;
-    position: relative;
-  }
-  .dash-row {
-    margin-bottom: $spacer;
-  }
-  .dash-row-header-title {
-    border-left: 1px solid $dash-row-border-color;
-  }
-  .dash-row-header-title::before {
-    content: ' ';
-    border-top: 1px solid $dash-row-border-color;
-    width: 15px;
-    position: absolute;
-    margin: -9px 0 0 -9px;
-  }
-  .panels-wrapper {
-    padding: $panel-margin*2 $panel-margin 0 $panel-margin;
-    border-left: 1px solid $dash-row-border-color;
-    border-right: 1px solid $dash-row-border-color;
-  }
-  .panels-wrapper::after {
-    content: ' ';
-    border-bottom: 1px solid $dash-row-border-color;
-    width: 15px;
-    position: absolute;
-    margin: 0 0 0 -6px;
-    bottom: 0;
-  }
-  .add-row-panel-hint {
-    display: block;
-  }
-}
-
-.dash-row-options-close-btn {
-  float: right;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: none;
-  padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
-  i {
-    font-size: 120%;
-  }
-  color: $text-color;
-  &:hover {
-    color: $white;
-  }
-}
-
 .dash-row-options {
   background:  $panel-bg;
-  border-left: 1px solid $dash-row-border-color;
-  border-bottom: 1px solid $dash-row-border-color;
-  border-right: 1px solid $dash-row-border-color;
-  margin: 0 0 $panel-margin*2 0;
+  border: 1px solid $dash-row-border-color;
+  margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   padding: $panel-margin*2;
 }
 
 .dash-row-add-panel {
   background:  $panel-bg;
-  border-left: 1px solid $dash-row-border-color;
-  border-bottom: 1px solid $dash-row-border-color;
-  border-right: 1px solid $dash-row-border-color;
-  margin: 0 0 $panel-margin*2 0;
+  border: 1px solid $dash-row-border-color;
+  margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   padding: $panel-margin*2;
   display: flex;
 }
@@ -212,21 +103,32 @@ a.dash-row-header-actions--tight {
   width: 2rem;
 }
 
-.dash-row-expand-toggle {
-  margin-top: -3px;
-  left: 1px;
+.dash-row-menu-container {
   position: absolute;
-  z-index: 100;
-  transition: .10s left;
+  left: -120px;
+  background: $panel-bg;
+  width: 130px;
+  transition: .30s left;
   transition-delay: .05s;
-  width: 15px;
-  font-size: 60%;
-  color: $text-muted;
-  cursor: pointer;
-  height: 100%;
+  z-index: 100;
 
   &:hover {
+    left: 0px;
+  }
+}
+
+.dash-row-menu {
+  list-style: none;
+  li a {
+    display: block;
+    white-space: nowrap;
+    color: $text-muted;
+    font-size: $font-size-sm;
+    padding: 0.4rem 1rem;
+    &:hover {
       color: $link-color;
+      background: $input-label-bg;
+    }
   }
 }