Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview User pod row implementation. | 6 * @fileoverview User pod row implementation. |
| 7 */ | 7 */ |
| 8 | 8 |
| 9 cr.define('login', function() { | 9 cr.define('login', function() { |
| 10 /** | 10 /** |
| (...skipping 182 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 193 {id: 'locked', class: 'custom-icon-locked'}, | 193 {id: 'locked', class: 'custom-icon-locked'}, |
| 194 {id: 'unlocked', class: 'custom-icon-unlocked'}, | 194 {id: 'unlocked', class: 'custom-icon-unlocked'}, |
| 195 {id: 'hardlocked', class: 'custom-icon-hardlocked'}, | 195 {id: 'hardlocked', class: 'custom-icon-hardlocked'}, |
| 196 {id: 'spinner', class: 'custom-icon-spinner'} | 196 {id: 'spinner', class: 'custom-icon-spinner'} |
| 197 ]; | 197 ]; |
| 198 | 198 |
| 199 UserPodCustomIcon.prototype = { | 199 UserPodCustomIcon.prototype = { |
| 200 __proto__: HTMLDivElement.prototype, | 200 __proto__: HTMLDivElement.prototype, |
| 201 | 201 |
| 202 /** | 202 /** |
| 203 * The id of the icon being shown. | |
| 204 * @type {string} | |
| 205 * @private | |
| 206 */ | |
| 207 iconId_: '', | |
| 208 | |
| 209 /** | |
| 203 * Tooltip to be shown when the user hovers over the icon. The icon | 210 * Tooltip to be shown when the user hovers over the icon. The icon |
| 204 * properties may be set so the tooltip is shown automatically when the icon | 211 * properties may be set so the tooltip is shown automatically when the icon |
| 205 * is updated. The tooltip is shown in a bubble attached to the icon | 212 * is updated. The tooltip is shown in a bubble attached to the icon |
| 206 * element. | 213 * element. |
| 207 * @type {string} | 214 * @type {string} |
| 208 * @private | 215 * @private |
| 209 */ | 216 */ |
| 210 tooltip_: '', | 217 tooltip_: '', |
| 211 | 218 |
| 212 /** | 219 /** |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 279 return this.querySelector('.custom-icon'); | 286 return this.querySelector('.custom-icon'); |
| 280 }, | 287 }, |
| 281 | 288 |
| 282 /** | 289 /** |
| 283 * Updates the icon element class list to properly represent the provided | 290 * Updates the icon element class list to properly represent the provided |
| 284 * icon. | 291 * icon. |
| 285 * @param {!string} id The id of the icon that should be shown. Should be | 292 * @param {!string} id The id of the icon that should be shown. Should be |
| 286 * one of the ids listed in {@code UserPodCustomIcon.ICONS}. | 293 * one of the ids listed in {@code UserPodCustomIcon.ICONS}. |
| 287 */ | 294 */ |
| 288 setIcon: function(id) { | 295 setIcon: function(id) { |
| 296 this.iconId_ = id; | |
| 289 UserPodCustomIcon.ICONS.forEach(function(icon) { | 297 UserPodCustomIcon.ICONS.forEach(function(icon) { |
| 290 this.iconElement.classList.toggle(icon.class, id == icon.id); | 298 this.iconElement.classList.toggle(icon.class, id == icon.id); |
| 291 }, this); | 299 }, this); |
| 292 }, | 300 }, |
| 293 | 301 |
| 294 /** | 302 /** |
| 295 * Shows the icon. | 303 * Shows the icon. |
| 296 */ | 304 */ |
| 297 show: function() { | 305 show: function() { |
| 298 this.resetHideTransitionState_(); | 306 this.resetHideTransitionState_(); |
| (...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 465 | 473 |
| 466 // If autoshown bubble got hidden, clear the autoshown flag. | 474 // If autoshown bubble got hidden, clear the autoshown flag. |
| 467 if ($('bubble').hidden && this.tooltipAutoshown_) | 475 if ($('bubble').hidden && this.tooltipAutoshown_) |
| 468 this.tooltipAutoshown_ = false; | 476 this.tooltipAutoshown_ = false; |
| 469 | 477 |
| 470 // Show the tooltip bubble. | 478 // Show the tooltip bubble. |
| 471 var bubbleContent = document.createElement('div'); | 479 var bubbleContent = document.createElement('div'); |
| 472 bubbleContent.textContent = this.tooltip_; | 480 bubbleContent.textContent = this.tooltip_; |
| 473 | 481 |
| 474 /** @const */ var BUBBLE_OFFSET = CUSTOM_ICON_CONTAINER_SIZE / 2; | 482 /** @const */ var BUBBLE_OFFSET = CUSTOM_ICON_CONTAINER_SIZE / 2; |
| 475 /** @const */ var BUBBLE_PADDING = 8; | 483 // TODO(tengs): Introduce a special reauth state for the account picker, |
|
Nikita (slow)
2014/10/27 15:15:10
nit: Makes sense to mention crbug issue # here.
Tim Song
2014/10/31 17:57:37
Done.
| |
| 484 // instead of showing the tooltip bubble here. | |
| 485 /** @const */ var BUBBLE_PADDING = 8 + (this.iconId_ ? 0 : 23); | |
| 476 $('bubble').showContentForElement(this, | 486 $('bubble').showContentForElement(this, |
| 477 cr.ui.Bubble.Attachment.RIGHT, | 487 cr.ui.Bubble.Attachment.RIGHT, |
| 478 bubbleContent, | 488 bubbleContent, |
| 479 BUBBLE_OFFSET, | 489 BUBBLE_OFFSET, |
| 480 BUBBLE_PADDING); | 490 BUBBLE_PADDING); |
| 481 this.ensureTooltipTimeoutCleared_(); | 491 this.ensureTooltipTimeoutCleared_(); |
| 482 this.tooltipActive_ = true; | 492 this.tooltipActive_ = true; |
| 483 }, | 493 }, |
| 484 | 494 |
| 485 /** | 495 /** |
| (...skipping 1764 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 2250 * The icon parameters. | 2260 * The icon parameters. |
| 2251 */ | 2261 */ |
| 2252 showUserPodCustomIcon: function(username, icon) { | 2262 showUserPodCustomIcon: function(username, icon) { |
| 2253 var pod = this.getPodWithUsername_(username); | 2263 var pod = this.getPodWithUsername_(username); |
| 2254 if (pod == null) { | 2264 if (pod == null) { |
| 2255 console.error('Unable to show user pod button for ' + username + | 2265 console.error('Unable to show user pod button for ' + username + |
| 2256 ': user pod not found.'); | 2266 ': user pod not found.'); |
| 2257 return; | 2267 return; |
| 2258 } | 2268 } |
| 2259 | 2269 |
| 2260 if (!icon.id) | 2270 if (!icon.id && !icon.tooltip) |
| 2261 return; | 2271 return; |
| 2262 | 2272 |
| 2263 pod.customIconElement.setIcon(icon.id); | 2273 if (icon.id) |
| 2274 pod.customIconElement.setIcon(icon.id); | |
| 2264 | 2275 |
| 2265 if (icon.hardlockOnClick) { | 2276 if (icon.hardlockOnClick) { |
| 2266 pod.customIconElement.setInteractive( | 2277 pod.customIconElement.setInteractive( |
| 2267 this.hardlockUserPod_.bind(this, username)); | 2278 this.hardlockUserPod_.bind(this, username)); |
| 2268 } else { | 2279 } else { |
| 2269 pod.customIconElement.setInteractive(null); | 2280 pod.customIconElement.setInteractive(null); |
| 2270 } | 2281 } |
| 2271 | 2282 |
| 2272 pod.customIconElement.show(); | 2283 pod.customIconElement.show(); |
| 2273 | 2284 |
| (...skipping 671 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 2945 if (pod && pod.multiProfilesPolicyApplied) { | 2956 if (pod && pod.multiProfilesPolicyApplied) { |
| 2946 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 2957 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
| 2947 } | 2958 } |
| 2948 } | 2959 } |
| 2949 }; | 2960 }; |
| 2950 | 2961 |
| 2951 return { | 2962 return { |
| 2952 PodRow: PodRow | 2963 PodRow: PodRow |
| 2953 }; | 2964 }; |
| 2954 }); | 2965 }); |
| OLD | NEW |