Skip to content

F
Front-End
Commit fe9b9d21 authored by Elliott Sprehn's avatar Elliott Sprehn
Browse files
Options

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
parent 3d06e2a4
Hide whitespace changes
Inline Side-by-side
Showing with 419 additions and 2 deletions
examples/flights-app/app-header.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-menu-button.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-panel-content.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-panel-header.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-panel.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-scrollable.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-search-input.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-title.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-toast.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/app-toolbar.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/flights-app.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights-app/index.sky 0 → 100644
View file @ fe9b9d21
<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>
examples/flights/images/magnifying-glass.png 0 → 100644
View file @ fe9b9d21
This diff was suppressed by a .gitattributes entry.
examples/flights/index.sky
View file @ fe9b9d21
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab