ux(playlist): finalize the ux for playlists

public/app/features/playlist/partials/playlist.html

@@ -7,6 +7,8 @@
 		<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
 	</div>
 
+	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
+
 	<div class="gf-form-group">
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Name</span>
@@ -19,24 +21,28 @@
 	</div>
 
 	<div class="gf-form-group">
-		<div class="max-width-28">
+		<h3 class="page-headering">Dashboards</h3>
-			<h5 class="page-headering">Add dashboards</h5>
-			<div style="">
-				<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
-			</div>
-		</div>
 	</div>
 
 	<div class="row">
 		<div class="col-md-6">
-			<h5>Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})</h5>
+
+			<div class="playlist-search-containerwrapper">
+				<div class="max-width-32">
+					<h5 class="page-headering playlist-column-header">Available</h5>
+					<div style="">
+						<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
+					</div>
+				</div>
+			</div>
+
 			<div ng-if="ctrl.filteredDashboards.length > 0">
-				<table class="grafana-options-table">
+				<table class="grafana-options-table playlist-available-list">
 					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
-						<td style="white-space: nowrap;">
+						<td>
-							{{playlistItem.title}}
+							<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
 						</td>
-						<td style="text-align: center">
+						<td class="add-dashboard">
 							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
 								<i class="fa fa-plus"></i>
 								Add to playlist
@@ -46,7 +52,7 @@
 				</table>
 			</div>
 			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
-					<div ng-repeat="tag in ctrl.filteredTags" class="pointer" style="width: 180px; float: left;"
+					<div ng-repeat="tag in ctrl.filteredTags" class="pointer tag-result-container"
 						ng-click="ctrl.addTagPlaylistItem(tag, $event)">
 						<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
 							<i class="fa fa-tag"></i>
@@ -57,20 +63,20 @@
 		</div>
 
 		<div class="col-md-6">
-			<h5>Added dashboards</h5>
+			<h5 class="page headering playlist-column-header">Selected</h5>
-			<table class="grafana-options-table">
+			<table class="grafana-options-table playlist-available-list">
 				<tr ng-repeat="playlistItem in ctrl.playlistItems">
-					<td style="white-space: nowrap;" ng-if="playlistItem.type === 'dashboard_by_id'">
+					<td ng-if="playlistItem.type === 'dashboard_by_id'">
-						{{playlistItem.title}}
+						<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
 					</td>
-					<td style="white-space: nowrap;"  ng-if="playlistItem.type === 'dashboard_by_tag'">
+					<td ng-if="playlistItem.type === 'dashboard_by_tag'">
 						<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
 							<i class="fa fa-tag"></i>
 							<span>{{playlistItem.title}}</span>
 						</a>
 					</td>
 
-					<td style="text-align: right">
+					<td class="selected-playlistitem-settings">
 						<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
 							<i class="fa fa-arrow-up"></i>
 						</button>
@@ -89,7 +95,10 @@
 	<div class="clearfix"></div>
 
 	<div class="gf-form-button-row">
-		<a class="btn btn-success"
+		<a class="btn btn-success " ng-show="ctrl.isNew()"
+			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
+			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)"><i class="fa fa-plus"></i>&nbsp;Add</a>
+		<a class="btn btn-success" ng-show="!ctrl.isNew()"
 			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
 			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
 		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>

public/app/features/playlist/playlist_edit_ctrl.ts

@@ -11,7 +11,7 @@ export class PlaylistEditCtrl {
   searchQuery: string = '';
   loading: boolean = false;
   playlist: any = {
-    interval: '10m',
+    interval: '5m',
   };
   playlistItems: any = [];
   dashboardresult: any = [];

public/sass/pages/_playlist.scss

@@ -1,3 +1,8 @@
+.playlist-description {
+  width: 555px;
+  margin-bottom: 20px;
+}
+
 .playlist-search-container {
   z-index: 1000;
   position: relative;
@@ -18,6 +23,10 @@
   right: 11px;
 }
 
+.playlist-search-containerwrapper {
+  margin-bottom: 15px;
+}
+
 .playlist-search-field-wrapper {
   input {
     width: 100%;
@@ -90,3 +99,29 @@
     padding-left: 20px;
   }
 }
+
+.playlist-available-list {
+  td {
+    line-height: 2rem;
+    white-space: nowrap;
+  }
+
+  .add-dashboard {
+    text-align: center;
+  }
+}
+
+.playlist-column-header {
+  border-bottom: thin solid $gray-1;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.selected-playlistitem-settings {
+  text-align: right;
+}
+
+.tag-result-container {
+  width: 160px;
+  float: left;
+}