Add a version of flights that's made of components.

sky/examples/flights-app/flights-app.sky

Index: sky/examples/flights-app/flights-app.sky
diff --git a/sky/examples/flights/index.sky b/sky/examples/flights-app/flights-app.sky
similarity index 56%
copy from sky/examples/flights/index.sky
copy to sky/examples/flights-app/flights-app.sky
index 22d468589537cf9e5a32dab65bcc6f74fbc1443c..ccb24ff6fe1ea3ee711168adfecb5883c9dddf40 100644
--- a/sky/examples/flights/index.sky
+++ b/sky/examples/flights-app/flights-app.sky
@@ -1,4 +1,16 @@
-<app>
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="app-header.sky" />
+<import src="app-title.sky" />
+<import src="app-menu-button.sky" />
+<import src="app-panel.sky" />
+<import src="app-panel-header.sky" />
+<import src="app-panel-content.sky" />
+<import src="app-toolbar.sky" />
+<import src="app-search-input.sky" />
+<import src="app-scrollable.sky" />
+<import src="app-toast.sky" />
+
+<template>
   <style>
     * { box-sizing: border-box; }
 
@@ -6,107 +18,17 @@
       display: inline;
     }
 
-    app {
+    :host {
       display: flex;
       flex-direction: column;
       height: 100%;
       background-color: #494949;
-      font-family: "Helvetica Neue", sans-serif;
+      font-family: "Helvetica", sans-serif;
       font-size: 16px;
       color: #2B2B2B;
     }
 
-    app-header {
-      display: flex;
-      background: linear-gradient(#3E77B7, #6C98C4);
-      padding: 8px;
-      color: white;
-      border-bottom: 1px solid #3E77B7;
-    }
-
-    app-title {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      font-size: 22px;
-      margin-left: 8px;
-    }
-
-    app-menu-button {
-      display: flex;
-      border-radius: 4px;
-      justify-content: center;
-      align-items: center;
-      width: 30px;
-      height: 30px;
-    }
-
-    .menu-icon {
-      width: 18px;
-    }
-
-    .menu-icon-inner {
-      width: 14px;
-    }
-
-    app-scrollable {
-      flex: 1;
-      box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
-      overflow: scroll;
-    }
-
-    app-panel {
-      display: flex;
-      flex-direction: column;
-      background-color: white;
-    }
-
-    app-panel-header {
-      background-color: #DEDEDE;
-      padding: 8px;
-      display: flex;
-      align-items: center;
-    }
-
-    app-panel-content {
-      display: flex;
-    }
-
-    app-toolbar {
-      background-color: #F6F6F6;
-      padding: 0 8px;
-    }
-
-    app-search-input {
-      background-color: #F6F6F6;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      font-size: 1.2em;
-    }
-
-    app-toast {
-      position: absolute;
-      bottom: 32px;
-      right: 32px;
-      max-width: 55%;
-      box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
-      background-color: #b0281a;
-      background-image: linear-gradient(#E5D658, #DFCF43);
-      border: 1px solid #AEA477;
-      padding: 6px;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      font-size: 0.8em;
-    }
-
-    app-toast-header {
-      flex-shrink: 0;
-      margin-right: 6px;
-    }
-
-    .tip-icon {
+    .toast-icon {
       font-weight: bold;
       font-size: 24px;
       border-radius: 16px;
@@ -121,10 +43,6 @@
       font-weight: bold;
     }
 
-    .input-text {
-      margin-left: 8px;
-    }
-
     .route-result {
       margin: 16px 16px 0 16px;
     }
@@ -167,14 +85,11 @@
       <t>Search</t>
     </app-title>
     <app-menu-button>
-      <img src="images/menu-white.png" class="menu-icon">
+      <img src="/sky/examples/flights/images/menu-white.png" style="width: 18px" />
     </app-menu-button>
   </app-header>
   <app-toolbar>
-    <app-search-input>
-      <span class="input-icon"><t>&#128270;</t></span>
-      <span class="input-text"><t>flights today to dc by price</t></span>
-    </app-search-input>
+    <app-search-input />
   </app-toolbar>
   <app-scrollable>
     <app-panel class="route-result">
@@ -183,12 +98,12 @@
           <t>SFO to DCA</t>
         </div>
         <app-menu-button>
-          <img src="images/menu-enabled.png" class="menu-icon-inner">
+          <img src="/sky/examples/flights/images/menu-enabled.png" style="width: 14px" />
         </app-menu-button>
       </app-panel-header>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/virgin-america.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg" />
         </div>
         <div class="airline-name">
           <t>Virgin America</t>
@@ -199,7 +114,7 @@
       </app-panel-content>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/ba.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/ba.jpg" />
         </div>
         <div class="airline-name">
           <t>British Airways</t>
@@ -210,7 +125,7 @@
       </app-panel-content>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/united.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
         </div>
         <div class="airline-name">
           <t>United</t>
@@ -221,7 +136,7 @@
       </app-panel-content>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/delta.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/delta.jpg" />
         </div>
         <div class="airline-name">
           <t>Delta</t>
@@ -237,12 +152,12 @@
           <t>SJC to DCA</t>
         </div>
         <app-menu-button>
-          <img src="images/menu-enabled.png" class="menu-icon-inner">
+          <img src="/sky/examples/flights/images/menu-enabled.png" style="width: 14px" />
         </app-menu-button>
       </app-panel-header>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/virgin-america.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/virgin-america.jpg" />
         </div>
         <div class="airline-name">
           <t>Virgin America</t>
@@ -253,7 +168,7 @@
       </app-panel-content>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/jetblue.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/jetblue.jpg" />
         </div>
         <div class="airline-name">
           <t>jetBlue</t>
@@ -264,7 +179,7 @@
       </app-panel-content>
       <app-panel-content class="airline">
         <div class="airline-logo">
-          <img class="airline-logo-image" src="images/united.jpg">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
         </div>
         <div class="airline-name">
           <t>United</t>
@@ -276,13 +191,16 @@
     </app-panel>
   </app-scrollable>
   <app-toast>
-    <app-toast-header>
-      <div class="tip-icon">
-        <t>?</t>
-      </div>
-    </app-toast-header>
-    <app-toast-content>
+    <div class="toast-icon">
+      <t>?</t>
+    </div>
+    <div class="toast-content">
       <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
-    </app-toast-content>
+    </div>
   </app-toast>
-</app>
+</template>
+<script>
+SkyElement({
+  name: "flights-app",
+});
+</script>