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

Side by Side Diff: dashboard/dashboard/elements/alert-icon.html

Issue 2767263002: . Base URL: https://github.com/catapult-project/catapult.git@master
Patch Set: Created 3 years, 9 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 | dashboard/dashboard/elements/chart-container.html » ('j') | 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 <link rel="import" href="/components/iron-icon/iron-icon.html"> 8 <link rel="import" href="/components/iron-icon/iron-icon.html">
9 9
10 <dom-module id="alert-icon"> 10 <dom-module id="alert-icon">
11 <template> 11 <template>
12 <style> 12 <style>
13 13
14 .highlighted { 14 .highlighted {
15 box-shadow: 0px 0px 5px #ffba02; 15 box-shadow: 0px 0px 5px #ffba02;
16 border: 2px solid #ffba02; 16 border: 2px solid #ffba02;
17 border-radius: 14px; 17 border-radius: 14px;
18 } 18 }
19 19
20 #line{
21 height: 100px;
22 border-left: 2px solid red;
23 position: relative;
24 }
25
20 </style> 26 </style>
21 27
22 <iron-icon id="icon"></iron-icon> 28 <iron-icon id="icon"></iron-icon>
29 <div id="line"></div>
23 30
24 </template> 31 </template>
25 32
26 </dom-module> 33 </dom-module>
27 34
28 <script> 35 <script>
29 'use strict'; 36 'use strict';
30 Polymer({ 37 Polymer({
31 38
32 is: 'alert-icon', 39 is: 'alert-icon',
(...skipping 22 matching lines...) Expand all
55 // alertKey is an optional attribute to specify that this chart 62 // alertKey is an optional attribute to specify that this chart
56 // is associated with an alert. If this alert is the one alert that 63 // is associated with an alert. If this alert is the one alert that
57 // this chart is meant to draw attention to, we want to distinguish 64 // this chart is meant to draw attention to, we want to distinguish
58 // this alert from any others on the chart. 65 // this alert from any others on the chart.
59 if (alertKey == key) { 66 if (alertKey == key) {
60 Polymer.dom(this.$.icon).classList.add('highlighted'); 67 Polymer.dom(this.$.icon).classList.add('highlighted');
61 } 68 }
62 }, 69 },
63 70
64 setPosition: function(top, left) { 71 setPosition: function(top, left) {
65 this.$.icon.style.top = top + 'px'; 72 this.$.icon.style.top = '0px';
66 this.$.icon.style.left = left + 'px'; 73 this.$.icon.style.left = left + 'px';
74
75 this.$.line.style.top = '-6px';
76 this.$.line.style.height = top - 6 + 'px';
77 this.$.line.style.left = left + 11 + 'px';
67 } 78 }
68 }); 79 });
69 </script> 80 </script>
OLDNEW
« no previous file with comments | « no previous file | dashboard/dashboard/elements/chart-container.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698