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

@@ -23,6 +23,7 @@
       background-color: #FAFAFA;
       will-change: transform;
       position: absolute;
+      z-index: 2;
       width: 256px;
       top: 0;
       left: 0;

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());
+    }
   }
 }
 

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);