mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 17:57:04 +00:00
Merge remote-tracking branch 'nasa/open1054' into open1162
Merge markup/styling for info bubble, WTD-1162
This commit is contained in:
Victor Woeltjen
commit
ab60b92b9e
@ -6,11 +6,13 @@
|
||||
"platform/commonUI/browse",
|
||||
"platform/commonUI/edit",
|
||||
"platform/commonUI/dialog",
|
||||
"platform/commonUI/inspect",
|
||||
"platform/commonUI/general",
|
||||
"platform/containment",
|
||||
"platform/telemetry",
|
||||
"platform/features/layout",
|
||||
"platform/features/pages",
|
||||
|
||||
"platform/features/plot",
|
||||
"platform/features/scrolling",
|
||||
"platform/forms",
|
||||
|
||||
@ -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,107 @@ 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 {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
z-index: 70; }
|
||||
/* line 11, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble {
|
||||
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 {
|
||||
max-width: 250px;
|
||||
padding: 5px 10px; }
|
||||
/* line 15, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble: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; }
|
||||
/* line 21, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table {
|
||||
width: 100%; }
|
||||
/* line 24, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td {
|
||||
padding: 2px 0;
|
||||
vertical-align: top; }
|
||||
/* line 31, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.label {
|
||||
padding-right: 10px;
|
||||
white-space: nowrap; }
|
||||
/* line 35, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.value {
|
||||
white-space: nowrap; }
|
||||
/* line 39, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
|
||||
white-space: normal; }
|
||||
/* line 45, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper .l-infobubble .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 5px; }
|
||||
/* line 52, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-left {
|
||||
margin-left: 10px; }
|
||||
/* line 54, ../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 62, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-right {
|
||||
margin-right: 10px; }
|
||||
/* line 64, ../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 73, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-top .l-infobubble::before {
|
||||
top: 10px; }
|
||||
/* line 79, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-btm .l-infobubble::before {
|
||||
bottom: 10px; }
|
||||
/* line 84, ../sass/helpers/_bubbles.scss */
|
||||
.l-infobubble-wrapper.arw-down {
|
||||
margin-bottom: 10px; }
|
||||
/* line 86, ../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 99, ../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;
|
||||
background: #dddddd;
|
||||
color: #666666;
|
||||
font-size: 0.8rem; }
|
||||
/* line 105, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .title {
|
||||
color: #333333;
|
||||
font-weight: bold; }
|
||||
/* line 110, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr td {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
font-size: 0.9em; }
|
||||
/* line 114, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble tr:first-child td {
|
||||
border-top: none; }
|
||||
/* line 118, ../sass/helpers/_bubbles.scss */
|
||||
.s-infobubble .value {
|
||||
color: #333333; }
|
||||
|
||||
/* line 8, ../sass/helpers/_splitter.scss */
|
||||
.split-layout .splitter {
|
||||
@ -2882,10 +2940,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 +2982,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 +3099,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,122 @@
|
||||
.bubble-wrapper {
|
||||
$arwSize: 7px;
|
||||
$c: #990000;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
position: absolute;
|
||||
//top: 200px; left: 200px;
|
||||
z-index: 10;
|
||||
.bubble {
|
||||
@include border-radius($basicCr);
|
||||
display: inline-block;
|
||||
background: $c;
|
||||
color: lighten($c, 50%);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px;
|
||||
&:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
//************************************************* LAYOUT
|
||||
|
||||
$infoBubbleFg: #666;
|
||||
$infoBubbleBg: #ddd;
|
||||
|
||||
.l-infobubble-wrapper {
|
||||
$arwSize: 5px;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
.l-infobubble {
|
||||
display: inline-block;
|
||||
max-width: 250px;
|
||||
padding: 5px 10px;
|
||||
&:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
tr {
|
||||
td {
|
||||
//max-width: 150px;
|
||||
padding: 2px 0;
|
||||
vertical-align: top;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
&.label {
|
||||
padding-right: $interiorMargin * 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.value {
|
||||
white-space: nowrap;
|
||||
//width: 90%;
|
||||
}
|
||||
&.align-wrap {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
margin-bottom: $interiorMargin;
|
||||
//max-width: 200px;
|
||||
}
|
||||
}
|
||||
&.arw-left .bubble: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;
|
||||
}
|
||||
&.arw-down .bubble: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;
|
||||
}
|
||||
|
||||
&.arw-left {
|
||||
margin-left: $arwSize*2;
|
||||
.l-infobubble::before {
|
||||
right: 100%;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-right: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 $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;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: 1px solid darken($infoBubbleBg, 10%);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
.value {
|
||||
color: $emFg;
|
||||
}
|
||||
|
||||
}
|
||||
21
platform/commonUI/inspect/bundle.json
Normal file
21
platform/commonUI/inspect/bundle.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"extensions": {
|
||||
"types": [
|
||||
{
|
||||
"key": "infobubble",
|
||||
"name": "Info Bubble",
|
||||
"glyph": "\u00EA",
|
||||
"description": "Static markup for info bubbles",
|
||||
"features": [ "creation" ]
|
||||
}
|
||||
],
|
||||
"views": [
|
||||
{
|
||||
"templateUrl": "infobubble.html",
|
||||
"name": "Info Bubble",
|
||||
"type": "infobubble",
|
||||
"key": "infobubble"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
50
platform/commonUI/inspect/res/infobubble.html
Normal file
50
platform/commonUI/inspect/res/infobubble.html
Normal file
@ -0,0 +1,50 @@
|
||||
<div ng-init="
|
||||
bubbles = [
|
||||
{layout: 'arw-top arw-left'},
|
||||
{layout: 'arw-top arw-right'},
|
||||
{layout: 'arw-btm arw-left'},
|
||||
{layout: 'arw-btm arw-right'}
|
||||
];
|
||||
|
||||
titlex='Egress Scenario scelerisque mauris pid montes nunc ut aliquam elementum tincidunt phasellus 1';
|
||||
title='Egress Scenario 1';
|
||||
|
||||
propertiesShort=[{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:'ID', value:'WRP-T-89', align:'left'}];
|
||||
|
||||
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 06:07:26 UTC', align:'left'},
|
||||
{label:'Duration', value:'06:07:26', align:'left'},
|
||||
{label:'Created', value:'2015-04-26 12:27:00 UTC', align:'left'},
|
||||
{label:'Modified', value:'2015-04-26 23:21: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:'wrap'},
|
||||
{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
|
||||
style="position: absolute"
|
||||
ng-repeat="bubble in bubbles"
|
||||
ng-style="{left: $index * 300 + 'px'}"
|
||||
>
|
||||
<div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}">
|
||||
<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>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user