ux(dashboard): removed green row icon gain, replaced with collapse icon, #6442

public/app/features/dashboard/model.ts

@@ -196,7 +196,6 @@ export class DashboardModel {
   }
 
   setPanelFocus(id) {
-    console.log('setting focus panel id', id);
     this.meta.focusPanelId = id;
   }
 

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

-<div ng-if="ctrl.editMode">
+<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">
@@ -40,27 +40,12 @@
   </div>
 </div>
 
-<div ng-if="!ctrl.editMode">
-  <div class="row-open">
-    <div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
-      <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
-        <i class="fa fa-bars"></i>
-      </span>
-      <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-        <li>
-          <a ng-click="ctrl.onMenuAddPanel()">Add Panel</a>
-        </li>
-        <li>
-          <a ng-click="ctrl.onMenuRowOptions()">Row Options</a>
-        </li>
-        <li>
-          <a ng-click="ctrl.onMenuDeleteRow()">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.showtitle">
+  <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>

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

@@ -12,7 +12,6 @@ export class DashRowCtrl {
   dashboard: any;
   row: any;
   dropView: number;
-  editMode: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
@@ -22,12 +21,6 @@ export class DashRowCtrl {
       this.dropView = 1;
       delete this.row.isNew;
     }
-
-    this.dashboard.events.on('edit-mode-changed', this.editModeChanged.bind(this), $scope);
-  }
-
-  editModeChanged() {
-    this.editMode = this.dashboard.editMode;
   }
 
   onDrop(panelId, dropTarget) {
@@ -58,7 +51,7 @@ export class DashRowCtrl {
         dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
       } else if (this.row === dragObject.row) {
         // just move element
-        this.row.movePanel(dropTarget.index, dragObject.index);
+        this.row.movePanel(dragObject.index, dropTarget.index);
       } else {
         // split drop target space
         dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
@@ -100,32 +93,29 @@ export class DashRowCtrl {
   }
 
   toggleCollapse() {
-    this.dropView = 0;
+    this.closeDropView();
     this.row.collapse = !this.row.collapse;
   }
 
   showAddPanel() {
     this.row.collapse = false;
-    this.dropView = this.dropView === 1 ? 0 : 1;
-  }
-
-  showRowOptions() {
-    this.dropView = this.dropView === 2 ? 0 : 2;
-  }
-
-  onMenuAddPanel() {
-    this.editMode = true;
+    if (this.dropView === 1) {
+      this.closeDropView();
+    } else {
       this.dropView = 1;
     }
+  }
 
-  onMenuRowOptions() {
-    this.editMode = true;
+  showRowOptions() {
+    if (this.dropView === 2) {
+      this.closeDropView();
+    } else {
       this.dropView = 2;
     }
+  }
 
   closeDropView() {
     this.dropView = 0;
-    this.editMode = this.dashboard.editMode;
   }
 
   onMenuDeleteRow() {
@@ -205,6 +195,7 @@ coreModule.directive('panelWidth', function($rootScope) {
 coreModule.directive('panelDropZone', function($timeout) {
   return function(scope, element) {
     var row = scope.ctrl.row;
+    var dashboard = scope.ctrl.dashboard;
     var indrag = false;
     var textEl = element.find('.panel-drop-zone-text');
 
@@ -220,7 +211,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     function updateState() {
-      if (scope.ctrl.editMode) {
+      if (scope.ctrl.dashboard.editMode) {
         if (row.panels.length === 0 && indrag === false) {
           return showPanel(12, 'Empty Space');
         }
@@ -246,7 +237,7 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     row.events.on('span-changed', updateState, scope);
-    scope.$watchGroup(['ctrl.editMode'], updateState);
+    dashboard.events.emit('edit-mode-changed', updateState, scope);
 
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;

public/app/features/panel/panel_directive.ts

@@ -146,7 +146,7 @@ module.directive('grafanaPanel', function($rootScope) {
 module.directive('panelResizer', function($rootScope) {
   return {
     restrict: 'E',
-    template: '<span class="resize-panel-handle"></span>',
+    template: '<span class="resize-panel-handle fa fa-signal"></span>',
     link: function(scope, elem) {
       var resizing = false;
       var lastPanel;

public/sass/components/_row.scss

@@ -169,15 +169,6 @@ a.dash-row-header-actions--tight {
   display: flex;
 }
 
-.dash-edit-mode {
-  .dash-row-options {
-    margin-bottom: 0;
-  }
-  .dash-row-add-panel {
-    margin-bottom: 0;
-  }
-}
-
 .add-panel-panels-scroll {
   width: 100%;
   overflow: hidden;
@@ -215,6 +206,23 @@ a.dash-row-header-actions--tight {
   width: 2rem;
 }
 
+.dash-row-expand-toggle {
+  margin-top: -3px;
+  left: 1px;
+  position: absolute;
+  z-index: 100;
+  transition: .10s left;
+  transition-delay: .05s;
+  width: 15px;
+  font-size: 60%;
+  color: $text-muted;
+  cursor: pointer;
+  height: 100%;
+
+  &:hover {
+    color: $link-color;
+  }
+}
 
 // Legacy mode
 .row-tab {
@@ -237,14 +245,6 @@ a.dash-row-header-actions--tight {
   color: rgba(255,255,255,.90);
 }
 
-.row-button {
-  width: 24px;
-  float: left;
-  cursor: pointer;
-  line-height: 31px;
-  background-color: $blue-dark;
-}
-
 .row-open {
   margin-top: 1px;
   left: -24px;

public/sass/pages/_dashboard.scss

@@ -198,6 +198,7 @@ div.flot-text {
   width: 15px;
   height: 15px;
   display: block;
+  color: $panel-bg;
 }
 
 .dashboard-header {
@@ -211,3 +212,15 @@ div.flot-text {
   }
 }
 
+.dash-edit-mode {
+  .resize-panel-handle {
+    color: $text-color-faint;
+    overflow: hidden;
+    &:before {
+      left: initial;
+      right: -5px;
+      bottom: 0px;
+      position: absolute;
+    }
+  }
+}