mirror of
https://github.com/nasa/openmct.git
synced 2024-12-23 15:02:23 +00:00
[Frontend] Infobubble markup and CSS
WTD-1054 Markup and styling for infobubble; Includes fake data in infobubble.html
This commit is contained in:
Charles Hacskaylo
parent
ec2d5892a5
commit
eafc603e03
@ -1,5 +1,5 @@
|
||||
/* CONSTANTS */
|
||||
/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -20,38 +20,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -2716,49 +2716,96 @@ input[type="text"] {
|
||||
.tool-bar .input-labeled label {
|
||||
font-size: 12.6px; }
|
||||
|
||||
/* line 1, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper {
|
||||
/* line 6, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper {
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||
position: absolute;
|
||||
z-index: 10; }
|
||||
/* line 8, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper .bubble {
|
||||
z-index: 70; }
|
||||
/* line 11, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble {
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
padding: 5px 10px; }
|
||||
/* line 15, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
/* line 22, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 29, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
padding-left: 10px; }
|
||||
/* line 32, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 39, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left {
|
||||
margin-left: 10px; }
|
||||
/* line 41, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left .l-infobubble::before {
|
||||
right: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 7.5px solid #dddddd; }
|
||||
/* line 49, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right {
|
||||
margin-right: 10px; }
|
||||
/* line 51, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right .l-infobubble::before {
|
||||
left: 100%;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 7.5px solid #dddddd; }
|
||||
/* line 60, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-top .l-infobubble::before {
|
||||
top: 10px; }
|
||||
/* line 66, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-btm .l-infobubble::before {
|
||||
bottom: 10px; }
|
||||
/* line 71, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down {
|
||||
margin-bottom: 10px; }
|
||||
/* line 73, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down .l-infobubble::before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -5px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 7.5px solid #dddddd; }
|
||||
|
||||
/* line 86, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
background: #990000;
|
||||
color: #ff9999;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px; }
|
||||
/* line 17, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper .bubble:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
/* line 24, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper.arw-left .bubble:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 10.5px solid #990000; }
|
||||
/* line 32, ../sass/helpers/_bubbles.scss */
|
||||
.bubble-wrapper.arw-down .bubble:before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 10.5px solid #990000; }
|
||||
background: #dddddd;
|
||||
color: #666666;
|
||||
font-size: 0.8rem; }
|
||||
/* line 92, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .title {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px; }
|
||||
/* line 98, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr td {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
font-size: 0.9em; }
|
||||
/* line 102, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr:first-child td {
|
||||
border-top: none; }
|
||||
/* line 106, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .value {
|
||||
color: #333333; }
|
||||
|
||||
/* line 8, ../sass/helpers/_splitter.scss */
|
||||
.split-layout .splitter {
|
||||
@ -2882,10 +2929,10 @@ input[type="text"] {
|
||||
.wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@ -2924,10 +2971,10 @@ input[type="text"] {
|
||||
.treeview .wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@ -3041,7 +3088,7 @@ input[type="text"] {
|
||||
padding-left: 0; }
|
||||
|
||||
/* Styles for the iframe EmbeddedPageController element */
|
||||
/* line 4, ../sass/iframe.scss */
|
||||
/* line 4, ../sass/_iframe.scss */
|
||||
.l-iframe iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
@ -1,40 +1,110 @@
|
||||
.bubble-wrapper {
|
||||
$arwSize: 7px;
|
||||
$c: #990000;
|
||||
//************************************************* LAYOUT
|
||||
|
||||
$infoBubbleFg: #666;
|
||||
$infoBubbleBg: #ddd;
|
||||
|
||||
.l-infobubble-wrapper {
|
||||
$arwSize: 5px;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
position: absolute;
|
||||
//top: 200px; left: 200px;
|
||||
z-index: 10;
|
||||
.bubble {
|
||||
@include border-radius($basicCr);
|
||||
z-index: 70;
|
||||
.l-infobubble {
|
||||
display: inline-block;
|
||||
background: $c;
|
||||
color: lighten($c, 50%);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px;
|
||||
max-width: 400px;
|
||||
padding: 5px 10px;
|
||||
&:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
table tr {
|
||||
td {
|
||||
max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.value {
|
||||
padding-left: $interiorMargin * 2;
|
||||
}
|
||||
&.arw-left .bubble:before {
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-left {
|
||||
margin-left: $arwSize*2;
|
||||
.l-infobubble::before {
|
||||
right: 100%;
|
||||
top: 50%; // 26px;
|
||||
margin-top: -1 * $arwSize;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-right: ($arwSize * 1.5) solid $c;
|
||||
border-right: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
}
|
||||
&.arw-down .bubble:before {
|
||||
}
|
||||
|
||||
&.arw-right {
|
||||
margin-right: $arwSize*2;
|
||||
.l-infobubble::before {
|
||||
left: 100%;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-left: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-top {
|
||||
.l-infobubble::before {
|
||||
top: $arwSize * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-btm {
|
||||
.l-infobubble::before {
|
||||
bottom: $arwSize * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-down {
|
||||
margin-bottom: $arwSize*2;
|
||||
.l-infobubble::before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -1 * $arwSize;
|
||||
border-left: $arwSize solid transparent;
|
||||
border-right: $arwSize solid transparent;
|
||||
border-top: ($arwSize * 1.5) solid $c;
|
||||
border-top: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//************************************************* LOOK AND FEEL
|
||||
|
||||
.s-infobubble {
|
||||
$emFg: darken($infoBubbleFg, 20%);
|
||||
@include border-radius($basicCr);
|
||||
background: $infoBubbleBg;
|
||||
color: $infoBubbleFg;
|
||||
font-size: 0.8rem;
|
||||
.title {
|
||||
color: $emFg;
|
||||
font-weight: bold;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: 1px solid darken($infoBubbleBg, 10%);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: $emFg;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,5 +1,41 @@
|
||||
<div class="t-infobubble l-infobubble-wrapper">
|
||||
<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 you’ll 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">
|
||||
Info Bubble, and it works!
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user