mirror of
https://github.com/nasa/openmct.git
synced 2024-12-28 00:48:51 +00:00
[Inspector] Add mct-object-inspector representation
Still having some styling issues though.
This commit is contained in:
slhale
parent
71207d643a
commit
3343475973
@ -71,7 +71,12 @@
|
||||
</mct-splitter>
|
||||
|
||||
<div class='split-pane-component object-inspector pane right'>
|
||||
Info
|
||||
<div class='holder inspector-holder abs'>
|
||||
<mct-representation key="'object-inspector'"
|
||||
mct-object="domainObject"
|
||||
ng-model="treeModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mct-split-pane>
|
||||
|
||||
@ -219,6 +219,10 @@
|
||||
"key": "switcher",
|
||||
"templateUrl": "templates/controls/switcher.html",
|
||||
"uses": [ "view" ]
|
||||
},
|
||||
{
|
||||
"key": "object-inspector",
|
||||
"templateUrl": "templates/object-inspector.html"
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
|
||||
@ -5176,36 +5176,40 @@ input[type="text"] {
|
||||
/* line 98, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right.leftInactive {
|
||||
left: 0 !important; }
|
||||
|
||||
/* line 104, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar {
|
||||
position: relative; }
|
||||
/* line 107, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar .left-pane-tabs {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
left: -10px;
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 10px;
|
||||
top: 3px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background-color: #595959; }
|
||||
/* line 124, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar .left-pane-tabs.inactivePane {
|
||||
left: -15px; }
|
||||
/* line 127, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar .left-pane-tabs.inactivePane:after {
|
||||
content: '>'; }
|
||||
/* line 131, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar .left-pane-tabs.activePane:after {
|
||||
content: '<'; }
|
||||
/* line 136, ../sass/tree/_pane.scss */
|
||||
.object-browse-bar .items-select {
|
||||
margin-left: 10px; }
|
||||
|
||||
/* line 141, ../sass/tree/_pane.scss */
|
||||
.splitter-bar.right {
|
||||
top: 0; }
|
||||
/* line 102, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane {
|
||||
right: auto; }
|
||||
/* line 106, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
|
||||
position: relative; }
|
||||
/* line 109, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
left: -10px;
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 10px;
|
||||
top: 3px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background-color: #595959; }
|
||||
/* line 126, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.inactivePane {
|
||||
left: -15px; }
|
||||
/* line 129, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.inactivePane:after {
|
||||
content: '>'; }
|
||||
/* line 133, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.activePane:after {
|
||||
content: '<'; }
|
||||
/* line 138, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select {
|
||||
margin-left: 10px; }
|
||||
/* line 144, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .splitter-bar.right {
|
||||
top: 0; }
|
||||
/* line 154, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder {
|
||||
min-width: 100px; }
|
||||
|
||||
@ -98,48 +98,69 @@ $transitionTime: 0.35s;
|
||||
&.leftInactive {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.split-pane-component.items.pane {
|
||||
right: auto;
|
||||
|
||||
// Move left tab buttons close to the left splitter bar
|
||||
.object-browse-bar {
|
||||
position: relative;
|
||||
|
||||
// Move left tab buttons close to the left splitter bar
|
||||
.object-browse-bar {
|
||||
position: relative;
|
||||
.left-pane-tabs {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.left-pane-tabs {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
left: -10px;
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 10px;
|
||||
top: 3px;
|
||||
|
||||
left: -10px;
|
||||
width: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 10px;
|
||||
top: 3px;
|
||||
//border-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background-color: darken($colorBodyFg, 25%);
|
||||
|
||||
//border-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
background-color: darken($colorBodyFg, 25%);
|
||||
// Change button icon depending on state
|
||||
&.inactivePane {
|
||||
left: -15px;
|
||||
|
||||
// Change button icon depending on state
|
||||
&.inactivePane {
|
||||
left: -15px;
|
||||
&:after {
|
||||
content: '>';//'F';
|
||||
}
|
||||
}
|
||||
&.activePane:after {
|
||||
content: '<';
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '>';//'F';
|
||||
.items-select {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&.activePane:after {
|
||||
content: '<';
|
||||
}
|
||||
|
||||
.splitter-bar.right {
|
||||
// Make the splitter bar vertically span to the top
|
||||
top: 0;
|
||||
}
|
||||
|
||||
//background-color: skyblue;
|
||||
|
||||
.split-pane-component.object-inspector.pane.right {
|
||||
//background-color: orange;
|
||||
|
||||
.holder.inspector-holder {
|
||||
min-width: 100px;
|
||||
//background-color: purple;
|
||||
|
||||
ul {
|
||||
//color: pink;
|
||||
li {
|
||||
//color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.items-select {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.splitter-bar.right {
|
||||
// Make the splitter bar vertically span to the top
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0.
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
License for the specific language governing permissions and limitations
|
||||
under the License.
|
||||
|
||||
Open MCT Web includes source code licensed under additional open source
|
||||
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
this source code distribution or the Licensing information page available
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Name: {{ ngModel.selectedObject.getModel().name }}
|
||||
</li>
|
||||
<li>
|
||||
Last modified: {{ ngModel.selectedObject.getModel().modified }}
|
||||
</li>
|
||||
</ul>
|
||||
Loading…
Reference in New Issue
Block a user