| OLD | NEW |
|---|
| 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 <link rel="import" href="/components/neon-animation/animations/fade-out-animatio
n.html"> | |
| 8 <link rel="import" href="/components/neon-animation/animations/scale-up-animatio
n.html"> | |
| 9 <link rel="import" href="/components/neon-animation/neon-animation-runner-behavi
or.html"> | |
| 10 | |
| 11 <dom-module id='dialog-container'> | 7 <dom-module id='dialog-container'> |
| 12 <style> | 8 <style> |
| 13 :host { | 9 :host { |
| 14 background:transparent; | 10 background:transparent; |
| 15 z-index: 1000; | 11 z-index: 1000; |
| 16 margin: 20px; | 12 margin: 20px; |
| 17 min-height: 100px; | 13 min-height: 100px; |
| 18 position: absolute; | 14 position: absolute; |
| 19 visibility: hidden; | 15 visibility: hidden; |
| 20 } | 16 } |
| 21 </style> | 17 </style> |
| 22 <template> | 18 <template> |
| 23 <content></content> | 19 <content></content> |
| 24 </template> | 20 </template> |
| 25 </dom-module> | 21 </dom-module> |
| 26 <script> | 22 <script> |
| 27 'use strict'; | 23 'use strict'; |
| 28 Polymer({ | 24 Polymer({ |
| 29 is: 'dialog-container', | 25 is: 'dialog-container', |
| 30 | 26 |
| 31 behaviors: [ | |
| 32 Polymer.NeonAnimationRunnerBehavior | |
| 33 ], | |
| 34 | |
| 35 properties: { | 27 properties: { |
| 36 targetid: { | 28 targetid: { |
| 37 type: String, | 29 type: String, |
| 38 }, | 30 }, |
| 39 positionisfixed: { | 31 positionisfixed: { |
| 40 type: Boolean, | 32 type: Boolean, |
| 41 value: false, | 33 value: false, |
| 42 }, | 34 }, |
| 43 opened: { | 35 opened: { |
| 44 type: Boolean, | 36 type: Boolean, |
| 45 value: false, | 37 value: false, |
| 46 }, | 38 }, |
| 47 animationConfig: { | |
| 48 type: Object, | |
| 49 value: function() { | |
| 50 return { | |
| 51 'show': [{ | |
| 52 name: 'fade-in-animation', | |
| 53 node: this, | |
| 54 }], | |
| 55 'hide': [{ | |
| 56 name: 'fade-out-animation', | |
| 57 node: this, | |
| 58 }], | |
| 59 }; | |
| 60 } | |
| 61 }, | |
| 62 }, | 39 }, |
| 63 | 40 |
| 64 listeners: { | 41 // TODO(aiolos): Add animation on open/close. |
| 65 'neon-animation-finish': '_onAnimationFinish' | |
| 66 }, | |
| 67 _onAnimationFinish: function() { | |
| 68 if (!this.opened) { | |
| 69 this.style.visibility = 'hidden'; | |
| 70 } else { | |
| 71 this.style.visibility = 'visible'; | |
| 72 } | |
| 73 }, | |
| 74 | 42 |
| 75 updatePositionFromCoords: function(top, left) { | 43 updatePositionFromCoords: function(top, left) { |
| 76 if (!this.positionisfixed) { | 44 if (!this.positionisfixed) { |
| 77 this.style.left = (left + 15) + 'px'; | 45 this.style.left = (left + 15) + 'px'; |
| 78 this.style.top = (top + 15) + 'px'; | 46 this.style.top = (top + 15) + 'px'; |
| 79 } | 47 } |
| 80 }, | 48 }, |
| 81 | 49 |
| 82 toggleFixed: function() { | 50 toggleFixed: function() { |
| 83 this.positionisfixed = !this.positionisfixed; | 51 this.positionisfixed = !this.positionisfixed; |
| 84 }, | 52 }, |
| 85 | 53 |
| 86 open: function() { | 54 open: function() { |
| 87 this.opened = true; | 55 this.opened = true; |
| 88 this.style.visibility = 'visible'; | 56 this.style.visibility = 'visible'; |
| 89 this.playAnimation('show'); | |
| 90 }, | 57 }, |
| 91 | 58 |
| 92 close: function() { | 59 close: function() { |
| 93 this.opened = false; | 60 this.opened = false; |
| 94 this.playAnimation('hide'); | 61 this.style.visibility = 'hidden'; |
| 95 }, | 62 }, |
| 96 }); | 63 }); |
| 97 </script> | 64 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2174523002:
Remove animations from chart tooltip. (Closed)
Base URL: https://github.com/catapult-project/catapult.git@polymer10-rebase