From fe9b9d21d4407f742097774b32717833a35e8ed1 Mon Sep 17 00:00:00 2001
From: Elliott Sprehn <esprehn@chromium.org>
Date: Fri, 14 Nov 2014 15:00:12 -0800
Subject: [PATCH] Add a version of flights that's made of components.

Also add a test, this checks nested Shadow DOM and <content> with
and without select.

R=ojan@chromium.org

Review URL: https://codereview.chromium.org/725763003
---
 examples/flights-app/app-header.sky          |  18 ++
 examples/flights-app/app-menu-button.sky     |  19 ++
 examples/flights-app/app-panel-content.sky   |  14 ++
 examples/flights-app/app-panel-header.sky    |  17 ++
 examples/flights-app/app-panel.sky           |  16 ++
 examples/flights-app/app-scrollable.sky      |  16 ++
 examples/flights-app/app-search-input.sky    |  25 +++
 examples/flights-app/app-title.sky           |  18 ++
 examples/flights-app/app-toast.sky           |  36 ++++
 examples/flights-app/app-toolbar.sky         |  15 ++
 examples/flights-app/flights-app.sky         | 206 +++++++++++++++++++
 examples/flights-app/index.sky               |  15 ++
 examples/flights/images/magnifying-glass.png | Bin 0 -> 640 bytes
 examples/flights/index.sky                   |   6 +-
 14 files changed, 419 insertions(+), 2 deletions(-)
 create mode 100644 examples/flights-app/app-header.sky
 create mode 100644 examples/flights-app/app-menu-button.sky
 create mode 100644 examples/flights-app/app-panel-content.sky
 create mode 100644 examples/flights-app/app-panel-header.sky
 create mode 100644 examples/flights-app/app-panel.sky
 create mode 100644 examples/flights-app/app-scrollable.sky
 create mode 100644 examples/flights-app/app-search-input.sky
 create mode 100644 examples/flights-app/app-title.sky
 create mode 100644 examples/flights-app/app-toast.sky
 create mode 100644 examples/flights-app/app-toolbar.sky
 create mode 100644 examples/flights-app/flights-app.sky
 create mode 100644 examples/flights-app/index.sky
 create mode 100644 examples/flights/images/magnifying-glass.png

