ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-22 00:57:11 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'nasa/open1054' into open1162

Browse Source 
Merge markup/styling for info bubble, WTD-1162
This commit is contained in:
Victor Woeltjen
2015-05-01 10:33:16 -07:00
parent 2cba0234c5 0bbe3ec99a
commit ab60b92b9e
5 changed files with 303 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bundles.json
View File

@ -6,11 +6,13 @@
"platform/commonUI/browse", "platform/commonUI/browse",
"platform/commonUI/edit", "platform/commonUI/edit",
"platform/commonUI/dialog", "platform/commonUI/dialog",
"platform/commonUI/inspect",
"platform/commonUI/general", "platform/commonUI/general",
"platform/containment", "platform/containment",
"platform/telemetry", "platform/telemetry",
"platform/features/layout", "platform/features/layout",
"platform/features/pages", "platform/features/pages",
"platform/features/plot", "platform/features/plot",
"platform/features/scrolling", "platform/features/scrolling",
"platform/forms", "platform/forms",

162
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -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,107 @@ 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 {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: inline-block; display: inline-block;
background: #990000; max-width: 250px;
color: #ff9999; padding: 5px 10px; }
font-size: 0.8rem; /* line 15, ../sass/helpers/_bubbles.scss */
font-style: italic; .l-infobubble-wrapper .l-infobubble:before {
max-width: 200px;
padding: 4px 8px; }
/* line 17, ../sass/helpers/_bubbles.scss */
.bubble-wrapper .bubble:before {
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; } height: 0; }
/* line 24, ../sass/helpers/_bubbles.scss */ /* line 21, ../sass/helpers/_bubbles.scss */
.bubble-wrapper.arw-left .bubble:before { .l-infobubble-wrapper .l-infobubble table {
right: 100%; width: 100%; }
top: 50%; /* line 24, ../sass/helpers/_bubbles.scss */
margin-top: -7px; .l-infobubble-wrapper .l-infobubble table tr td {
border-top: 7px solid transparent; padding: 2px 0;
border-bottom: 7px solid transparent; vertical-align: top; }
border-right: 10.5px solid #990000; } /* line 31, ../sass/helpers/_bubbles.scss */
/* line 32, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table tr td.label {
.bubble-wrapper.arw-down .bubble:before { padding-right: 10px;
left: 50%; white-space: nowrap; }
top: 100%; /* line 35, ../sass/helpers/_bubbles.scss */
margin-left: -7px; .l-infobubble-wrapper .l-infobubble table tr td.value {
border-left: 7px solid transparent; white-space: nowrap; }
border-right: 7px solid transparent; /* line 39, ../sass/helpers/_bubbles.scss */
border-top: 10.5px solid #990000; } .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 */ /* line 8, ../sass/helpers/_splitter.scss */
.split-layout .splitter { .split-layout .splitter {
@ -2882,10 +2940,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 +2982,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 +3099,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%;

158
platform/commonUI/general/res/sass/helpers/_bubbles.scss
View File

@ -1,40 +1,122 @@
.bubble-wrapper { //************************************************* LAYOUT
$arwSize: 7px;
$c: #990000; $infoBubbleFg: #666;
@include box-shadow(rgba(black, 0.4) 0 1px 5px); $infoBubbleBg: #ddd;
position: absolute;
//top: 200px; left: 200px; .l-infobubble-wrapper {
z-index: 10; $arwSize: 5px;
.bubble { @include box-shadow(rgba(black, 0.4) 0 1px 5px);
@include border-radius($basicCr); position: absolute;
display: inline-block; z-index: 70;
background: $c; .l-infobubble {
color: lighten($c, 50%); display: inline-block;
font-size: 0.8rem; max-width: 250px;
font-style: italic; padding: 5px 10px;
max-width: 200px; &:before {
padding: 4px 8px; content:"";
&:before { position: absolute;
content:""; width: 0;
position: absolute; height: 0;
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%; &.arw-left {
top: 50%; // 26px; margin-left: $arwSize*2;
margin-top: -1 * $arwSize; .l-infobubble::before {
border-top: $arwSize solid transparent; right: 100%;
border-bottom: $arwSize solid transparent; border-top: $arwSize solid transparent;
border-right: ($arwSize * 1.5) solid $c; border-bottom: $arwSize solid transparent;
} border-right: ($arwSize * 1.5) solid $infoBubbleBg;
&.arw-down .bubble:before { }
left: 50%; }
top: 100%;
margin-left: -1 * $arwSize; &.arw-right {
border-left: $arwSize solid transparent; margin-right: $arwSize*2;
border-right: $arwSize solid transparent; .l-infobubble::before {
border-top: ($arwSize * 1.5) solid $c; 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
View 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
View 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>