playlist: fixed playlist buttons in dashboard header, fixes #10213

public/app/core/components/grafana_app.ts

@@ -203,7 +203,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
           }, 100);
         }
 
-        if (target.parents('.dash-playlist-actions').length === 0) {
+        if (target.parents('.navbar-buttons--playlist').length === 0) {
           playlistSrv.stop();
         }
 

public/app/core/services/backend_srv.ts

@@ -248,4 +248,5 @@ export class BackendSrv {
   }
 }
 
+
 coreModule.service('backendSrv', BackendSrv);

public/app/features/dashboard/dashgrid/RowOptions.ts

@@ -6,6 +6,7 @@ export class RowOptionsCtrl {
   dismiss: any;
   onUpdated: any;
   onDelete: any;
+  showDelete: boolean;
 
   /** @ngInject */
   constructor() {

public/app/features/dashboard/dashnav/dashnav.html

@@ -8,17 +8,11 @@
 		</a>
 	</div>
 
-	<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
-		<li>
-			<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
-		</li>
-		<li>
-			<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
-		</li>
-		<li>
-			<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
-		</li>
-	</ul>
+	<div class="navbar-buttons navbar-buttons--playlist" ng-if="ctrl.playlistSrv.isPlaying">
+		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
+		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
+		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
+	</div>
 
 	<div class="navbar__spacer"></div>
 

public/sass/components/_row.scss

@@ -17,6 +17,13 @@
       opacity: 1;
     }
   }
+
+  &:hover {
+    .dashboard-row__actions {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }
 
 .dashboard-row__title {
@@ -37,6 +44,7 @@
   visibility: hidden;
   opacity: 0;
   flex-grow: 1;
+  transition: 200ms opacity ease-in 200ms;
 
   a {
     color: $text-color-weak;

public/sass/components/_view_states.scss

@@ -38,11 +38,3 @@
   }
 }
 
-.playlist-active {
-  .dash-playlist-actions  {
-    .fa {
-      opacity: 1;
-      color: $text-color-faint !important;
-    }
-  }
-}