OLD | NEW |
1 part of widgets; | 1 part of widgets; |
2 | 2 |
3 class MenuItem extends Component { | 3 class MenuItem extends ButtonBase { |
4 | 4 |
5 static Style _style = new Style(''' | 5 static Style _style = new Style(''' |
| 6 transform: translateX(0); |
6 display: flex; | 7 display: flex; |
7 align-items: center; | 8 align-items: center; |
8 height: 48px; | 9 height: 48px; |
9 -webkit-user-select: none;''' | 10 -webkit-user-select: none;''' |
10 ); | 11 ); |
11 | 12 |
| 13 static Style _highlightStyle = new Style(''' |
| 14 transform: translateX(0); |
| 15 display: flex; |
| 16 align-items: center; |
| 17 height: 48px; |
| 18 background: rgba(153, 153, 153, 0.4); |
| 19 -webkit-user-select: none;''' |
| 20 ); |
| 21 |
12 static Style _iconStyle = new Style(''' | 22 static Style _iconStyle = new Style(''' |
13 padding: 0px 16px;''' | 23 padding: 0px 16px;''' |
14 ); | 24 ); |
15 | 25 |
16 static Style _labelStyle = new Style(''' | 26 static Style _labelStyle = new Style(''' |
17 font-family: 'Roboto Medium', 'Helvetica'; | 27 font-family: 'Roboto Medium', 'Helvetica'; |
18 color: #212121; | 28 color: #212121; |
19 padding: 0px 16px; | 29 padding: 0px 16px; |
20 flex: 1;''' | 30 flex: 1;''' |
21 ); | 31 ); |
22 | 32 |
23 List<Node> children; | 33 List<Node> children; |
24 String icon; | 34 String icon; |
25 | 35 |
26 MenuItem({ Object key, this.icon, this.children }) : super(key: key) { | 36 sky.EventListener onClick; |
| 37 |
| 38 MenuItem({ Object key, this.icon, this.children, this.onClick }) : super(key:
key) { |
27 } | 39 } |
28 | 40 |
29 Node render() { | 41 Node render() { |
30 return new Container( | 42 return new Container( |
31 style: _style, | 43 style: _highlight ? _highlightStyle : _style, |
| 44 onClick: onClick, |
| 45 onPointerDown: _handlePointerDown, |
| 46 onPointerUp: _handlePointerUp, |
| 47 onPointerCancel: _handlePointerCancel, |
32 children: [ | 48 children: [ |
| 49 super.render(), |
33 new Icon( | 50 new Icon( |
34 style: _iconStyle, | 51 style: _iconStyle, |
35 size: 24, | 52 size: 24, |
36 type: "${icon}_grey600" | 53 type: "${icon}_grey600" |
37 ), | 54 ), |
38 new Container( | 55 new Container( |
39 style: _labelStyle, | 56 style: _labelStyle, |
40 children: children | 57 children: children |
41 ) | 58 ) |
42 ] | 59 ] |
43 ); | 60 ); |
44 } | 61 } |
45 } | 62 } |
OLD | NEW |