| <link rel="import" href="../../../../packages/polymer/polymer.html"> |
| <link rel="import" href="nav_bar.html"> |
| <link rel="import" href="observatory_element.html"> |
| <link rel="import" href="class_ref.html"> |
| |
| <polymer-element name="class-tree" extends="observatory-element"> |
| <template> |
| <link rel="stylesheet" href="css/shared.css"> |
| <style> |
| .table { |
| border-collapse: collapse!important; |
| width: 100%; |
| margin-bottom: 20px |
| } |
| .table thead > tr > th, |
| .table tbody > tr > th, |
| .table tfoot > tr > th, |
| .table thead > tr > td, |
| .table tbody > tr > td, |
| .table tfoot > tr > td { |
| padding: 8px; |
| vertical-align: top; |
| } |
| .table thead > tr > th { |
| vertical-align: bottom; |
| text-align: left; |
| border-bottom:2px solid #ddd; |
| } |
| |
| tr:hover > td { |
| background-color: #FFF3E3; |
| } |
| .rowColor0 { |
| background-color: #FFE9CC; |
| } |
| .rowColor1 { |
| background-color: #FFDEB2; |
| } |
| .rowColor2 { |
| background-color: #FFD399; |
| } |
| .rowColor3 { |
| background-color: #FFC87F; |
| } |
| .rowColor4 { |
| background-color: #FFBD66; |
| } |
| .rowColor5 { |
| background-color: #FFB24C; |
| } |
| .rowColor6 { |
| background-color: #FFA733; |
| } |
| .rowColor7 { |
| background-color: #FF9C19; |
| } |
| .rowColor8 { |
| background-color: #FF9100; |
| } |
| |
| .tooltip { |
| display: block; |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| } |
| |
| tr:hover .tooltip { |
| display: block; |
| position: absolute; |
| top: 100%; |
| right: 100%; |
| visibility: visible; |
| z-index: 999; |
| width: 400px; |
| color: #ffffff; |
| background-color: #0489c3; |
| border-top-right-radius: 8px; |
| border-top-left-radius: 8px; |
| border-bottom-right-radius: 8px; |
| border-bottom-left-radius: 8px; |
| transition: visibility 0s linear 0.5s; |
| transition: opacity .4s ease-in-out; |
| opacity: 1; |
| } |
| |
| .white { |
| color: #ffffff; |
| } |
| </style> |
| <nav-bar> |
| <top-nav-menu last="{{ true }}"></top-nav-menu> |
| <nav-control></nav-control> |
| </nav-bar> |
| <div class="content-centered"> |
| <h1>Class Hierarchy</h1> |
| <table id="tableTree" class="table"> |
| <thead> |
| <tr> |
| <th>Class</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr template repeat="{{row in tree.rows }}"> |
| <td on-click="{{toggleExpanded}}" |
| class="{{ coloring(row) }}" |
| style="{{ padding(row) }}"> |
| <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span> |
| <class-ref ref="{{ row.cls }}"></class-ref> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <script type="application/dart" src="class_tree.dart"></script> |