| <link rel="import" href="../../../../packages/polymer/polymer.html"> |
| <link rel="import" href="observatory_element.html"> |
| |
| <polymer-element name="curly-block" extends="observatory-element"> |
| <template> |
| <style> |
| .idle { |
| display: inline-block; |
| color: #0489c3; |
| cursor: pointer; |
| } |
| .busy { |
| display: inline-block; |
| color: white; |
| cursor: wait; |
| } |
| </style> |
| <template if="{{ expanded }}"> |
| <template if="{{ busy }}"> |
| {<div class="busy"> ⊟ </div> |
| <br> |
| <content></content> |
| } |
| </template> |
| <template if="{{ !busy }}"> |
| {<a on-click="{{ toggleExpand }}"><div class="idle"> ⊟ </div></a> |
| <br> |
| <content></content> |
| } |
| </template> |
| </template> |
| |
| <template if="{{ !expanded }}"> |
| <template if="{{ busy }}"> |
| {<div class="busy"> ⊞ </div>} |
| </template> |
| <template if="{{ !busy }}"> |
| {<a on-click="{{ toggleExpand }}"><div class="idle"> ⊞ </div></a>} |
| </template> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <script type="application/dart" src="curly_block.dart"></script> |