feat(ux): trying to simplify display rules for edit mode / row actions

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

@@ -1,35 +1,49 @@
-<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}}</span>
-  </a>
-
-  <div class="dash-row-header-spacer">
+<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}}</span>
+    </a>
+
+    <div class="dash-row-header-spacer">
+    </div>
+
+    <div class="dash-row-header-actions">
+      <a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
+        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()">
+        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>
+    </div>
   </div>
 
-  <div class="dash-row-header-actions">
-    <a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
-      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()">
-      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>
+  <div ng-if="ctrl.dropView === 1">
+    <dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
   </div>
-</div>
 
-<div ng-if="ctrl.dropView === 1">
-  <dash-row-add-panel row-ctrl="ctrl"></dash-row-add-panel>
+  <div ng-if="ctrl.dropView === 2">
+    <dash-row-options row-ctrl="ctrl"></dash-row-options>
+  </div>
 </div>
 
-<div ng-if="ctrl.dropView === 2">
-  <dash-row-options row-ctrl="ctrl"></dash-row-options>
+<div ng-if="!ctrl.dashboard.editMode && ctrl.row.showTitle">
+  <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}}</span>
+    </a>
+  </div>
 </div>
 
 <div class="panels-wrapper" ng-if="!ctrl.row.collapse">

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

@@ -84,6 +84,7 @@ export class DashRowCtrl {
   }
 
   showAddPanel() {
+    this.row.collapse = false;
     this.dropView = this.dropView === 1 ? 0 : 1;
   }
 
@@ -104,11 +105,8 @@ export function rowDirective($rootScope) {
       row: "=",
     },
     link: function(scope, element) {
-      scope.$watchGroup(['ctrl.row.collapse', 'ctrl.row.height', 'ctrl.row.showTitle', 'ctrl.dropView'], function() {
+      scope.$watchGroup(['ctrl.row.height'], function() {
         element.css({minHeight: scope.ctrl.row.collapse ? '5px' : scope.ctrl.row.height});
-        element.toggleClass('dash-row-show-title', scope.ctrl.row.showTitle === true);
-        element.toggleClass('dash-row-show-options', scope.ctrl.dropView === 2);
-        element.toggleClass('dash-row-show-add-panel', scope.ctrl.dropView === 1);
       });
 
       $rootScope.onAppEvent('panel-fullscreen-enter', function(evt, info) {

public/sass/_grafana.scss

@@ -73,6 +73,7 @@
 @import "components/query_part";
 @import "components/jsontree";
 @import "components/edit_sidemenu.scss";
+@import "components/row.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_row.scss

@@ -0,0 +1,216 @@
+
+.dash-row {
+  display: block;
+  display: flex;
+  flex-direction: column;
+}
+
+.dash-row-header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin-right: $panel-margin;
+  margin-left: 0;
+
+  .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
+  .h2 { font-size: 2.4rem; line-height: 3.5rem; }
+  .h3 { font-size: 2.0rem; line-height: 3rem;}
+  .h4 { font-size: 1.7rem; }
+  .h5 { font-size: 1.4rem; }
+  .h6 { font-size: 1rem }
+}
+
+.dash-row-header-title {
+  padding: 0.6rem;
+  flex-grow: 1;
+
+  .dash-row-collapse-toggle {
+    padding: 0 2px;
+    font-size: $font-size-xs;
+    color: $text-muted;
+    position: relative;
+    left: -3px;
+    top: -1px;
+  }
+
+  &:hover {
+    .dash-row-collapse-toggle {
+      color: $link-color;
+    }
+  }
+}
+
+.dash-row-header-actions {
+  position: absolute;
+  color: $text-muted;
+  font-size: $font-size-sm;
+  bottom: 5px;
+  right: 1rem;
+  a {
+    color: $text-muted;
+    padding-left: 1rem;
+    &:hover {
+      color: $link-hover-color;
+    }
+  }
+}
+
+.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 $dark-4;
+    border-right: 1px solid $dark-4;
+    margin-right: 0;
+  }
+  .dash-row-header::after {
+    content: ' ';
+    border-top: 1px solid $dark-4;
+    width: 15px;
+    position: relative;
+  }
+  .dash-row {
+    margin-bottom: $spacer*2;
+  }
+  .dash-row-header-title {
+    border-left: 1px solid $dark-4;
+  }
+  .dash-row-header-title::before {
+    content: ' ';
+    border-top: 1px solid $dark-4;
+    width: 15px;
+    position: absolute;
+    margin: -9px 0 0 -9px;
+  }
+  .panels-wrapper {
+    padding: $panel-margin*2 $panel-margin 0 $panel-margin;
+    border-left: 1px solid $dark-4;
+    border-right: 1px solid $dark-4;
+  }
+  .panels-wrapper::after {
+    content: ' ';
+    border-bottom: 1px solid $dark-4;
+    width: 15px;
+    position: absolute;
+    margin: 0 0 0 -12px;
+    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: $panel-border;
+  border-bottom: $panel-border;
+  border-right: $panel-border;
+  margin: 0 0 $panel-margin*2 0;
+  padding: $panel-margin*2;
+  box-shadow: 0px 3px 7px -3px $black;
+}
+
+.dash-row-add-panel {
+  background:  $panel-bg;
+  border-left: $panel-border;
+  border-bottom: $panel-border;
+  border-right: $panel-border;
+  margin: 0 0 $panel-margin*2 0;
+  padding: $panel-margin*2;
+  box-shadow: 0px 3px 7px -3px $black;
+  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;
+}
+
+.add-panel-panels {
+  display: flex;
+  flex-direction: row;
+}
+
+.add-panel-item {
+  background: $input-label-bg;
+  border: $panel-border;
+  padding: $spacer;
+  min-width: 9rem;
+  max-width: 9rem;
+  text-align: center;
+  margin: $gf-form-margin;
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
+  }
+}
+
+.add-panel-item-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: $font-size-sm;
+}
+
+.add-panel-item-img {
+  width: 2rem;
+}
+
+// Animations
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+

public/sass/pages/_dashboard.scss

@@ -200,267 +200,3 @@ div.flot-text {
   }
 }
 
