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

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

@@ -25,18 +25,18 @@
<ul> <ul>
<li> <li>
<em>Properties</em> <em>Properties</em>
<table> <div class="inspector-properties"
<tr ng-repeat="data in metadata"> ng-repeat="data in metadata"
<td class="label">{{ data.name }}</td> ng-class="{ first:$index === 0 }">
<td class="value">{{ data.value }}</td> <div class="label">{{ data.name }}</div>
</tr> <div class="value">{{ data.value }}</div>
</table> </div>
</li> </li>
<li ng-if="contextutalParents.length > 0"> <li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em> <em title="The location of this linked object.">Location</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in contextutalParents" ng-repeat="parent in contextutalParents"
ng-class="{ first:$index === 0 }"> ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'" <mct-representation key="'label'"
mct-object="parent" mct-object="parent"
ng-model="ngModel" ng-model="ngModel"
@@ -49,7 +49,7 @@
<em title="The location of the original object that this was linked from.">Original Location</em> <em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in primaryParents" ng-repeat="parent in primaryParents"
ng-class="{ first:$index === 0 }"> ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'" <mct-representation key="'label'"
mct-object="parent" mct-object="parent"
ng-model="ngModel" 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 */ /* line 29, ../../../../general/res/sass/_inspector.scss */
.l-inspect { .l-inspect {
background: #3b3b3b; background: #3b3b3b;
color: #999; } color: #999;
/* line 33, ../../../../general/res/sass/_inspector.scss */ 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 { .l-inspect .pane-header {
color: #666666; color: #666666;
font-size: 0.8rem; } font-size: 0.8rem; }
/* line 38, ../../../../general/res/sass/_inspector.scss */ /* line 39, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li, .l-inspect ul li,
.l-inspect em { .l-inspect em {
display: block; display: block;
position: relative; } position: relative; }
/* line 44, ../../../../general/res/sass/_inspector.scss */ /* line 45, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li { .l-inspect ul li {
margin-bottom: 20px; } margin-bottom: 10px; }
/* line 48, ../../../../general/res/sass/_inspector.scss */ /* line 49, ../../../../general/res/sass/_inspector.scss */
.l-inspect em { .l-inspect em {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
background-color: #404040; background-color: #474747;
color: #999999; color: #a1a1a1;
margin-bottom: 5px; margin-bottom: 5px;
padding: 5px 5px; padding: 5px 5px;
text-transform: uppercase; } text-transform: uppercase; }
/* line 58, ../../../../general/res/sass/_inspector.scss */ /* line 58, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td { .l-inspect .inspector-properties {
border: none; padding: 3px 0; }
border-top: 1px solid rgba(153, 153, 153, 0.1) !important; /* line 59, ../../../../general/res/sass/_inspector.scss */
padding: 2px 0; .l-inspect .inspector-properties:not(.first) {
vertical-align: top; } border-top: 1px solid #474747; }
/* line 63, ../../../../general/res/sass/_inspector.scss */ /* line 63, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.label { .l-inspect .inspector-properties .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 {
color: #737373; color: #737373;
content: '\3e'; text-transform: uppercase; }
display: inline-block; /* line 67, ../../../../general/res/sass/_inspector.scss */
font-family: symbolsfont; .l-inspect .inspector-properties .value {
font-size: 7px; color: #bfbfbf;
width: 4px; } 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 */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* 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%); $colorInputIcon: pushBack($colorBodyFg, 15%);
// Inspector // Inspector
$colorInspectorBg: pullForward($colorBodyBg, 3%);
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 15%);
$colorInspectorPropVal: $colorInspectorFg; $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Selects // Selects
$colorSelectBg: $colorBtnBg; $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 */ /* line 29, ../../../../general/res/sass/_inspector.scss */
.l-inspect { .l-inspect {
background: #f4f4f4; background: #efefef;
color: #666; } color: #666;
/* line 33, ../../../../general/res/sass/_inspector.scss */ 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 { .l-inspect .pane-header {
color: #999999; color: #999999;
font-size: 0.8rem; } font-size: 0.8rem; }
/* line 38, ../../../../general/res/sass/_inspector.scss */ /* line 39, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li, .l-inspect ul li,
.l-inspect em { .l-inspect em {
display: block; display: block;
position: relative; } position: relative; }
/* line 44, ../../../../general/res/sass/_inspector.scss */ /* line 45, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li { .l-inspect ul li {
margin-bottom: 20px; } margin-bottom: 10px; }
/* line 48, ../../../../general/res/sass/_inspector.scss */ /* line 49, ../../../../general/res/sass/_inspector.scss */
.l-inspect em { .l-inspect em {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
background-color: #efefef; background-color: #e3e3e3;
color: #969696; color: #898989;
margin-bottom: 5px; margin-bottom: 5px;
padding: 5px 5px; padding: 5px 5px;
text-transform: uppercase; } text-transform: uppercase; }
/* line 58, ../../../../general/res/sass/_inspector.scss */ /* line 58, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td { .l-inspect .inspector-properties {
border: none; padding: 3px 0; }
border-top: 1px solid rgba(102, 102, 102, 0.2) !important; /* line 59, ../../../../general/res/sass/_inspector.scss */
padding: 2px 0; .l-inspect .inspector-properties:not(.first) {
vertical-align: top; } border-top: 1px solid #e3e3e3; }
/* line 63, ../../../../general/res/sass/_inspector.scss */ /* line 63, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr td.label { .l-inspect .inspector-properties .label {
color: #999999 !important; color: #999999;
padding-right: 5px !important; text-transform: uppercase; }
white-space: nowrap; } /* line 67, ../../../../general/res/sass/_inspector.scss */
/* line 68, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-properties .value {
.l-inspect table tr td.value { color: #404040;
word-break: break-all; } word-break: break-all; }
/* line 73, ../../../../general/res/sass/_inspector.scss */ /* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect table tr:first-child td { .l-inspect .inspector-location .location-item {
border-top: none !important; } cursor: pointer;
/* line 78, ../../../../general/res/sass/_inspector.scss */ display: inline-block;
.l-inspect .inspector-location { position: relative;
line-height: 180%; } padding: 2px 4px; }
/* line 80, ../../../../general/res/sass/_inspector.scss */ /* line 98, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item { .l-inspect .inspector-location .location-item:hover {
cursor: pointer; background: rgba(102, 102, 102, 0.1);
display: inline-block; color: #333333; }
position: relative; /* line 101, ../../../../general/res/sass/_inspector.scss */
padding: 2px 4px; } .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
/* line 85, ../../../../general/res/sass/_inspector.scss */ color: #0099cc; }
.l-inspect .inspector-location .location-item:hover { /* line 106, ../../../../general/res/sass/_inspector.scss */
background: rgba(102, 102, 102, 0.1); .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #333333; } color: #8c8c8c;
/* line 88, ../../../../general/res/sass/_inspector.scss */ content: '\3e';
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon { display: inline-block;
color: #0099cc; } font-family: symbolsfont;
/* line 93, ../../../../general/res/sass/_inspector.scss */ font-size: 8px;
.l-inspect .inspector-location:not(.first):before { line-height: inherit;
color: #8c8c8c; margin-left: 3px;
content: '\3e'; width: 4px; }
display: inline-block;
font-family: symbolsfont;
font-size: 7px;
width: 4px; }
/********************************* CONTROLS */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* 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; $colorSelectFg: $colorBodyFg;
// Inspector // Inspector
$colorInspectorBg: pullForward($colorBodyBg, 5%);
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: $colorInspectorFg; $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%); $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%); $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Limits and staleness colors// // Limits and staleness colors//
$colorTelemFresh: pullForward($colorBodyFg, 20%); $colorTelemFresh: pullForward($colorBodyFg, 20%);