feat(playlist): minor ux changes for playlists

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

@@ -1,4 +1,4 @@
-<p class="text-center">Are you sure want to delete "{{ playlist.title }}" playlist?</p>
+<p class="text-center">Are you sure want to delete "{{playlist.title}}" playlist?</p>
 <p class="text-center">
   <button type="button" class="btn btn-danger" ng-click="removePlaylist()">Yes</button>
   <button type="button" class="btn btn-default" ng-click="dismiss()">No</button>

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

@@ -1,47 +1,42 @@
 <topnav icon="fa fa-fw fa-list" title="Playlists"></topnav>
 
-<div class="page-container">
-  <div class="page">
-    <button type="submit" class="btn btn-success" ng-click="createPlaylist()">Create playlist</button>
+<div class="page-container" style="background: transparent; border: 0;">
+  <div class="page-wide">
+    <h2>Playlists</h2>
 
-    <br>
-    <br>
+    <button type="submit" class="btn btn-success pull-right" ng-click="createPlaylist()">
+    <i class="fa fa-plus"></i> New playlist</button>
+    <br />
 
-    <div ng-if="playlists.length === 0">
-      <em>No saved playlists</em>
-    </div>
+    <table class="filter-table" style="margin-top: 20px">
+      <thead>
+        <th><strong>Title</strong></th>
+        <th><strong>Url</strong></th>
+        <th style="width: 61px"></th>
+        <th style="width: 61px"></th>
+        <th style="width: 25px"></th>
 
-    <div ng-if="playlists.length > 0">
-      <em>Saved playlists</em>
-    </div>
-
-    <br>
-
-    <table class="grafana-options-table" ng-if="playlists.length > 0">
-      <tr>
-        <td><strong>Title</strong></td>
-        <td colspan="0"><strong>Url</strong></td>
-      </tr>
+      </thead>
       <tr ng-repeat="playlist in playlists">
-        <td style="width:1%">
+        <td >
           {{playlist.title}}
         </td>
-        <td style="width:90%">
+        <td >
           <a href="{{ playlistUrl(playlist) }}">{{ playlistUrl(playlist) }}</a>
         </td>
-        <td style="width: 1%">
+        <td class="text-center">
           <a href="{{ playlistUrl(playlist) }}" class="btn btn-inverse btn-mini">
             <i class="fa fa-play"></i>
             Play
           </a>
         </td>
-        <td style="width: 1%">
+        <td  class="text-right">
           <a href="playlists/edit/{{playlist.id}}" class="btn btn-inverse btn-mini">
             <i class="fa fa-edit"></i>
             Edit
           </a>
         </td>
-        <td style="width: 1%">
+        <td  class="text-right">
           <a ng-click="removePlaylist(playlist)" class="btn btn-danger btn-mini">
             <i class="fa fa-remove"></i>
           </a>

public/app/features/playlist/playlistsCtrl.js

@@ -41,13 +41,10 @@ function (angular, _) {
         src: './app/features/playlist/partials/playlist-remove.html',
         scope: modalScope
       });
-
     };
 
     $scope.createPlaylist = function() {
       $location.path('/playlists/create');
     };
-
   });
-
 });