Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(430)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: dashboard/dashboard/elements/autocomplete-box.html

Issue 1930563002: [Polymer10] Migrate autocomplete-box.html to Polymer 1.0. (Closed) Base URL: https://github.com/catapult-project/catapult.git@polymer10-migration
Patch Set: Fixes. Created 4 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright 2016 The Chromium Authors. All rights reserved. 3 Copyright 2016 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 The 'autocomplete-box' is a input box with autocomplete drop-down menu. 8 The 'autocomplete-box' is a input box with autocomplete drop-down menu.
9 The drop-down menu has support for multi-select, grouping, and tag name. 9 The drop-down menu has support for multi-select, grouping, and tag name.
10 10
(...skipping 25 matching lines...) Expand all
36 property 'head' sets to true and the following group items to have 36 property 'head' sets to true and the following group items to have
37 property 'group' sets to the header item name. 37 property 'group' sets to the header item name.
38 38
39 [ 39 [
40 {name: 'Outdoor', head: true}, 40 {name: 'Outdoor', head: true},
41 {name: 'Skydiving', tag: '1 spot left', group: 'Outdoor'}, 41 {name: 'Skydiving', tag: '1 spot left', group: 'Outdoor'},
42 ... 42 ...
43 ] 43 ]
44 --> 44 -->
45 45
46 <link rel="import" href="/components/core-icon-button/core-icon-button.html"> 46 <link rel="import" href="/components/iron-flex-layout/iron-flex-layout.html">
47 <link rel="import" href="/components/core-item/core-item.html">
48 <link rel="import" href="/components/core-menu/core-menu.html">
49 <link rel="import" href="/components/paper-input/paper-input-decorator.html"> 47 <link rel="import" href="/components/paper-input/paper-input-decorator.html">
50 <link rel="import" href="/components/paper-shadow/paper-shadow.html"> 48 <link rel="import" href="/components/paper-item/paper-item.html">
49 <link rel="import" href="/components/paper-material/paper-material.html">
50 <link rel="import" href="/components/paper-menu/paper-menu.html">
51 51
52 <link rel="import" href="/dashboard/static/autocomplete.html"> 52 <link rel="import" href="/dashboard/static/autocomplete.html">
53 53
54 <polymer-element name="autocomplete-box" 54 <dom-module id="autocomplete-box">
55 attributes="placeholder dataList disabled multi value">
56 <template> 55 <template>
57 <style> 56 <style>
58 #container * { 57 #container * {
59 margin-right: 3px; 58 margin-right: 3px;
60 } 59 }
61 60
62 #dropdown-container { 61 #dropdown-container {
63 position: absolute; 62 position: absolute;
64 background-color: white; 63 background-color: white;
65 box-sizing: border-box; 64 box-sizing: border-box;
66 border-radius: 2px; 65 border-radius: 2px;
67 z-index: 9999; 66 z-index: 9999;
68 } 67 }
69 68
70 .dropdown-scroller { 69 .dropdown-scroller {
71 overflow-y: auto; 70 overflow-y: auto;
72 overflow-x: hidden; 71 overflow-x: hidden;
73 max-height: 300px; 72 max-height: 300px;
74 padding-right: 8px; 73 padding-right: 8px;
75 } 74 }
76 75
77 #dropdown > core-item { 76 #dropdown > paper-item {
78 min-height: 25px; 77 min-height: 25px;
79 color: #616161; 78 color: #616161;
80 text-indent: 10px; 79 text-indent: 10px;
81 } 80 }
82 81
83 #dropdown > core-item[head] { 82 #dropdown > paper-item[head] {
84 color: darkblue; 83 color: darkblue;
85 text-indent: 0; 84 text-indent: 0;
86 } 85 }
87 86
88 #size-check { 87 #size-check {
89 display: inline-block; 88 display: inline-block;
90 position: absolute; 89 position: absolute;
91 visibility: hidden; 90 visibility: hidden;
92 } 91 }
93 92
94 .tag { 93 .tag {
95 color: gray; 94 color: gray;
96 font-size: 90%; 95 font-size: 90%;
97 padding-left: 5px; 96 padding-left: 5px;
98 margin-left: auto;
99 margin-right: auto;
100 text-align: right;
101 } 97 }
102 </style> 98 </style>
103 99
104 <div id="container"> 100 <div id="container">
105 101
106 <paper-input-decorator label="{{placeholder}}" floatinglabel="" layout v ertical 102 <paper-input-decorator label="{{placeholder}}" floatinglabel="" class="l ayout vertical"
107 id="textbox-container"> 103 id="textbox-container">
108 <input is="core-input" 104 <input is="paper-input"
109 on-click="{{showHideDropdown}}" 105 on-click="showHideDropdown"
110 on-keyup="{{onTextboxKeyup}}" 106 on-keyup="onTextboxKeyup"
111 on-keydown="{{onTextboxKeydown}}" 107 on-keydown="onTextboxKeydown"
112 placeholder="{{placeholder}}" 108 placeholder="{{placeholder}}"
113 disabled?="{{disabled}}" 109 disabled$="{{disabled}}"
114 id="textbox" 110 id="textbox"
115 value="{{value}}"> 111 value="{{value::input}}">
116 </paper-input-decorator> 112 </paper-input-decorator>
117 113
118 <paper-shadow id="dropdown-container" hidden="true"> 114 <paper-material id="dropdown-container" hidden>
119 <div class="dropdown-scroller" layered> 115 <div class="dropdown-scroller" layered>
120 <core-menu id="dropdown" 116 <paper-menu id="dropdown"
121 on-core-activate="{{onDropdownSelect}}" 117 on-core-activate="onDropdownSelect"
122 multi?="{{multi}}"> 118 multi$="{{multi}}">
123 <template repeat="{{dataList}}"> 119 <template is="dom-repeat" items="{{dataList}}">
124 <core-item label="{{name}}" head?="{{head}}" 120 <paper-item head$="{{item.head}}"
125 hidden?="{{hidden}}"> 121 hidden$="{{hidden}}"
126 <div class="{{{tag: tag} | tokenList}}">{{tag}}</div> 122 class="layout horizontal">
127 </core-item> 123 <div class="flex">{{item.name}}</div>
124 <div class="tag">{{item.tag}}</div>
125 </paper-item>
128 </template> 126 </template>
129 </core-menu> 127 </paper-menu>
130 </div> 128 </div>
131 </paper-shadow> 129 </paper-material>
132 </div> 130 </div>
133 <span id="size-check">{{value}}</span> 131 <span id="size-check">{{value}}</span>
134 132
135 </template> 133 </template>
136 <script> 134 <script>
137 'use strict'; 135 'use strict';
138 Polymer('autocomplete-box', { 136 Polymer({
139 137 id: 'autocomplete-box',
140 TEXTBOX_MIN_WIDTH: 152, 138 properties: {
139 TEXTBOX_MIN_WIDTH: {
140 type: Number,
141 value: 152
142 }
143 dataList: { notify: true },
144 disabled: { notify: true },
145 multi: { notify: true },
146 placeholder: { notify: true },
147 value: {
148 notify: true,
149 observer: 'valueChanged'
150 }
151 },
141 152
142 ready: function() { 153 ready: function() {
143 this.value = ''; 154 this.value = '';
144 this.$.dropdown.selected = []; 155 this.$.dropdown.selected = [];
145 this.selectedItems = []; 156 this.selectedItems = [];
146 this.hasVisibleItems = true; 157 this.hasVisibleItems = true;
147 this.initAutocomplete(); 158 this.initAutocomplete();
148 }, 159 },
149 160
150 /** 161 /**
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
207 this.hideDropdown(); 218 this.hideDropdown();
208 } 219 }
209 }, 220 },
210 221
211 /** 222 /**
212 * Handles item selected on drop-down menu. 223 * Handles item selected on drop-down menu.
213 */ 224 */
214 onDropdownSelect: function(event, detail, sender) { 225 onDropdownSelect: function(event, detail, sender) {
215 this.$.textbox.focus(); 226 this.$.textbox.focus();
216 var item = detail.item.templateInstance.model; 227 var item = detail.item.templateInstance.model;
217 var isSelected = detail.item.classList.contains('core-selected'); 228 var isSelected = Polymer.dom(
229 detail.item).classList.contains('core-selected');
218 if (this.multi) { 230 if (this.multi) {
219 if (item.head) { 231 if (item.head) {
220 this.onHeadItemSelected(item.name, isSelected); 232 this.onHeadItemSelected(item.name, isSelected);
221 } else { 233 } else {
222 this.onItemSelected(item.name, isSelected); 234 this.onItemSelected(item.name, isSelected);
223 } 235 }
224 } 236 }
225 this.setItemSelection(item, isSelected); 237 this.setItemSelection(item, isSelected);
226 this.value = this.getSelectedValues().join(','); 238 this.value = this.getSelectedValues().join(',');
227 this.fire('dropdownselect'); 239 this.fire('dropdownselect');
(...skipping 222 matching lines...) Expand 10 before | Expand all | Expand 10 after
450 this.$.textbox.style.width = this.TEXTBOX_MIN_WIDTH; 462 this.$.textbox.style.width = this.TEXTBOX_MIN_WIDTH;
451 return; 463 return;
452 } 464 }
453 // A hack for auto-resizing input box. 465 // A hack for auto-resizing input box.
454 this.$['size-check'].innerHTML = values[0]; 466 this.$['size-check'].innerHTML = values[0];
455 var newWidth = this.$['size-check'].offsetWidth + 5; 467 var newWidth = this.$['size-check'].offsetWidth + 5;
456 this.$.textbox.style.width = ((newWidth > this.TEXTBOX_MIN_WIDTH) ? 468 this.$.textbox.style.width = ((newWidth > this.TEXTBOX_MIN_WIDTH) ?
457 newWidth : this.TEXTBOX_MIN_WIDTH); 469 newWidth : this.TEXTBOX_MIN_WIDTH);
458 }, 470 },
459 471
460 valueChanged: function(oldValue, newValue) { 472 valueChanged: function(newValue, oldValue) {
461 // Ignore empty changes. 473 // Ignore empty changes.
462 if (!oldValue && !newValue) { 474 if (!oldValue && !newValue) {
463 return; 475 return;
464 } 476 }
465 this.updateTextboxSize(); 477 this.updateTextboxSize();
466 }, 478 },
467 479
468 showHideDropdown: function(event) { 480 showHideDropdown: function(event) {
469 if (this.dataList.length > 0 && this.hasVisibleItems) { 481 if (this.dataList.length > 0 && this.hasVisibleItems) {
470 this.showDropdown(); 482 this.showDropdown();
(...skipping 12 matching lines...) Expand all
483 document.addEventListener('click', this.hideDropdown.bind(this), true); 495 document.addEventListener('click', this.hideDropdown.bind(this), true);
484 }, 496 },
485 497
486 hideDropdown: function() { 498 hideDropdown: function() {
487 this.$['dropdown-container'].hidden = true; 499 this.$['dropdown-container'].hidden = true;
488 document.removeEventListener( 500 document.removeEventListener(
489 'click', this.hideDropdown.bind(this), true); 501 'click', this.hideDropdown.bind(this), true);
490 } 502 }
491 }); 503 });
492 </script> 504 </script>
493 </polymer-element> 505 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698