OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="sky-button.sky" /> | |
7 <import src="sky-element.sky" /> | 6 <import src="sky-element.sky" /> |
| 7 <import src="sky-icon.sky" /> |
8 | 8 |
9 <sky-element attributes="checked:boolean, highlight:boolean"> | 9 <sky-element attributes="checked:boolean"> |
10 <template> | 10 <template> |
11 <style> | 11 <style> |
12 :host { | 12 :host { |
13 display: flex; | 13 display: inline-block; |
14 justify-content: center; | |
15 align-items: center; | |
16 -webkit-user-select: none; | 14 -webkit-user-select: none; |
17 cursor: pointer; | 15 margin: 8px 16px; |
18 width: 30px; | |
19 height: 30px; | |
20 } | |
21 #container { | |
22 border: solid 2px; | |
23 border-color: rgba(90, 90, 90, 0.25); | |
24 width: 10px; | |
25 height: 10px; | |
26 } | |
27 #container.highlight { | |
28 border-radius: 10px; | |
29 background-color: orange; | |
30 border-color: orange; | |
31 } | |
32 #check { | |
33 top: 0px; | |
34 left: 0px; | |
35 } | |
36 #check.checked { | |
37 transform: translate(2px, -15px) rotate(45deg); | |
38 width: 10px; | |
39 height: 20px; | |
40 border-style: solid; | |
41 border-top: none; | |
42 border-left: none; | |
43 border-right-width: 2px; | |
44 border-bottom-width: 2px; | |
45 border-color: #0f9d58; | |
46 } | 16 } |
47 </style> | 17 </style> |
48 <div id="container"> | 18 <sky-icon size="18" /> |
49 <div id="check" /> | |
50 </div> | |
51 </template> | 19 </template> |
52 <script> | 20 <script> |
53 import "dart:sky"; | 21 import "dart:sky"; |
54 | 22 |
| 23 const String _kOnIcon = 'toggle/check_box_black'; |
| 24 const String _kOffIcon = 'toggle/check_box_outline_blank_black'; |
| 25 |
55 @Tagname('sky-checkbox') | 26 @Tagname('sky-checkbox') |
56 class SkyCheckbox extends SkyButton { | 27 class SkyCheckbox extends SkyElement { |
57 Element _container; | 28 SkyIcon _icon; |
58 Element _check; | |
59 | 29 |
60 SkyCheckbox() { | 30 SkyCheckbox() { |
61 addEventListener('click', _handleClick); | 31 addEventListener('click', _handleClick); |
62 } | 32 } |
63 | 33 |
64 static String _checkClassForValue(bool value) => value ? 'checked' : ''; | |
65 static String _containerClassForValue(bool value) => value ? 'highlight' : ''; | |
66 | |
67 void shadowRootReady() { | 34 void shadowRootReady() { |
68 _container = shadowRoot.getElementById('container'); | 35 _icon = shadowRoot.querySelector('sky-icon'); |
69 _container.setAttribute('class', _containerClassForValue(highlight)); | 36 _icon.type = checked ? _kOnIcon : _kOffIcon; |
70 _check = shadowRoot.getElementById('check'); | |
71 _check.setAttribute('class', _checkClassForValue(checked)); | |
72 } | 37 } |
73 | 38 |
74 void checkedChanged(bool oldValue, bool newValue) { | 39 void checkedChanged(bool oldValue, bool newValue) { |
75 if (_check != null) | 40 if (_icon != null) |
76 _check.setAttribute('class', _checkClassForValue(newValue)); | 41 _icon.type = newValue ? _kOnIcon : _kOffIcon; |
77 } | |
78 | |
79 void highlightChanged(bool oldValue, bool newValue) { | |
80 if (_container != null) | |
81 _container.setAttribute('class', _containerClassForValue(newValue)); | |
82 } | 42 } |
83 | 43 |
84 void _handleClick(_) { | 44 void _handleClick(_) { |
85 checked = !checked; | 45 checked = !checked; |
86 } | 46 } |
87 } | 47 } |
88 | 48 |
89 _init(script) => register(script, SkyCheckbox); | 49 _init(script) => register(script, SkyCheckbox); |
90 </script> | 50 </script> |
91 </sky-element> | 51 </sky-element> |
OLD | NEW |