From 3e712178ccd1bead2d48e9910bc1faf23410281e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 3 Nov 2016 15:50:11 +0100
Subject: [PATCH] ux(dashboard): began removing build mode and adding new slide
 out row menu

---
 public/app/core/services/keybindingSrv.ts     |   6 +-
 .../features/dashboard/dashnav/dashnav.html   |   6 -
 public/app/features/dashboard/model.ts        |   1 -
 .../app/features/dashboard/row/options.html   |   9 --
 public/app/features/dashboard/row/options.ts  |   4 -
 public/app/features/dashboard/row/row.html    | 117 +++++++-------
 public/app/features/dashboard/row/row_ctrl.ts |  17 +-
 .../features/dashboard/submenu/submenu.html   |   6 -
 public/sass/components/_row.scss              | 150 +++---------------
 9 files changed, 88 insertions(+), 228 deletions(-)

diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index 72c25c34303..14ea84d1df0 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/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;
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 96594e3157e..71e6b799de8 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/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>
diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts
index ae6b0aa009f..7567cb78ce8 100644
--- a/public/app/features/dashboard/model.ts
+++ b/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
diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html
index 96655b4970c..4544faef523 100644
--- a/public/app/features/dashboard/row/options.html
+++ b/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>
 
diff --git a/public/app/features/dashboard/row/options.ts b/public/app/features/dashboard/row/options.ts
index 6e9faaf8c00..8f19b734d8a 100644
--- a/public/app/features/dashboard/row/options.ts
+++ b/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() {
diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html
index 2eb167bbde0..b0772ea6290 100644
--- a/public/app/features/dashboard/row/row.html
+++ b/public/app/features/dashboard/row/row.html
@@ -1,72 +1,65 @@
-<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>
-    </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>
-      </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>
-      </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>
-      </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>
-      </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="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>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuRowOptions()">
+				<i class="fa fa-cog"></i> Row Options
+			</a>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-arrow-up"></i> Move Up
+			</a>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-arrow-down"></i> Move Down
+			</a>
+		</li>
+		<li>
+			<a ng-click="ctrl.onMenuDeleteRow()">
+				<i class="fa fa-trash"></i> Delete row
+			</a>
+		</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">
+	<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-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>
-        <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 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">
-  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
-    <plugin-component type="panel" class="panel-margin">
-    </plugin-component>
-  </div>
+	<div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
+		<plugin-component type="panel" class="panel-margin">
+		</plugin-component>
+	</div>
 
-  <div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
-    <div class="panel-margin">
-      <div class="panel-container">
-        <div class="panel-drop-zone-text"></div>
-      </div>
-    </div>
-  </div>
+	<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="ctrl.onDrop($data)" data-drop="true">
+		<div class="panel-margin">
+			<div class="panel-container">
+				<div class="panel-drop-zone-text"></div>
+			</div>
+		</div>
+	</div>
 
-  <div class="clearfix"></div>
+	<div class="clearfix"></div>
 </div>
 
diff --git a/public/app/features/dashboard/row/row_ctrl.ts b/public/app/features/dashboard/row/row_ctrl.ts
index bb883872e67..2aa950ea041 100644
--- a/public/app/features/dashboard/row/row_ctrl.ts
+++ b/public/app/features/dashboard/row/row_ctrl.ts
@@ -97,21 +97,12 @@ export class DashRowCtrl {
     this.row.collapse = !this.row.collapse;
   }
 
-  showAddPanel() {
-    this.row.collapse = false;
-    if (this.dropView === 1) {
-      this.closeDropView();
-    } else {
-      this.dropView = 1;
-    }
+  onMenuAddPanel() {
+    this.dropView = 1;
   }
 
-  showRowOptions() {
-    if (this.dropView === 2) {
-      this.closeDropView();
-    } else {
-      this.dropView = 2;
-    }
+  onMenuRowOptions() {
+    this.dropView = 2;
   }
 
   closeDropView() {
diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html
index 3b025ee026a..4b8cd3e1e2b 100644
--- a/public/app/features/dashboard/submenu/submenu.html
+++ b/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>
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 663dd7451e4..8a771bfdf79 100644
--- a/public/sass/components/_row.scss
+++ b/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 {
-    color: $link-color;
+    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;
+    }
   }
 }