ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-28 08:58:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Inspector] Add hovertext and scrolling

Browse Source 
Made the inspector capable of scrolling.
Added hovertext to the contextual and
primary location sections for some
clarification. #73.
This commit is contained in:
slhale 2015-08-25 10:18:31 -07:00
parent 33d88ecce0
commit 7a7cabedcc
3 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5256,61 +5256,64 @@ input[type="text"] {
width: 0 !important; width: 0 !important;
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 198, ../sass/tree/_pane.scss */ /* line 197, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder {
color: #0099cc; } overflow-y: auto; }
/* line 202, ../sass/tree/_pane.scss */ /* line 200, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon {
font-size: 0.9em; color: #0099cc; }
padding: 2px 0px; /* line 204, ../sass/tree/_pane.scss */
margin: 2px 0px; .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
border-top: solid 1px grey; } font-size: 0.9em;
/* line 209, ../sass/tree/_pane.scss */ padding: 2px 0px;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child { margin: 2px 0px;
border-top-width: 0px; } border-top: solid 1px grey; }
/* line 214, ../sass/tree/_pane.scss */ /* line 211, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
font-weight: bold; border-top-width: 0px; }
line-height: 1.25em; } /* line 216, ../sass/tree/_pane.scss */
/* line 218, ../sass/tree/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after { font-weight: bold;
content: '\A'; line-height: 1.25em; }
white-space: pre; } /* line 220, ../sass/tree/_pane.scss */
/* line 225, ../sass/tree/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location { content: '\A';
display: inline-block; } white-space: pre; }
/* line 228, ../sass/tree/_pane.scss */ /* line 227, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
cursor: pointer;
display: inline-block;
white-space: nowrap;
transition: background-color 0.2s;
border-radius: 4px;
padding: 3px;
padding-bottom: 0;
margin: 2px;
line-height: 15px; }
/* line 235, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
background-color: #404040; }
/* line 246, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
font-size: 14px; }
/* line 249, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
color: #49dedb;
font-size: 6px;
margin-left: -22px;
margin-right: 4px;
text-shadow: black 0 1px 2px;
z-index: 2; }
/* line 263, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
content: '>';
font-family: symbolsfont;
font-size: 8px;
margin-left: -6px; }
/* line 269, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
content: '';
display: inline-block; } display: inline-block; }
/* line 230, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label {
cursor: pointer;
display: inline-block;
white-space: nowrap;
transition: background-color 0.2s;
border-radius: 4px;
padding: 3px;
padding-bottom: 0;
margin: 2px;
line-height: 15px; }
/* line 237, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
background-color: #404040; }
/* line 248, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
font-size: 14px; }
/* line 251, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
color: #49dedb;
font-size: 6px;
margin-left: -22px;
margin-right: 4px;
text-shadow: black 0 1px 2px;
z-index: 2; }
/* line 265, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
content: '>';
font-family: symbolsfont;
font-size: 8px;
margin-left: -6px; }
/* line 271, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
content: '';
display: inline-block; }

2
platform/commonUI/general/res/sass/tree/_pane.scss
View File

@ -195,6 +195,8 @@ $transitionTime: 0.35s; // For the left menu open/close
} }
.holder.inspector-holder { .holder.inspector-holder {
overflow-y: auto;
.info-icon { .info-icon {
color: $colorKey; color: $colorKey;
} }

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

@ -30,7 +30,9 @@
{{ data.value }} {{ data.value }}
</li> </li>
<li ng-if="contextutalParents.length > 0"> <li ng-if="contextutalParents.length > 0">
<em>Contextual Location </em> <em title="The location of this linked object.">
Contextual Location
</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in contextutalParents"> ng-repeat="parent in contextutalParents">
<mct-representation key="'label'" <mct-representation key="'label'"
@ -41,7 +43,9 @@
</span> </span>
</li> </li>
<li ng-if="primaryParents.length > 0"> <li ng-if="primaryParents.length > 0">
<em>Primary Location </em> <em title="The location of the object that this was linked from.">
Primary Location
</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in primaryParents"> ng-repeat="parent in primaryParents">
<mct-representation key="'label'" <mct-representation key="'label'"