OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2014 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 | 7 |
8 <link rel="stylesheet" href="/tracing/ui/base/list_view.css"> | |
9 | |
10 <link rel="import" href="/tracing/base/event.html"> | 8 <link rel="import" href="/tracing/base/event.html"> |
11 <link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.
html"> | 9 <link rel="import" href="/tracing/ui/base/container_that_decorates_its_children.
html"> |
12 <link rel="import" href="/tracing/ui/base/ui.html"> | 10 <link rel="import" href="/tracing/ui/base/ui.html"> |
13 <link rel="import" href="/tracing/ui/base/utils.html"> | 11 <link rel="import" href="/tracing/ui/base/utils.html"> |
14 | 12 |
15 <script> | 13 <script> |
16 'use strict'; | 14 'use strict'; |
17 | 15 |
18 /** | 16 /** |
19 * @fileoverview Simple list view. | 17 * @fileoverview Simple list view. |
20 */ | 18 */ |
21 tr.exportTo('tr.ui.b', function() { | 19 tr.exportTo('tr.ui.b', function() { |
22 /** | 20 /** |
23 * @constructor | 21 * @constructor |
24 */ | 22 */ |
25 const ListView = tr.ui.b.define( | 23 const ListView = tr.ui.b.define( |
26 'x-list-view', tr.ui.b.ContainerThatDecoratesItsChildren); | 24 'x-list-view', tr.ui.b.ContainerThatDecoratesItsChildren); |
27 | 25 |
28 ListView.prototype = { | 26 ListView.prototype = { |
29 __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, | 27 __proto__: tr.ui.b.ContainerThatDecoratesItsChildren.prototype, |
30 | 28 |
31 decorate() { | 29 decorate() { |
32 tr.ui.b.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); | 30 tr.ui.b.ContainerThatDecoratesItsChildren.prototype.decorate.call(this); |
33 | 31 |
34 Polymer.dom(this).classList.add('x-list-view'); | 32 Polymer.dom(this).classList.add('x-list-view'); |
| 33 this.style.display = 'block'; |
| 34 this.style.userSelect = 'none'; |
| 35 this.style.outline = 'none'; |
35 this.onItemClicked_ = this.onItemClicked_.bind(this); | 36 this.onItemClicked_ = this.onItemClicked_.bind(this); |
36 this.onKeyDown_ = this.onKeyDown_.bind(this); | 37 this.onKeyDown_ = this.onKeyDown_.bind(this); |
37 this.tabIndex = 0; | 38 this.tabIndex = 0; |
38 this.addEventListener('keydown', this.onKeyDown_); | 39 this.addEventListener('keydown', this.onKeyDown_); |
39 | 40 |
40 this.selectionChanged_ = false; | 41 this.selectionChanged_ = false; |
41 }, | 42 }, |
42 | 43 |
43 decorateChild_(item) { | 44 decorateChild_(item) { |
44 Polymer.dom(item).classList.add('list-item'); | 45 Polymer.dom(item).classList.add('list-item'); |
| 46 item.style.paddingTop = '2px'; |
| 47 item.style.paddingRight = '4px'; |
| 48 item.style.paddingBottom = '2px'; |
| 49 item.style.paddingLeft = '4px'; |
45 item.addEventListener('click', this.onItemClicked_, true); | 50 item.addEventListener('click', this.onItemClicked_, true); |
46 | 51 |
47 Object.defineProperty( | 52 Object.defineProperty( |
48 item, | 53 item, |
49 'selected', { | 54 'selected', { |
50 configurable: true, | 55 configurable: true, |
51 get: () => item.hasAttribute('selected'), | 56 get: () => item.hasAttribute('selected'), |
52 set: value => { | 57 set: value => { |
53 // |this| is the ListView. | 58 // |this| is the ListView. |
54 const oldSelection = this.selectedElement; | 59 const oldSelection = this.selectedElement; |
55 if (oldSelection && oldSelection !== item && value) { | 60 if (oldSelection && oldSelection !== item && value) { |
56 Polymer.dom(this.selectedElement).removeAttribute('selected'); | 61 Polymer.dom(this.selectedElement).removeAttribute('selected'); |
57 } | 62 } |
58 if (value) { | 63 if (value) { |
59 Polymer.dom(item).setAttribute('selected', 'selected'); | 64 Polymer.dom(item).setAttribute('selected', 'selected'); |
| 65 item.style.backgroundColor = 'rgb(171, 217, 202)'; |
| 66 item.style.outline = '1px dotted rgba(0,0,0,0.1)'; |
| 67 item.style.outlineOffset = 0; |
60 } else { | 68 } else { |
61 Polymer.dom(item).removeAttribute('selected'); | 69 Polymer.dom(item).removeAttribute('selected'); |
| 70 item.style.backgroundColor = ''; |
62 } | 71 } |
63 const newSelection = this.selectedElement; | 72 const newSelection = this.selectedElement; |
64 if (newSelection !== oldSelection) { | 73 if (newSelection !== oldSelection) { |
65 tr.b.dispatchSimpleEvent(this, 'selection-changed', false); | 74 tr.b.dispatchSimpleEvent(this, 'selection-changed', false); |
66 } | 75 } |
67 }, | 76 }, |
68 }); | 77 }); |
69 }, | 78 }, |
70 | 79 |
71 undecorateChild_(item) { | 80 undecorateChild_(item) { |
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
154 e.preventDefault(); | 163 e.preventDefault(); |
155 return true; | 164 return true; |
156 } | 165 } |
157 } | 166 } |
158 }, | 167 }, |
159 | 168 |
160 addItem(textContent) { | 169 addItem(textContent) { |
161 const item = document.createElement('div'); | 170 const item = document.createElement('div'); |
162 Polymer.dom(item).textContent = textContent; | 171 Polymer.dom(item).textContent = textContent; |
163 Polymer.dom(this).appendChild(item); | 172 Polymer.dom(this).appendChild(item); |
| 173 item.style.userSelect = 'none'; |
164 return item; | 174 return item; |
165 } | 175 } |
166 | 176 |
167 }; | 177 }; |
168 | 178 |
169 return { | 179 return { |
170 ListView, | 180 ListView, |
171 }; | 181 }; |
172 }); | 182 }); |
173 </script> | 183 </script> |
OLD | NEW |