Migrate panels to app elements

panels/dev-template/ha-panel-dev-template.html

@@ -4,23 +4,29 @@
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
-<link rel="import" href="../../src/layouts/partial-base.html">
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
+<link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
+<link rel="import" href="../../src/resources/home-assistant-style.html">
 
 <dom-module id="ha-panel-dev-template">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
+    <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
     <style>
-      .content {
-        @apply(--paper-font-body1);
-        margin-top: 64px;
-        padding: 16px;
+      :host {
         background-color: white;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
 
+      .content {
+        padding: 24px;
+      }
+
       .edit-pane {
         margin-right: 16px;
       }
@@ -55,8 +61,13 @@
       }
     </style>
 
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
-      <span header-title>Template Editor</span>
+    <app-header-layout has-scrolling-region>
+      <app-header fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Templates</div>
+        </app-toolbar>
+      </app-header>
 
       <div class$='[[computeFormClasses(narrow)]]'>
         <div class='edit-pane'>
@@ -75,7 +86,7 @@
           <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
         </div>
       </div>
-    </partial-base>
+    </app-header-layout>
   </template>
 </dom-module>