ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-21 03:25:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Tweaks in Inspector

Browse Source 
open #90
Colors, spacing, properties layout mods;
Checked in mobile and snow theme;
This commit is contained in:
Charles Hacskaylo 2015-10-30 18:31:02 -07:00
parent fe8d9f6717
commit 64c6ef6cfd
6 changed files with 156 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
platform/commonUI/general/res/sass/_inspector.scss
View File

@ -27,9 +27,10 @@
}
.l-inspect {
background: pullForward($colorBodyBg, 3%);
@extend .abs;
background: $colorInspectorBg;
color: $colorInspectorFg;
line-height: 140%;
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
@ -42,7 +43,7 @@
}
ul li {
margin-bottom: $interiorMarginLg * 2;
margin-bottom: $interiorMarginLg;
}
em {
@ -54,29 +55,23 @@
text-transform: uppercase;
}
table tr {
td {
border: none;
border-top: 1px solid $colorInteriorBorder !important;
padding: 2px 0;
vertical-align: top;
&.label {
color: $colorInspectorPropName !important;
padding-right: $interiorMargin !important;
white-space: nowrap;
}
&.value {
word-break: break-all;
}
.inspector-properties {
&:not(.first) {
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
&:first-child td {
border-top: none !important;
padding: $interiorMarginSm 0;
.label {
color: $colorInspectorPropName;
text-transform: uppercase;
}
.value {
color: $colorInspectorPropVal;
word-break: break-all;
}
}
.inspector-location {
line-height: 180%;
//line-height: 180%;
.location-item {
cursor: pointer;
display: inline-block;
@ -90,12 +85,14 @@
}
}
}
&:not(.first):before {
&:not(.last) .t-object-label .t-title-label:after {
color: pushBack($colorInspectorFg, 15%);
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size:7px;
font-size: 8px;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;
}
}

16
platform/commonUI/general/res/templates/object-inspector.html
View File

@ -25,18 +25,18 @@
<ul>
<li>
<em>Properties</em>
<table>
<tr ng-repeat="data in metadata">
<td class="label">{{ data.name }}</td>
<td class="value">{{ data.value }}</td>
</tr>
</table>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ first:$index === 0 }">
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
@ -49,7 +49,7 @@
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ first:$index === 0 }">
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"

105
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -1296,70 +1296,83 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
/* line 29, ../../../../general/res/sass/_inspector.scss */
.l-inspect {
background: #3b3b3b;
color: #999; }
/* line 33, ../../../../general/res/sass/_inspector.scss */
color: #999;
line-height: 140%;
/* table tr {
td {
border: none;
border-top: 1px solid $colorInteriorBorder !important;
padding: 2px 0;
vertical-align: top;
&.label {
padding-right: $interiorMargin !important;
white-space: nowrap;
}
}
&:first-child td {
border-top: none !important;
}
}*/ }
/* line 34, ../../../../general/res/sass/_inspector.scss */
.l-inspect .pane-header {
color: #666666;
font-size: 0.8rem; }
/* line 38, ../../../../general/res/sass/_inspector.scss */
/* line 39, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li,
.l-inspect em {
display: block;
position: relative; }
/* line 44, ../../../../general/res/sass/_inspector.scss */
/* line 45, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li {
margin-bottom: 20px; }
/* line 48, ../../../../general/res/sass/_inspector.scss */
margin-bottom: 10px; }
/* line 49, ../../../../general/res/sass/_inspector.scss */
.l-inspect em {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #404040;
color: #999999;
background-color: #474747;
color: #a1a1a1;
margin-bottom: 5px;
padding: 5px 5px;
text-transform: uppercase; }
/* line 58, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td {
border: none;
border-top: 1px solid rgba(153, 153, 153, 0.1) !important;
padding: 2px 0;
vertical-align: top; }
.l-inspect .inspector-properties {
padding: 3px 0; }
/* line 59, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties:not(.first) {
border-top: 1px solid #474747; }
/* line 63, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.label {
color: #666666 !important;
padding-right: 5px !important;
white-space: nowrap; }
/* line 68, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.value {
word-break: break-all; }
/* line 73, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr:first-child td {
border-top: none !important; }
/* line 78, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location {
line-height: 180%; }
/* line 80, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 85, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(153, 153, 153, 0.1);
color: #cccccc; }
/* line 88, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #33ccff; }
/* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.first):before {
.l-inspect .inspector-properties .label {
color: #737373;
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 7px;
width: 4px; }
text-transform: uppercase; }
/* line 67, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties .value {
color: #bfbfbf;
word-break: break-all; }
/* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 98, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(153, 153, 153, 0.1);
color: #cccccc; }
/* line 101, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #33ccff; }
/* line 106, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #737373;
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
line-height: inherit;
margin-left: 3px;
width: 4px; }
/********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */

