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

f1137e4d · Torkel Ödegaard · 075c7225 · f1137e4d · f1137e4d · f1137e4d
Commit f1137e4d authored Nov 03, 2016 by Torkel Ödegaard
6 changed files
--- a/public/app/features/dashboard/model.ts
+++ b/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;
  }

--- a/public/app/features/dashboard/row/row.html
+++ b/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 ng-if="!ctrl.dashboard.editMode">
-  <div class="row-open">
+  <div class="dash-row-expand-toggle" ng-if="!ctrl.row.collapse && !ctrl.row.showTitle" ng-click="ctrl.toggleCollapse()">
-    <div class='row-tab dropdown' ng-show="dashboardMeta.canEdit" ng-hide="dashboard.meta.fullscreen">
+		<i class="fa fa-chevron-down"></i>
-      <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>
-  <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>

--- a/public/app/features/dashboard/row/row_ctrl.ts
+++ b/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;
+    if (this.dropView === 1) {
-  }
+      this.closeDropView();
+    } else {
-  showRowOptions() {
-    this.dropView = this.dropView === 2 ? 0 : 2;
-  }
-  onMenuAddPanel() {
-    this.editMode = true;
      this.dropView = 1;
    }
+  }
-  onMenuRowOptions() {
+  showRowOptions() {
-    this.editMode = true;
+    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;

--- a/public/app/features/panel/panel_directive.ts
+++ b/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;

--- a/public/sass/components/_row.scss
+++ b/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;

--- a/public/sass/pages/_dashboard.scss
+++ b/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;
+    }
+  }
+}