From fd4e2c76d280be825441ecffdc9b4632bb080725 Mon Sep 17 00:00:00 2001
From: Hixie <github.com@spam.hixie.ch>
Date: Wed, 4 Mar 2015 09:25:31 -0800
Subject: [PATCH] sky-element stocks demo: add splashes and highlights to menu
 items

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/961873004
---
 framework/sky-drawer.sky    |  1 +
 framework/sky-icon.sky      |  4 +++-
 framework/sky-menu-item.sky | 34 ++++++++++++++++++++++++++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/framework/sky-drawer.sky b/framework/sky-drawer.sky
index 2a997dd9f63..542516c957c 100644
--- a/framework/sky-drawer.sky
+++ b/framework/sky-drawer.sky
@@ -23,6 +23,7 @@
       background-color: #FAFAFA;
       will-change: transform;
       position: absolute;
+      z-index: 2;
       width: 256px;
       top: 0;
       left: 0;
diff --git a/framework/sky-icon.sky b/framework/sky-icon.sky
index e526c8ca1df..dd2a10f7f65 100644
--- a/framework/sky-icon.sky
+++ b/framework/sky-icon.sky
@@ -45,8 +45,10 @@ class SkyIcon extends SkyElement {
   }
 
   void sizeChanged(double oldValue, double newValue) {
-    if (_img != null)
+    if (_img != null) {
       _setSize(newValue.floor());
+      _setSrc(type, newValue.floor());
+    }
   }
 }
 
diff --git a/framework/sky-menu-item.sky b/framework/sky-menu-item.sky
index 3313ada2049..02a7c6f61a9 100644
--- a/framework/sky-menu-item.sky
+++ b/framework/sky-menu-item.sky
@@ -4,6 +4,7 @@
 // found in the LICENSE file.
 -->
 <import src="sky-element.sky" />
+<import src="material-element.sky" />
 <import src="sky-icon.sky" />
 
 <sky-element attributes="icon:string">
@@ -15,6 +16,15 @@
       height: 48px;
       -webkit-user-select: none;
     }
+    #background {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      flex: 1;
+    }
+    #background[highlight] {
+      background: rgba(153, 153, 153, 0.4);
+    }
     sky-icon {
       padding: 0px 16px;
     }
@@ -25,19 +35,27 @@
       flex: 1;
     }
   </style>
-  <sky-icon size="24" />
-  <div id="label">
-    <content />
+  <div id="background">
+    <sky-icon size="24" />
+    <div id="label">
+      <content />
+    </div>
   </div>
 </template>
 <script>
 import "dart:sky";
 
 @Tagname('sky-menu-item')
-class SkyMenuItem extends SkyElement {
+class SkyMenuItem extends MaterialElement {
   SkyIcon _icon;
   Element _label;
 
+  SkyMenuItem() {
+    addEventListener('pointerdown', _handlePointerDown);
+    addEventListener('pointerup', _handlePointerUp);
+    addEventListener('pointercancel', _handlePointerUp);
+  }
+
   void shadowRootReady() {
     _icon = shadowRoot.querySelector('sky-icon');
     _icon.type = "${icon}_grey600";
@@ -47,6 +65,14 @@ class SkyMenuItem extends SkyElement {
     if (_icon != null)
       _icon.type = "${newValue}_grey600";
   }
+
+  void _handlePointerDown(Event event) {
+    shadowRoot.getElementById('background').setAttribute('highlight', '');
+  }
+
+  void _handlePointerUp(Event event) {
+    shadowRoot.getElementById('background').removeAttribute('highlight');
+  }
 }
 
 _init(script) => register(script, SkyMenuItem);