OLD | NEW |
1 part of widgets; | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 import '../fn.dart'; |
| 6 import 'button_base.dart'; |
| 7 |
| 8 typedef void ValueChanged(value); |
2 | 9 |
3 class Checkbox extends ButtonBase { | 10 class Checkbox extends ButtonBase { |
4 | 11 static final Style _style = new Style(''' |
5 bool checked; | |
6 ValueChanged onChanged; | |
7 | |
8 static Style _style = new Style(''' | |
9 transform: translateX(0); | 12 transform: translateX(0); |
10 display: flex; | 13 display: flex; |
11 justify-content: center; | 14 justify-content: center; |
12 align-items: center; | 15 align-items: center; |
13 -webkit-user-select: none; | 16 -webkit-user-select: none; |
14 cursor: pointer; | 17 cursor: pointer; |
15 width: 30px; | 18 width: 30px; |
16 height: 30px;''' | 19 height: 30px;''' |
17 ); | 20 ); |
18 | 21 |
19 static Style _containerStyle = new Style(''' | 22 static final Style _containerStyle = new Style(''' |
20 border: solid 2px; | 23 border: solid 2px; |
21 border-color: rgba(90, 90, 90, 0.25); | 24 border-color: rgba(90, 90, 90, 0.25); |
22 width: 10px; | 25 width: 10px; |
23 height: 10px;''' | 26 height: 10px;''' |
24 ); | 27 ); |
25 | 28 |
26 static Style _containerHighlightStyle = new Style(''' | 29 static final Style _containerHighlightStyle = new Style(''' |
27 border: solid 2px; | 30 border: solid 2px; |
28 border-color: rgba(90, 90, 90, 0.25); | 31 border-color: rgba(90, 90, 90, 0.25); |
29 width: 10px; | 32 width: 10px; |
30 height: 10px; | 33 height: 10px; |
31 border-radius: 10px; | 34 border-radius: 10px; |
32 background-color: orange; | 35 background-color: orange; |
33 border-color: orange;''' | 36 border-color: orange;''' |
34 ); | 37 ); |
35 | 38 |
36 static Style _uncheckedStyle = new Style(''' | 39 static final Style _uncheckedStyle = new Style(''' |
37 top: 0px; | 40 top: 0px; |
38 left: 0px;''' | 41 left: 0px;''' |
39 ); | 42 ); |
40 | 43 |
41 static Style _checkedStyle = new Style(''' | 44 static final Style _checkedStyle = new Style(''' |
42 top: 0px; | 45 top: 0px; |
43 left: 0px; | 46 left: 0px; |
44 transform: translate(2px, -15px) rotate(45deg); | 47 transform: translate(2px, -15px) rotate(45deg); |
45 width: 10px; | 48 width: 10px; |
46 height: 20px; | 49 height: 20px; |
47 border-style: solid; | 50 border-style: solid; |
48 border-top: none; | 51 border-top: none; |
49 border-left: none; | 52 border-left: none; |
50 border-right-width: 2px; | 53 border-right-width: 2px; |
51 border-bottom-width: 2px; | 54 border-bottom-width: 2px; |
52 border-color: #0f9d58;''' | 55 border-color: #0f9d58;''' |
53 ); | 56 ); |
54 | 57 |
55 Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key); | 58 bool checked; |
| 59 ValueChanged onChanged; |
| 60 |
| 61 Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key) { |
| 62 events.listen('click', _handleClick); |
| 63 } |
| 64 |
| 65 void _handleClick(sky.Event e) { |
| 66 onChanged(!checked); |
| 67 } |
56 | 68 |
57 Node build() { | 69 Node build() { |
58 return new Container( | 70 return new Container( |
59 style: _style, | 71 style: _style, |
60 children: [ | 72 children: [ |
61 super.build(), | 73 super.build(), |
62 new Container( | 74 new Container( |
63 style: _highlight ? _containerHighlightStyle : _containerStyle, | 75 style: highlight ? _containerHighlightStyle : _containerStyle, |
64 children: [ | 76 children: [ |
65 new Container( | 77 new Container( |
66 style: checked ? _checkedStyle : _uncheckedStyle | 78 style: checked ? _checkedStyle : _uncheckedStyle |
67 ) | 79 ) |
68 ] | 80 ] |
69 ) | 81 ) |
70 ] | 82 ] |
71 )..events.listen('click', _handleClick); | 83 ) |
72 } | |
73 | |
74 void _handleClick(sky.Event e) { | |
75 onChanged(!checked); | |
76 } | 84 } |
77 } | 85 } |
OLD | NEW |