openmct/platform/commonUI/inspect/res/infobubble.html
Charles Hacskaylo eafc603e03 [Frontend] Infobubble markup and CSS
WTD-1054
Markup and styling for infobubble;
Includes fake data in infobubble.html
2015-04-29 17:52:06 -07:00

41 lines
1.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div ng-init="
bubbles = [
{layout: 'arw-top arw-left'},
{layout: 'arw-top arw-right'},
{layout: 'arw-btm arw-left'},
{layout: 'arw-btm arw-right'}
];
title='Egress Scenario 1';
properties=[{label:'Type', value:'Timeline', align:'left'},
{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
{label:'Duration', value:'09:15:37', align:'left'},
{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'},
{label:'Modified', value:'2015-04-26 18:38:00 UTC', align:'left'},
{label:'Status', value:'Up to date', align:'left'},
{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'left'},
{label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that youll never be caught off guard.', align:'wrap'},
{label:'ID', value:'WRP-T-89', align:'left'}];
"></div>
<div
ng-repeat="bubble in bubbles"
class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}"
ng-style="{left: $index * 250 + 'px'}"
>
<div class="l-infobubble">
<div
ng-show="title.length > 0"
class="title"
>{{title}}
</div>
<table>
<tr ng-repeat="property in properties">
<td class="label">{{property.label}}</td>
<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
</tr>
</table>
</div>
</div>