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

[Frontend] Allow Inspector to utilize split pane during editing

Browse Source 
open #279
IN-PROGRESS
Split pane markup added to object-inspector.html;
Tweaks to layout CSS;
This commit is contained in:
Charles Hacskaylo
2015-11-10 14:40:14 -08:00
parent 62e7adc0b0
commit d712a79ba4
6 changed files with 439 additions and 7403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,6 +43,16 @@
vertical-align: bottom;
}
}
.split-layout {
.split-pane-component.pane {
&.bottom {
height: 30%;
min-height: 20%;
max-height: 80%;
}
}
}
ul {
@include box-sizing(border-box);
@@ -109,4 +119,10 @@
width: 4px;
}
}
}
.holder-elements {
.current-elements {
position: relative;
}
}
}

9
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -309,12 +309,17 @@
top: $bodyMargin;
bottom: $bodyMargin;
}
.holder-inspector-elements {
.holder-inspector {
top: $bodyMargin;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
.holder-elements {
top: 0;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
}
}
}

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

@@ -19,45 +19,64 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div ng-init="editMode = true;"></div>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector-elements l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<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 ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
<div class="split-pane-component pane top">
<div class="abs holder holder-inspector l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<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="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<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="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div><!--/ holder-inspector -->
</div><!--/ split-pane-component -->
<mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
<div class="split-pane-component pane bottom" ng-show="editMode">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<div class="filter flex-elem"><input type="text"></div>
<mct-representation
key="'edit-elements'"
mct-object="domainObject"
class="flex-elem current-elements grows vscroll">
</mct-representation>
</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="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<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="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div>
</mct-split-pane>
</div><!--/ PaneController -->
</span>