From 249bb59f25c04b1ce1a3d041f182509c8e3da56d Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Thu, 29 Jan 2015 11:21:39 -0800
Subject: [PATCH] This CL adds an "appish" example to the Sky examples,
 including a drawer widget.

R=eseidel@chromium.org, esprehn@chromium.org

Review URL: https://codereview.chromium.org/886723002
---
 examples/appish.sky           | 26 ++++++++++++
 examples/example-scaffold.sky | 79 +++++++++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 examples/appish.sky
 create mode 100644 examples/example-scaffold.sky

diff --git a/examples/appish.sky b/examples/appish.sky
new file mode 100644
index 0000000000..e2c1d77774
--- /dev/null
+++ b/examples/appish.sky
@@ -0,0 +1,26 @@
+#!mojo mojo:sky_viewer
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<sky>
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="example-scaffold.sky" />
+
+<sky-element name="example-app">
+<template>
+  <example-scaffold>
+    <div class="title">Awesome app</div>
+    <div class="menu">This is a menu</div>
+    <div class="body">This is an awesome app.</div>
+  </example-scrollable>
+</template>
+<script>
+module.exports = class extends SkyElement {
+}.register();
+</script>
+</sky-element>
+
+<example-app />
+</sky>
diff --git a/examples/example-scaffold.sky b/examples/example-scaffold.sky
new file mode 100644
index 0000000000..553d1c7e01
--- /dev/null
+++ b/examples/example-scaffold.sky
@@ -0,0 +1,79 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-drawer.sky" />
+<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
+<import src="/sky/framework/sky-scrollable.sky" />
+
+<sky-element name="example-scaffold">
+<template>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: -webkit-fill-available;
+    }
+    sky-drawer {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+    sky-toolbar {
+      display: flex;
+      align-items: center;
+      background-color: #526E9C;
+      color: white;
+      height: 56px;
+    }
+    #menu {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      padding: 7px;
+      margin: 0 8px;
+      background-color: papayawhip;
+      color: black;
+    }
+    #title {
+      flex: 1;
+      margin: 0 8px;
+    }
+    sky-scrollable {
+      flex: 1;
+      background-color: green;
+    }
+  </style>
+  <sky-drawer id="drawer">
+    <content select=".menu"/>
+  </sky-drawer>
+  <sky-toolbar>
+    <div id="menu" on-click="handleMenuClick"/>
+    <content id="title" select=".title"/>
+  </sky-toolbar>
+  <sky-scrollable>
+    <content />
+  </sky-scrollable>
+</template>
+<script>
+module.exports = class extends SkyElement {
+  created() {
+    this.toolbar_ = null;
+  }
+
+  shadowRootReady() {
+    this.toolbar_ = this.shadowRoot.getElementById('drawer');
+  }
+
+  handleMenuClick() {
+    this.toolbar_.toggle();
+  }
+}.register();
+</script>
+</sky-element>