OLD | NEW |
| (Empty) |
1 <!-- | |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | |
3 // Use of this source code is governed by a BSD-style license that can be | |
4 // found in the LICENSE file. | |
5 --> | |
6 <import src="sky-element.sky" /> | |
7 <import src="material-element.sky" /> | |
8 <import src="sky-icon.sky" /> | |
9 | |
10 <sky-element attributes="icon:string"> | |
11 <template> | |
12 <style> | |
13 :host { | |
14 display: flex; | |
15 align-items: center; | |
16 height: 48px; | |
17 -webkit-user-select: none; | |
18 } | |
19 #background { | |
20 display: flex; | |
21 align-items: center; | |
22 height: 100%; | |
23 flex: 1; | |
24 } | |
25 #background[highlight] { | |
26 background: rgba(153, 153, 153, 0.4); | |
27 } | |
28 sky-icon { | |
29 padding: 0px 16px; | |
30 } | |
31 #label { | |
32 font-family: 'Roboto Medium', 'Helvetica'; | |
33 color: #212121; | |
34 padding: 0px 16px; | |
35 flex: 1; | |
36 } | |
37 </style> | |
38 <div id="background"> | |
39 <sky-icon size="24" /> | |
40 <div id="label"> | |
41 <content /> | |
42 </div> | |
43 </div> | |
44 </template> | |
45 <script> | |
46 import "dart:sky"; | |
47 | |
48 @Tagname('sky-menu-item') | |
49 class SkyMenuItem extends MaterialElement { | |
50 SkyIcon _icon; | |
51 Element _label; | |
52 | |
53 SkyMenuItem() { | |
54 addEventListener('pointerdown', _handlePointerDown); | |
55 addEventListener('pointerup', _handlePointerUp); | |
56 addEventListener('pointercancel', _handlePointerUp); | |
57 } | |
58 | |
59 void shadowRootReady() { | |
60 _icon = shadowRoot.querySelector('sky-icon'); | |
61 _icon.type = "${icon}_grey600"; | |
62 } | |
63 | |
64 void iconChanged(String oldValue, String newValue) { | |
65 if (_icon != null) | |
66 _icon.type = "${newValue}_grey600"; | |
67 } | |
68 | |
69 void _handlePointerDown(Event event) { | |
70 shadowRoot.getElementById('background').setAttribute('highlight', ''); | |
71 } | |
72 | |
73 void _handlePointerUp(Event event) { | |
74 shadowRoot.getElementById('background').removeAttribute('highlight'); | |
75 } | |
76 } | |
77 | |
78 _init(script) => register(script, SkyMenuItem); | |
79 </script> | |
80 </sky-element> | |
OLD | NEW |