diff --git a/examples/flights-app/app-header.sky b/examples/flights-app/app-header.sky
new file mode 100644
index 0000000000..529c67d98b
--- /dev/null
+++ b/examples/flights-app/app-header.sky
@@ -0,0 +1,18 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      background: linear-gradient(#3E77B7, #6C98C4);
+      padding: 8px;
+      color: white;
+      border-bottom: 1px solid #3E77B7;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-header"
+});
+</script>
diff --git a/examples/flights-app/app-menu-button.sky b/examples/flights-app/app-menu-button.sky
new file mode 100644
index 0000000000..c63c3a4144
--- /dev/null
+++ b/examples/flights-app/app-menu-button.sky
@@ -0,0 +1,19 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      border-radius: 4px;
+      justify-content: center;
+      align-items: center;
+      width: 30px;
+      height: 30px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-menu-button"
+});
+</script>
diff --git a/examples/flights-app/app-panel-content.sky b/examples/flights-app/app-panel-content.sky
new file mode 100644
index 0000000000..9bc9330955
--- /dev/null
+++ b/examples/flights-app/app-panel-content.sky
@@ -0,0 +1,14 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel-content"
+});
+</script>
diff --git a/examples/flights-app/app-panel-header.sky b/examples/flights-app/app-panel-header.sky
new file mode 100644
index 0000000000..11ab221b24
--- /dev/null
+++ b/examples/flights-app/app-panel-header.sky
@@ -0,0 +1,17 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #DEDEDE;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel-header"
+});
+</script>
diff --git a/examples/flights-app/app-panel.sky b/examples/flights-app/app-panel.sky
new file mode 100644
index 0000000000..ed9da6d110
--- /dev/null
+++ b/examples/flights-app/app-panel.sky
@@ -0,0 +1,16 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: white;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-panel"
+});
+</script>
diff --git a/examples/flights-app/app-scrollable.sky b/examples/flights-app/app-scrollable.sky
new file mode 100644
index 0000000000..e9c1840e0f
--- /dev/null
+++ b/examples/flights-app/app-scrollable.sky
@@ -0,0 +1,16 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      flex: 1;
+      box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
+      overflow: scroll;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-scrollable"
+});
+</script>
diff --git a/examples/flights-app/app-search-input.sky b/examples/flights-app/app-search-input.sky
new file mode 100644
index 0000000000..538ea545d3
--- /dev/null
+++ b/examples/flights-app/app-search-input.sky
@@ -0,0 +1,25 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #F6F6F6;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+    }
+
+    .input-text {
+      margin-left: 8px;
+    }
+  </style>
+  <span class="input-icon">
+    <img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
+  </span>
+  <span class="input-text"><t>flights today to dc by price</t></span>
+</template>
+<script>
+SkyElement({
+  name: "app-search-input"
+});
+</script>
diff --git a/examples/flights-app/app-title.sky b/examples/flights-app/app-title.sky
new file mode 100644
index 0000000000..8ad99d17d7
--- /dev/null
+++ b/examples/flights-app/app-title.sky
@@ -0,0 +1,18 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      margin-left: 8px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-title"
+});
+</script>
diff --git a/examples/flights-app/app-toast.sky b/examples/flights-app/app-toast.sky
new file mode 100644
index 0000000000..f04db163b4
--- /dev/null
+++ b/examples/flights-app/app-toast.sky
@@ -0,0 +1,36 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      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;
+    }
+
+    .header {
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
+  </style>
+  <div class="header">
+    <content select=".toast-icon" />
+  </div>
+  <div class="content">
+    <content select=".toast-content" />
+  </div>
+</template>
+<script>
+SkyElement({
+  name: "app-toast"
+});
+</script>
diff --git a/examples/flights-app/app-toolbar.sky b/examples/flights-app/app-toolbar.sky
new file mode 100644
index 0000000000..b996f35103
--- /dev/null
+++ b/examples/flights-app/app-toolbar.sky
@@ -0,0 +1,15 @@
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
+<template>
+  <style>
+    :host {
+      background-color: #F6F6F6;
+      padding: 0 8px;
+    }
+  </style>
+  <content></content>
+</template>
+<script>
+SkyElement({
+  name: "app-toolbar"
+});
+</script>
diff --git a/examples/flights-app/flights-app.sky b/examples/flights-app/flights-app.sky
new file mode 100644
index 0000000000..ccb24ff6fe
--- /dev/null
+++ b/examples/flights-app/flights-app.sky
@@ -0,0 +1,206 @@
+<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; }
+
+    t, span {
+      display: inline;
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background-color: #494949;
+      font-family: "Helvetica", sans-serif;
+      font-size: 16px;
+      color: #2B2B2B;
+    }
+
+    .toast-icon {
+      font-weight: bold;
+      font-size: 24px;
+      border-radius: 16px;
+      width: 32px;
+      height: 32px;
+      border: 2px solid black;
+      line-height: 30px;
+      text-align: center;
+    }
+
+    .tip-price {
+      font-weight: bold;
+    }
+
+    .route-result {
+      margin: 16px 16px 0 16px;
+    }
+
+    .route-title {
+      flex: 1;
+    }
+
+    .airline {
+      border-radius: 2px;
+      align-items: center;
+      padding: 8px;
+    }
+
+    .airline-name {
+      flex: 1;
+    }
+
+    .airline-logo-image {
+      width: 50px;
+      flex-shrink: 0;
+    }
+
+    .airline-best-price {
+      color: #ABB4B6;
+    }
+
+    .airline-name,
+    .airline-best-price {
+      padding: 8px;
+    }
+
+    a {
+      text-decoration: none;
+      color: #1155CC;
+    }
+  </style>
+  <app-header>
+    <app-title>
+      <t>Search</t>
+    </app-title>
+    <app-menu-button>
+      <img src="/sky/examples/flights/images/menu-white.png" style="width: 18px" />
+    </app-menu-button>
+  </app-header>
+  <app-toolbar>
+    <app-search-input />
+  </app-toolbar>
+  <app-scrollable>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SFO to DCA</t>
+        </div>
+        <app-menu-button>
+          <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="/sky/examples/flights/images/virgin-america.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$800</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/ba.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>British Airways</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$700</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$667</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/delta.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Delta</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$450</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+    <app-panel class="route-result">
+      <app-panel-header>
+        <div class="route-title">
+          <t>SJC to DCA</t>
+        </div>
+        <app-menu-button>
+          <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="/sky/examples/flights/images/virgin-america.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>Virgin America</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$1500</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/jetblue.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>jetBlue</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$650</a></t>
+        </div>
+      </app-panel-content>
+      <app-panel-content class="airline">
+        <div class="airline-logo">
+          <img class="airline-logo-image" src="/sky/examples/flights/images/united.jpg" />
+        </div>
+        <div class="airline-name">
+          <t>United</t>
+        </div>
+        <div class="airline-best-price">
+          <t><a>$367</a></t>
+        </div>
+      </app-panel-content>
+    </app-panel>
+  </app-scrollable>
+  <app-toast>
+    <div class="toast-icon">
+      <t>?</t>
+    </div>
+    <div class="toast-content">
+      <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
+    </div>
+  </app-toast>
+</template>
+<script>
+SkyElement({
+  name: "flights-app",
+});
+</script>
diff --git a/examples/flights-app/index.sky b/examples/flights-app/index.sky
new file mode 100644
index 0000000000..7aa09b339f
--- /dev/null
+++ b/examples/flights-app/index.sky
@@ -0,0 +1,15 @@
+<sky>
+  <import src="flights-app.sky" />
+  <style>
+    sky {
+      height: 100%;
+    }
+  </style>
+  <script>
+    // TODO(esprehn): Work around a bug where having <flights-app /> in the
+    // page doesn't render anything until the first input event.
+    addEventListener("load", function() {
+      document.querySelector("sky").appendChild(document.createElement("flights-app"));
+    });
+  </script>
+</sky>
diff --git a/examples/flights/images/magnifying-glass.png b/examples/flights/images/magnifying-glass.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5954604ebf96b2dbc95a7a455c0f20eab7003c4
GIT binary patch
literal 640
zcmV-`0)PF9P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800006VoOIv0RI60
z0RN!9r;`8x0yRlQK~z|U<=4-PO<^3z@t5KHu`r~jX3U__kOd1A#?NA8L9u70W>PXq
zS;<1#OWF7X#FSD-&G@}jHZ~Z8nGC};L_*9j*Wx_ay)Jj=o^!8j;ZslNd+PaozwhTf
z&pFR?D6Bcyj|=F-Fvjs3ooK_N3H*tb!cn|KdXhGRbErvLY)amJ4cf6K+^6vXU3iQ!
z)L|2vF*Edgg?+f66a?m>M|N~quxf(-b8%WUHEDbeP>Gbnt&nI8hhun~Fc`cauq+8c
zo9xJsB=E1sm*Br0*E}0T!F)ME@r+tz2eC7b@jx(*V|fVx)9@tZYL8>Q7)<v{D4x-Y
zkn1C+7h|Zxnh@V81Hkogt;UjK0cu11vJ3$IIr02r0a76zE(5?wPMj*(D-Ymph-)Y6
zSfp}u3>6E|6XNw{0B8!=F+3~QbX>G@KZ|z2Qq&c4-Hl^fjL~2`RYLI%vLB+BxaRZ0
z_)W5@s780l(W}UBK(6ZWCL|cd%9zDFgZDdj$1R@GI?<Mz#wQ%a)JZ%W@ksX3C*BP+
z+JW~u3A=GpG%fX_Gs6nB%5LA8k&lFU0F9+UEXB>7<dd~t?7|+|!^r@)Vy^`2A){to
z61|@JMMrT5hw=*KLS))C%t#6$6lla|Y{y#BajcM9{{Y-kDnuL|`vX8lA?op>0L0Zw
zK{ViL0f;Wl`fng=@$g?mEX4By5FJ$&0O-fI0Fkf03e^9p1%6!<XZ`+f`q$MUIw_sW
a6#oI))5BcC<jnp60000<MNUMnLSTZKkSs<3

literal 0
HcmV?d00001

diff --git a/examples/flights/index.sky b/examples/flights/index.sky
index 22d4685895..b472c9ab87 100644
--- a/examples/flights/index.sky
+++ b/examples/flights/index.sky
@@ -11,7 +11,7 @@
       flex-direction: column;
       height: 100%;
       background-color: #494949;
-      font-family: "Helvetica Neue", sans-serif;
+      font-family: sans-serif;
       font-size: 16px;
       color: #2B2B2B;
     }
@@ -172,7 +172,9 @@
   </app-header>
   <app-toolbar>
     <app-search-input>
-      <span class="input-icon"><t>&#128270;</t></span>
+      <span class="input-icon">
+        <img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
+      </span>
       <span class="input-text"><t>flights today to dc by price</t></span>
     </app-search-input>
   </app-toolbar>