mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 13:17:53 +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 */
|
/* 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,
|
html, body, div, span, applet, object, iframe,
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
a, abbr, acronym, address, big, cite, code,
|
a, abbr, acronym, address, big, cite, code,
|
||||||
@ -20,38 +20,38 @@ time, mark, audio, video {
|
|||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
vertical-align: baseline; }
|
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 {
|
html {
|
||||||
line-height: 1; }
|
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 {
|
ol, ul {
|
||||||
list-style: none; }
|
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 {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0; }
|
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 {
|
caption, th, td {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
vertical-align: middle; }
|
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 {
|
q, blockquote {
|
||||||
quotes: none; }
|
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 {
|
q:before, q:after, blockquote:before, blockquote:after {
|
||||||
content: "";
|
content: "";
|
||||||
content: none; }
|
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 {
|
a img {
|
||||||
border: none; }
|
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 {
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
||||||
@ -2716,49 +2716,96 @@ input[type="text"] {
|
|||||||
.tool-bar .input-labeled label {
|
.tool-bar .input-labeled label {
|
||||||
font-size: 12.6px; }
|
font-size: 12.6px; }
|
||||||
|
|
||||||
/* line 1, ../sass/helpers/_bubbles.scss */
|
/* line 6, ../sass/helpers/_bubbles.scss */
|
||||||
.bubble-wrapper {
|
.l-infobubble-wrapper {
|
||||||
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||||
-moz-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;
|
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10; }
|
z-index: 70; }
|
||||||
/* line 8, ../sass/helpers/_bubbles.scss */
|
/* line 11, ../sass/helpers/_bubbles.scss */
|
||||||
.bubble-wrapper .bubble {
|
.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;
|
-webkit-border-radius: 3px;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
-ms-border-radius: 3px;
|
-ms-border-radius: 3px;
|
||||||
-o-border-radius: 3px;
|
-o-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
display: inline-block;
|
background: #dddddd;
|
||||||
background: #990000;
|
color: #666666;
|
||||||
color: #ff9999;
|
font-size: 0.8rem; }
|
||||||
font-size: 0.8rem;
|
/* line 92, ../sass/helpers/_bubbles.scss */
|
||||||
font-style: italic;
|
.s-infobubble .title {
|
||||||
max-width: 200px;
|
color: #333333;
|
||||||
padding: 4px 8px; }
|
font-weight: bold;
|
||||||
/* line 17, ../sass/helpers/_bubbles.scss */
|
margin-bottom: 5px; }
|
||||||
.bubble-wrapper .bubble:before {
|
/* line 98, ../sass/helpers/_bubbles.scss */
|
||||||
content: "";
|
.s-infobubble tr td {
|
||||||
position: absolute;
|
border-top: 1px solid #c4c4c4;
|
||||||
width: 0;
|
font-size: 0.9em; }
|
||||||
height: 0; }
|
/* line 102, ../sass/helpers/_bubbles.scss */
|
||||||
/* line 24, ../sass/helpers/_bubbles.scss */
|
.s-infobubble tr:first-child td {
|
||||||
.bubble-wrapper.arw-left .bubble:before {
|
border-top: none; }
|
||||||
right: 100%;
|
/* line 106, ../sass/helpers/_bubbles.scss */
|
||||||
top: 50%;
|
.s-infobubble .value {
|
||||||
margin-top: -7px;
|
color: #333333; }
|
||||||
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; }
|
|
||||||
|
|
||||||
/* line 8, ../sass/helpers/_splitter.scss */
|
/* line 8, ../sass/helpers/_splitter.scss */
|
||||||
.split-layout .splitter {
|
.split-layout .splitter {
|
||||||
@ -2882,10 +2929,10 @@ input[type="text"] {
|
|||||||
.wait-spinner {
|
.wait-spinner {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-animation: rotation .6s infinite linear;
|
-webkit-animation: rotation 0.6s infinite linear;
|
||||||
-moz-animation: rotation .6s infinite linear;
|
-moz-animation: rotation 0.6s infinite linear;
|
||||||
-o-animation: rotation .6s infinite linear;
|
-o-animation: rotation 0.6s infinite linear;
|
||||||
animation: rotation .6s infinite linear;
|
animation: rotation 0.6s infinite linear;
|
||||||
border-color: rgba(0, 153, 204, 0.25);
|
border-color: rgba(0, 153, 204, 0.25);
|
||||||
border-top-color: #0099cc;
|
border-top-color: #0099cc;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
@ -2924,10 +2971,10 @@ input[type="text"] {
|
|||||||
.treeview .wait-spinner {
|
.treeview .wait-spinner {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
-webkit-animation: rotation .6s infinite linear;
|
-webkit-animation: rotation 0.6s infinite linear;
|
||||||
-moz-animation: rotation .6s infinite linear;
|
-moz-animation: rotation 0.6s infinite linear;
|
||||||
-o-animation: rotation .6s infinite linear;
|
-o-animation: rotation 0.6s infinite linear;
|
||||||
animation: rotation .6s infinite linear;
|
animation: rotation 0.6s infinite linear;
|
||||||
border-color: rgba(0, 153, 204, 0.25);
|
border-color: rgba(0, 153, 204, 0.25);
|
||||||
border-top-color: #0099cc;
|
border-top-color: #0099cc;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
@ -3041,7 +3088,7 @@ input[type="text"] {
|
|||||||
padding-left: 0; }
|
padding-left: 0; }
|
||||||
|
|
||||||
/* Styles for the iframe EmbeddedPageController element */
|
/* Styles for the iframe EmbeddedPageController element */
|
||||||
/* line 4, ../sass/iframe.scss */
|
/* line 4, ../sass/_iframe.scss */
|
||||||
.l-iframe iframe {
|
.l-iframe iframe {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -1,40 +1,110 @@
|
|||||||
.bubble-wrapper {
|
//************************************************* LAYOUT
|
||||||
$arwSize: 7px;
|
|
||||||
$c: #990000;
|
$infoBubbleFg: #666;
|
||||||
|
$infoBubbleBg: #ddd;
|
||||||
|
|
||||||
|
.l-infobubble-wrapper {
|
||||||
|
$arwSize: 5px;
|
||||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
//top: 200px; left: 200px;
|
z-index: 70;
|
||||||
z-index: 10;
|
.l-infobubble {
|
||||||
.bubble {
|
|
||||||
@include border-radius($basicCr);
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: $c;
|
max-width: 400px;
|
||||||
color: lighten($c, 50%);
|
padding: 5px 10px;
|
||||||
font-size: 0.8rem;
|
|
||||||
font-style: italic;
|
|
||||||
max-width: 200px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
&:before {
|
&:before {
|
||||||
content:"";
|
content:"";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 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%;
|
right: 100%;
|
||||||
top: 50%; // 26px;
|
|
||||||
margin-top: -1 * $arwSize;
|
|
||||||
border-top: $arwSize solid transparent;
|
border-top: $arwSize solid transparent;
|
||||||
border-bottom: $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%;
|
left: 50%;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
margin-left: -1 * $arwSize;
|
margin-left: -1 * $arwSize;
|
||||||
border-left: $arwSize solid transparent;
|
border-left: $arwSize solid transparent;
|
||||||
border-right: $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">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user