-//
-// Dashboard row
-//
-
-.dash-row {
-  display: block;
-}
-
-.dash-row-header {
-  position: relative;
-  display: flex;
-  display: none;
-  flex-direction: row;
-  margin-right: $panel-margin;
-  margin-left: 0;
-
-  &:hover {
-    .dash-row-header-actions {
-      display: block;
-      opacity: 0;
-      animation: fadeIn 150ms linear 100ms forwards;
-    }
-  }
-
-  .h1 { font-size: 2.7rem; font-style: normal; line-height: 4rem }
-  .h2 { font-size: 2.4rem; line-height: 3.5rem; }
-  .h3 { font-size: 2.0rem; line-height: 3rem;}
-  .h4 { font-size: 1.7rem; }
-  .h5 { font-size: 1.4rem; }
-  .h6 { font-size: 1rem }
-}
-
-.dash-row-header-title {
-  padding: 0.6rem;
-
-  .dash-row-collapse-toggle {
-    padding: 0 2px;
-    font-size: $font-size-xs;
-    color: $text-muted;
-    position: relative;
-    left: -3px;
-    top: -1px;
-  }
-
-  &:hover {
-    .dash-row-collapse-toggle {
-      color: $link-color;
-    }
-  }
-}
-
-.dash-row-header-actions {
-  position: absolute;
-  display: none;
-  color: $text-muted;
-  font-size: $font-size-sm;
-  bottom: 5px;
-  right: 1rem;
-  a {
-    color: $text-muted;
-    padding-left: 1rem;
-    &:hover {
-      color: $link-hover-color;
-    }
-  }
-}
-
-.dash-row-show-options {
-  .dash-row-header-actions {
-    display: block;
-  }
-  .dash-row-header-action-show-options {
-    color: $link-color;
-  }
-  .dash-row-header {
-    border-bottom: none;
-  }
-}
-
-.dash-row-show-add-panel {
-  .dash-row-header-actions {
-    display: block;
-  }
-  .dash-row-header-action--add-panel {
-    color: $link-color;
-  }
-  .dash-row-header {
-    border-bottom: none;
-  }
-}
-
-.dash-row-show-title {
-  .dash-row-header {
-    display: flex;
-  }
-}
-
-.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;
-}
-
-.dash-edit-mode {
-  .dash-row-header {
-    display: flex;
-    border-bottom: 1px solid $dark-4;
-    border-right: 1px solid $dark-4;
-    margin-right: 0;
-    .dash-row-header-actions {
-      display: block;
-    }
-  }
-  .dash-row-show-add-panel {
-    .dash-row-header {
-      border-bottom: none;
-    }
-   }
-  .dash-row-show-options {
-    .dash-row-header {
-      border-bottom: none;
-    }
-   }
-  .dash-row-header::after {
-    content: ' ';
-    border-top: 1px solid $dark-4;
-    width: 15px;
-    position: relative;
-  }
-  .dash-row {
-    margin-bottom: $spacer*2;
-  }
-  .dash-row-header-title {
-    border-left: 1px solid $dark-4;
-  }
-  .dash-row-header-title::before {
-    content: ' ';
-    border-top: 1px solid $dark-4;
-    width: 15px;
-    position: absolute;
-    margin: -9px 0 0 -9px;
-  }
-  .panels-wrapper {
-    padding: $panel-margin*2 $panel-margin 0 $panel-margin*2;
-    border-left: 1px solid $dark-4;
-    border-right: 1px solid $dark-4;
-  }
-  .panels-wrapper::after {
-      content: ' ';
-      border-bottom: 1px solid $dark-4;
-      width: 15px;
-      position: absolute;
-      margin: 0 0 0 -12px;
-    }
-
-  .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 {
-  border-left: $panel-border;
-  border-bottom: $panel-border;
-  border-right: $panel-border;
-  margin: 0 0 $panel-margin*2 0;
-  padding: $panel-margin*2;
-  box-shadow: 0px 3px 7px -3px $black;
-}
-
-.dash-row-add-panel {
-  border-left: $panel-border;
-  border-bottom: $panel-border;
-  border-right: $panel-border;
-  margin: 0 0 $panel-margin*2 0;
-  padding: $panel-margin*2;
-  // display: flex;
-  // align-items: flex-start;
-  // position: relative;
-  box-shadow: 0px 3px 7px -3px $black;
-}
-
-.dash-edit-mode {
-  .dash-row-options {
-    margin-bottom: 0;
-  }
-  .dash-row-add-panel {
-    margin-bottom: 0;
-  }
-}
-
-.add-panel-panels-scroll {
-  width: 100%;
-  overflow: hidden;
-}
-
-.add-panel-panels {
-  display: flex;
-  flex-direction: row;
-}
-
-.add-panel-item {
-  background: $panel-bg;
-  border: $panel-border;
-  padding: $spacer;
-  min-width: 9rem;
-  max-width: 9rem;
-  text-align: center;
-  margin: $gf-form-margin;
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8)
-  }
-}
-
-.add-panel-item-name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: $font-size-sm;
-}
-
-.add-panel-item-img {
-  width: 2rem;
-}
-
-// Animations
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-