ux(dashboard): refining new row slide out menu, #6442

public/app/core/components/grafana_app.ts

@@ -116,6 +116,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
           return;
         }
 
+        // for stuff that animates, slides out etc, clicking it needs to
+        // hide it right away
+        var clickAutoHide = target.closest('[data-click-hide]');
+        if (clickAutoHide.length) {
+          clickAutoHide.toggleClass('transition-hide');
+          setTimeout(function() {
+            clickAutoHide.toggleClass('transition-hide');
+          }, 1000);
+        }
+
         if (target.parents('.dash-playlist-actions').length === 0) {
           playlistSrv.stop();
         }

public/app/core/services/keybindingSrv.ts

@@ -59,7 +59,7 @@ export class KeybindingSrv {
   }
 
   showHelpModal() {
-   appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
+    appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
   }
 
   bind(keyArg, fn) {

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

@@ -1,10 +1,9 @@
-<div class="dash-row-menu-container" id="dash-row-menu-container-id" ng-hide="dashboard.meta.fullscreen">
+<div class="dash-row-menu-container" data-click-hide>
-	<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
+	<ul class="dash-row-menu" role="menu">
 		<li>
 			<a ng-click="ctrl.onMenuAddPanel()">
 				<i class="fa fa-plus"></i> Add Panel
 			</a>
-			<i class="icon-gf icon-gf-bulk_action dash-row-menu--affordance" id="dash-row-menu--affordance-id"></i>
 		</li>
 		<li>
 			<a ng-click="ctrl.onMenuRowOptions()">
@@ -27,6 +26,9 @@
 			</a>
 		</li>
 	</ul>
+  <div class="dash-row-menu-grip">
+    <i class="fa fa-ellipsis-v"></i>
+  </div>
 </div>
 
 <div class="dash-row-header" ng-if="ctrl.row.showTitle || ctrl.row.collapse">

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

@@ -14,7 +14,7 @@ export class DashRowCtrl {
   dropView: number;
 
   /** @ngInject */
-  constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) {
+  constructor(private $scope, private $rootScope, private $timeout) {
     this.row.title = this.row.title || 'Row title';
 
     if (this.row.isNew) {
@@ -202,18 +202,16 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     function updateState() {
-      if (scope.ctrl.dashboard.editMode) {
+      if (row.panels.length === 0 && indrag === false) {
-        if (row.panels.length === 0 && indrag === false) {
+        return showPanel(12, 'Empty Space');
-          return showPanel(12, 'Empty Space');
+      }
-        }
 
-        var dropZoneSpan = 12 - row.span;
+      var dropZoneSpan = 12 - row.span;
-        if (dropZoneSpan > 0) {
+      if (dropZoneSpan > 0) {
-          if (indrag)  {
+        if (indrag)  {
-            return showPanel(dropZoneSpan, 'Drop Here');
+          return showPanel(dropZoneSpan, 'Drop Here');
-          } else {
+        } else {
-            return showPanel(dropZoneSpan, 'Empty Space');
+          return showPanel(dropZoneSpan, 'Empty Space');
-          }
         }
       }
 
@@ -228,7 +226,6 @@ coreModule.directive('panelDropZone', function($timeout) {
     }
 
     row.events.on('span-changed', updateState, scope);
-    dashboard.events.emit('edit-mode-changed', updateState, scope);
 
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;
@@ -239,6 +236,8 @@ coreModule.directive('panelDropZone', function($timeout) {
       indrag = false;
       updateState();
     });
+
+    updateState();
   };
 });
 

public/app/partials/help_modal.html

@@ -1,71 +0,0 @@
-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-keyboard-o"></i>
-			<span class="p-l-1">Help</span>
-		</h2>
-
-		<ul class="gf-tabs">
-			<li class="gf-tabs-item" ng-repeat="tab in ['Shortcuts', 'Tips', 'Docs']">
-				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
-					{{::tab}}
-				</a>
-			</li>
-		</ul>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content">
-		<table class="shortcut-table">
-			<tr>
-				<th></th>
-				<th style="text-align: left;">Dashboard wide shortcuts</th>
-			</tr>
-			<tr>
-				<td style="text-align: right;"><span class="label label-info">ESC</span></td>
-				<td>Exit fullscreen edit/view mode, close search or any editor view</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">F</span></td>
-				<td>Open dashboard search view (also contains import/playlist controls)</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">R</span></td>
-				<td>Refresh (Fetches new data and rerenders panels)</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">left arrow key</span></td>
-				<td>Shift time backward</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">right arrow key</span></td>
-				<td>Shift time forward</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+S</span></td>
-				<td>Save dashboard</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+H</span></td>
-				<td>Hide row controls</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+Z</span></td>
-				<td>Zoom out</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+I</span></td>
-				<td>Quick snapshot</td>
-			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+O</span></td>
-				<td>Enable/Disable shared graph crosshair</td>
-			</tr>
-		</table>
-	</div>
-
-</div>
-

public/sass/_variables.dark.scss

@@ -54,7 +54,7 @@ $body-color:   		 	    $gray-4;
 $text-color:   	   		  $gray-4;
 $text-color-strong: 	  $white;
 $text-color-weak: 		  $gray-2;
-$text-color-faint:      $gray-1;
+$text-color-faint:      $dark-5;
 $text-color-emphasis: 	$gray-5;
 
 $text-shadow-strong: 1px 1px 4px $black;

public/sass/components/_row.scss

@@ -3,6 +3,7 @@
   display: block;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .dash-row-header {
@@ -103,77 +104,68 @@
   width: 2rem;
 }
 
+$dash-row-menu-animation-speed: 0.20s;
+
 .dash-row-menu-container {
   position: absolute;
-  left: -120px;
+  top: 0px;
-  background: $panel-bg;
+  transform: translate(-131px, 0);
-  width: 130px;
+  transition: $dash-row-menu-animation-speed ease-out 0.5s;
-  transition: .30s left;
-  transition-delay: .05s;
   z-index: 100;
+  display: flex;
+  flex-direction: row;
 
   &:hover {
-    left: 0px;
+    transform: translate(-$panel-margin, 0);
+    transition: $dash-row-menu-animation-speed ease-in 0.05s;
     z-index: 101;
-    box-shadow: $search-shadow;
+
+    .dash-row-menu-grip {
+      opacity: 0;
+      transition: $dash-row-menu-animation-speed ease-in 0.05s;
+    }
+
+    &.transition-hide {
+      transform: translate(-131px, 0);
+      transition: 0.0s ease-in 0s;
+    }
   }
 }
 
 .dash-row-menu {
+  border-top: $panel-border;
+  border-bottom: $panel-border;
   list-style: none;
+  flex-grow: 1;
+  box-shadow: $search-shadow;
+  background: $side-menu-bg;
+
   li a {
-    display: inline-block;
+    display: block;
     white-space: nowrap;
     color: $text-muted;
     font-size: $font-size-sm;
-    padding: 0.4rem 1rem;
+    padding: $spacer/2 $spacer;
+    border-left: 2px solid $side-menu-bg;
+    i {
+      display: inline-block;
+      padding-right: $spacer/2;
+    }
+
     &:hover {
+      @include left-brand-border-gradient();
       color: $link-color;
       background: $input-label-bg;
     }
   }
 }
 
-.dash-row-menu--affordance {
+.dash-row-menu-grip {
-  float: right;
-  font-size: 130%;
-  margin-top: 7px;
-  color: $text-color-faint;
-  margin-right: -7px;
-  opacity: 1;
-  transition: .30s opacity forwards;
-}
-
-// Legacy mode
-.row-tab {
-  .dropdown-menu-right {
-    top: 0;
-    left: 33px;
-  }
-}
-
-.row-tab-button {
-  padding: 0px;
-  cursor: pointer;
-  vertical-align: middle;
-  width: 30px;
-  height: 30px;
   text-align: center;
-  display: inline-block;
+  font-size: 130%;
-  line-height: 30px;
+  color: $text-color-faint;
-  background: $btn-success-bg;
+  opacity: 1;
-  color: rgba(255,255,255,.90);
+  transition: $dash-row-menu-animation-speed ease-out 0.5s;
+  width: 1rem;
 }
 
-.row-open {
-  margin-top: 1px;
-  left: -24px;
-  position: absolute;
-  z-index: 100;
-  transition: .10s left;
-  transition-delay: .05s;
-
-  &:hover {
-    left: 0px;
-  }
-}

public/sass/pages/_dashboard.scss

@@ -52,10 +52,6 @@ div.flot-text {
   }
 }
 
-.add-row-panel-hint {
-  display: none;
-}
-
 .panel-content {
   padding: 0px 10px 5px 10px;
 }
@@ -212,15 +208,13 @@ div.flot-text {
   }
 }
 
-.dash-edit-mode {
+.resize-panel-handle {
-  .resize-panel-handle {
+  color: $text-color-faint;
-    color: $text-color-faint;
+  overflow: hidden;
-    overflow: hidden;
+  &:before {
-    &:before {
+    left: initial;
-      left: initial;
+    right: -5px;
-      right: -5px;
+    bottom: 0px;
-      bottom: 0px;
+    position: absolute;
-      position: absolute;
-    }
   }
 }