changed playlist modal to edit pane

src/app/controllers/annotationsEditorCtrl.js

@@ -9,7 +9,7 @@ function (angular, app, _, $) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $timeout) {
+  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
     var annotationDefaults = {
       name: '',
       datasource: null,

src/app/partials/playlist.html

@@ -1,55 +1,61 @@
 <div ng-controller="PlaylistCtrl" ng-init="init()">
-  <div class="modal-header">
-    <h3>Start dashboard playlist</h3>
-  </div>
-  <div class="modal-body">
-    <div class="editor-row">
-      <div class="section">
-        <div class="editor-option">
-          <table class="table table-striped span4">
-            <tr>
-              <th>Dashboard</th>
-              <th>Include</th>
-              <th style="white-space: nowrap;">Remove as favorite</th>
-            </tr>
-            <tr ng-repeat="dashboard in favDashboards">
-              <td style="white-space: nowrap;">
-                {{dashboard.title}}
-              </td>
-              <td style="text-align: center">
-                <input type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
-              </td>
-              <td style="text-align: center">
-                <i class="icon-remove pointer" ng-click="removeAsFavorite(dashboard)"></i>
-              </td>
-            </tr>
-            <tr ng-hide="favDashboards.length">
-              <td colspan="3">
-                <i class="icon-warning"></i> No dashboards marked as favorites
-              </td>
-            </tr>
-          </table>
-        </div>
-        <div class="editor-option">
-          <div class="span4">
-            <span><i class="icon-question-sign"></i>
-              Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
-              To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite
-              <br/><br/>
-            </span>
-          </div>
-        </div>
-        <div class="editor-option">
-          <label>
-            Timespan between change
-          </label>
-          <input type="text" class="input-small" ng-model="timespan" />
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button class="btn btn-success" ng-click="start();dismiss();"><i class="icon-play"></i> Start</button>
-      <button type="button" class="btn btn-primary" ng-click="dismiss();"><i class="icon-ban-circle"></i> Cancel</button>
-    </div>
-  </div>
-</div>
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="icon icon-play"></i>
+			Start dashboard playlist
+		</div>
+	</div>
+
+	<div class="dashboard-editor-body">
+
+		<div class="editor-row">
+			<div class="section">
+				<div class="editor-option">
+					<table class="table table-striped span4">
+						<tr>
+							<th>Dashboard</th>
+							<th>Include</th>
+							<th style="white-space: nowrap;">Remove as favorite</th>
+						</tr>
+						<tr ng-repeat="dashboard in favDashboards">
+							<td style="white-space: nowrap;">
+								{{dashboard.title}}
+							</td>
+							<td style="text-align: center">
+								<input type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
+							</td>
+							<td style="text-align: center">
+								<i class="icon-remove pointer" ng-click="removeAsFavorite(dashboard)"></i>
+							</td>
+						</tr>
+						<tr ng-hide="favDashboards.length">
+							<td colspan="3">
+								<i class="icon-warning"></i> No dashboards marked as favorites
+							</td>
+						</tr>
+					</table>
+				</div>
+				<div class="editor-option">
+					<div class="span4">
+						<span><i class="icon-question-sign"></i>
+							Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
+							To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite
+							<br/><br/>
+						</span>
+					</div>
+				</div>
+				<div class="editor-option">
+					<label>
+						Timespan between change
+					</label>
+					<input type="text" class="input-small" ng-model="timespan" />
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="dashboard-editor-footer">
+		<button class="btn btn-success" ng-click="start();dismiss();"><i class="icon-play"></i> Start</button>
+		<button type="button" class="btn btn-success pull-right" ng-click="dismiss();"><i class="icon-ban-circle"></i> Close</button>
+	</div>
+</div>

src/app/partials/search.html

@@ -20,7 +20,7 @@
     <li ng-if="!showImport">
       <div class="grafana-search-panel">
         <div class="search-field-wrapper">
-          <button class="btn btn-success pull-right" config-modal="app/partials/playlist.html">
+          <button class="btn btn-success pull-right" dash-editor-link="app/partials/playlist.html">
             <i class="icon-play"></i>
             Playlist
           </button>

src/css/less/bootswatch.dark.less

@@ -363,7 +363,7 @@ div.subnav {
 	background-image: none;
 	.box-shadow(none);
 	border: none;
-	.border-radius(0);
+	.border-radius(2px);
 	text-shadow: none;
 
 	&.disabled {

src/css/less/grafana.less

@@ -41,7 +41,7 @@
       width: 100%;
     }
     button {
-      margin: 0 2px 0 0;
+      margin: 0 4px 0 0;
     }
     > span {
       display: block;
@@ -104,7 +104,7 @@
 .search-tagview-switch {
   position: absolute;
   top: 15px;
-  right: 266px;
+  right: 272px;
   color: darken(@linkColor, 30%);
   &.active {
     color: @linkColor;