| <!DOCTYPE html> |
| <!-- |
| Copyright 2016 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/components/core-icon/core-icon.html"> |
| |
| <polymer-element name="alert-icon"> |
| <template> |
| <style> |
| |
| .highlighted { |
| box-shadow: 0px 0px 5px #ffba02; |
| border: 2px solid #ffba02; |
| border-radius: 14px; |
| } |
| |
| </style> |
| |
| <core-icon id="icon"></core-icon> |
| |
| </template> |
| <script> |
| 'use strict'; |
| Polymer('alert-icon', { |
| |
| initialize: function(alertAnnotation, alertKey) { |
| var bugId = alertAnnotation['bug_id']; |
| var improvement = alertAnnotation['improvement']; |
| var recovered = alertAnnotation['recovered']; |
| var key = alertAnnotation['key']; |
| |
| this.$.icon.icon = 'report'; |
| var color = 'black'; |
| if (!bugId && !improvement) { |
| color = 'red'; |
| } else if (!bugId && improvement) { |
| color = 'green'; |
| this.$.icon.icon = 'info'; |
| } |
| |
| this.$.icon.style.color = color; |
| |
| if (bugId && bugId < 0 || recovered) { |
| // Triaged as invalid, ignored, or recovered; lower opacity. |
| this.$.icon.style.opacity = 0.25; |
| } |
| |
| // alertKey is an optional attribute to specify that this chart |
| // is associated with an alert. If this alert is the one alert that |
| // this chart is meant to draw attention to, we want to distinguish |
| // this alert from any others on the chart. |
| if (alertKey == key) { |
| this.$.icon.classList.add('highlighted'); |
| } |
| }, |
| |
| setPosition: function(top, left) { |
| this.$.icon.style.top = top + 'px'; |
| this.$.icon.style.left = left + 'px'; |
| } |
| }); |
| </script> |
| </polymer-element> |