9
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -74,11 +74,12 @@ $colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%);
// Inspector
$colorInspectorBg: pullForward($colorBodyBg, 3%);
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: $colorInspectorFg;
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%);
$colorInspectorPropName: pushBack($colorBodyFg, 15%);
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Selects
$colorSelectBg: $colorBtnBg;

107
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -1276,71 +1276,84 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
/* line 29, ../../../../general/res/sass/_inspector.scss */
.l-inspect {
background: #f4f4f4;
color: #666; }
/* line 33, ../../../../general/res/sass/_inspector.scss */
background: #efefef;
color: #666;
line-height: 140%;
/* table tr {
td {
border: none;
border-top: 1px solid $colorInteriorBorder !important;
padding: 2px 0;
vertical-align: top;
&.label {
padding-right: $interiorMargin !important;
white-space: nowrap;
}
}
&:first-child td {
border-top: none !important;
}
}*/ }
/* line 34, ../../../../general/res/sass/_inspector.scss */
.l-inspect .pane-header {
color: #999999;
font-size: 0.8rem; }
/* line 38, ../../../../general/res/sass/_inspector.scss */
/* line 39, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li,
.l-inspect em {
display: block;
position: relative; }
/* line 44, ../../../../general/res/sass/_inspector.scss */
/* line 45, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li {
margin-bottom: 20px; }
/* line 48, ../../../../general/res/sass/_inspector.scss */
margin-bottom: 10px; }
/* line 49, ../../../../general/res/sass/_inspector.scss */
.l-inspect em {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #efefef;
color: #969696;
background-color: #e3e3e3;
color: #898989;
margin-bottom: 5px;
padding: 5px 5px;
text-transform: uppercase; }
/* line 58, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td {
border: none;
border-top: 1px solid rgba(102, 102, 102, 0.2) !important;
padding: 2px 0;
vertical-align: top; }
.l-inspect .inspector-properties {
padding: 3px 0; }
/* line 59, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties:not(.first) {
border-top: 1px solid #e3e3e3; }
/* line 63, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.label {
color: #999999 !important;
padding-right: 5px !important;
white-space: nowrap; }
/* line 68, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.value {
.l-inspect .inspector-properties .label {
color: #999999;
text-transform: uppercase; }
/* line 67, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties .value {
color: #404040;
word-break: break-all; }
/* line 73, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr:first-child td {
border-top: none !important; }
/* line 78, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location {
line-height: 180%; }
/* line 80, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 85, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(102, 102, 102, 0.1);
color: #333333; }
/* line 88, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #0099cc; }
/* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.first):before {
color: #8c8c8c;
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 7px;
width: 4px; }
/* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline-block;
position: relative;
padding: 2px 4px; }
/* line 98, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(102, 102, 102, 0.1);
color: #333333; }
/* line 101, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #0099cc; }
/* line 106, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #8c8c8c;
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
line-height: inherit;
margin-left: 3px;
width: 4px; }
/********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */

7
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -76,11 +76,12 @@ $colorSelectBg: #ddd;
$colorSelectFg: $colorBodyFg;
// Inspector
$colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: $colorInspectorFg;
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%);
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Limits and staleness colors//
$colorTelemFresh: pullForward($colorBodyFg, 20%);