alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] CSS enhancements

Browse Source 
WTD-1054
Better handling of different content cases;
This commit is contained in:
Charles Hacskaylo
2015-04-29 18:13:35 -07:00
parent eafc603e03
commit 0bbe3ec99a
3 changed files with 92 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2726,7 +2726,7 @@ input[type="text"] {
/* line 11, ../sass/helpers/_bubbles.scss */ /* line 11, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble { .l-infobubble-wrapper .l-infobubble {
display: inline-block; display: inline-block;
max-width: 400px; max-width: 250px;
padding: 5px 10px; } padding: 5px 10px; }
/* line 15, ../sass/helpers/_bubbles.scss */ /* line 15, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble:before { .l-infobubble-wrapper .l-infobubble:before {
@@ -2734,45 +2734,57 @@ input[type="text"] {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; } height: 0; }
/* line 22, ../sass/helpers/_bubbles.scss */ /* line 21, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper .l-infobubble table tr td { .l-infobubble-wrapper .l-infobubble table {
max-width: 150px; width: 100%; }
padding: 2px 0; /* line 24, ../sass/helpers/_bubbles.scss */
vertical-align: top; } .l-infobubble-wrapper .l-infobubble table tr td {
/* line 29, ../sass/helpers/_bubbles.scss */ padding: 2px 0;
.l-infobubble-wrapper .l-infobubble table tr td.value { vertical-align: top; }
padding-left: 10px; } /* line 31, ../sass/helpers/_bubbles.scss */
/* line 32, ../sass/helpers/_bubbles.scss */ .l-infobubble-wrapper .l-infobubble table tr td.label {
.l-infobubble-wrapper .l-infobubble table tr td.align-wrap { padding-right: 10px;
white-space: normal; } white-space: nowrap; }
/* line 39, ../sass/helpers/_bubbles.scss */ /* 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 { .l-infobubble-wrapper.arw-left {
margin-left: 10px; } margin-left: 10px; }
/* line 41, ../sass/helpers/_bubbles.scss */ /* line 54, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-left .l-infobubble::before { .l-infobubble-wrapper.arw-left .l-infobubble::before {
right: 100%; right: 100%;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-right: 7.5px solid #dddddd; } border-right: 7.5px solid #dddddd; }
/* line 49, ../sass/helpers/_bubbles.scss */ /* line 62, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-right { .l-infobubble-wrapper.arw-right {
margin-right: 10px; } margin-right: 10px; }
/* line 51, ../sass/helpers/_bubbles.scss */ /* line 64, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-right .l-infobubble::before { .l-infobubble-wrapper.arw-right .l-infobubble::before {
left: 100%; left: 100%;
border-top: 5px solid transparent; border-top: 5px solid transparent;
border-bottom: 5px solid transparent; border-bottom: 5px solid transparent;
border-left: 7.5px solid #dddddd; } border-left: 7.5px solid #dddddd; }
/* line 60, ../sass/helpers/_bubbles.scss */ /* line 73, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-top .l-infobubble::before { .l-infobubble-wrapper.arw-top .l-infobubble::before {
top: 10px; } top: 10px; }
/* line 66, ../sass/helpers/_bubbles.scss */ /* line 79, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-btm .l-infobubble::before { .l-infobubble-wrapper.arw-btm .l-infobubble::before {
bottom: 10px; } bottom: 10px; }
/* line 71, ../sass/helpers/_bubbles.scss */ /* line 84, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-down { .l-infobubble-wrapper.arw-down {
margin-bottom: 10px; } margin-bottom: 10px; }
/* line 73, ../sass/helpers/_bubbles.scss */ /* line 86, ../sass/helpers/_bubbles.scss */
.l-infobubble-wrapper.arw-down .l-infobubble::before { .l-infobubble-wrapper.arw-down .l-infobubble::before {
left: 50%; left: 50%;
top: 100%; top: 100%;
@@ -2781,7 +2793,7 @@ input[type="text"] {
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 7.5px solid #dddddd; } border-top: 7.5px solid #dddddd; }
/* line 86, ../sass/helpers/_bubbles.scss */ /* line 99, ../sass/helpers/_bubbles.scss */
.s-infobubble { .s-infobubble {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -2791,19 +2803,18 @@ input[type="text"] {
background: #dddddd; background: #dddddd;
color: #666666; color: #666666;
font-size: 0.8rem; } font-size: 0.8rem; }
/* line 92, ../sass/helpers/_bubbles.scss */ /* line 105, ../sass/helpers/_bubbles.scss */
.s-infobubble .title { .s-infobubble .title {
color: #333333; color: #333333;
font-weight: bold; font-weight: bold; }
margin-bottom: 5px; } /* line 110, ../sass/helpers/_bubbles.scss */
/* line 98, ../sass/helpers/_bubbles.scss */
.s-infobubble tr td { .s-infobubble tr td {
border-top: 1px solid #c4c4c4; border-top: 1px solid #c4c4c4;
font-size: 0.9em; } font-size: 0.9em; }
/* line 102, ../sass/helpers/_bubbles.scss */ /* line 114, ../sass/helpers/_bubbles.scss */
.s-infobubble tr:first-child td { .s-infobubble tr:first-child td {
border-top: none; } border-top: none; }
/* line 106, ../sass/helpers/_bubbles.scss */ /* line 118, ../sass/helpers/_bubbles.scss */
.s-infobubble .value { .s-infobubble .value {
color: #333333; } color: #333333; }

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

@@ -10,7 +10,7 @@ $infoBubbleBg: #ddd;
z-index: 70; z-index: 70;
.l-infobubble { .l-infobubble {
display: inline-block; display: inline-block;
max-width: 400px; max-width: 250px;
padding: 5px 10px; padding: 5px 10px;
&:before { &:before {
content:""; content:"";
@@ -18,22 +18,35 @@ $infoBubbleBg: #ddd;
width: 0; width: 0;
height: 0; height: 0;
} }
table tr { table {
td { width: 100%;
max-width: 150px; tr {
padding: 2px 0; td {
vertical-align: top; //max-width: 150px;
//white-space: nowrap; padding: 2px 0;
//overflow: hidden; vertical-align: top;
//text-overflow: ellipsis; //white-space: nowrap;
&.value { //overflow: hidden;
padding-left: $interiorMargin * 2; //text-overflow: ellipsis;
} &.label {
&.align-wrap { padding-right: $interiorMargin * 2;
white-space: normal; 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 { &.arw-left {
@@ -92,7 +105,6 @@ $infoBubbleBg: #ddd;
.title { .title {
color: $emFg; color: $emFg;
font-weight: bold; font-weight: bold;
margin-bottom: $interiorMargin;
} }
tr { tr {
td { td {

45
platform/commonUI/inspect/res/infobubble.html
View File

@@ -6,36 +6,45 @@ bubbles = [
{layout: 'arw-btm arw-right'} {layout: 'arw-btm arw-right'}
]; ];
titlex='Egress Scenario scelerisque mauris pid montes nunc ut aliquam elementum tincidunt phasellus 1';
title='Egress Scenario 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'}, properties=[{label:'Type', value:'Timeline', align:'left'},
{label:'Start', value:'2015-04-27 00:00:00 UTC', 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:'End', value:'2015-04-27 06:07:26 UTC', align:'left'},
{label:'Duration', value:'09:15:37', align:'left'}, {label:'Duration', value:'06:07:26', align:'left'},
{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'}, {label:'Created', value:'2015-04-26 12:27:00 UTC', align:'left'},
{label:'Modified', value:'2015-04-26 18:38: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:'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:'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:'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'}]; {label:'ID', value:'WRP-T-89', align:'left'}];
"></div> "></div>
<div <div
style="position: absolute"
ng-repeat="bubble in bubbles" ng-repeat="bubble in bubbles"
class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}" ng-style="{left: $index * 300 + 'px'}"
ng-style="{left: $index * 250 + 'px'}"
> >
<div class="l-infobubble"> <div class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}">
<div <div class="l-infobubble">
ng-show="title.length > 0" <div
class="title" ng-show="title.length > 0"
>{{title}} 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>
<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>