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

[Frontend] Refactor Inspector to use s-status-editing

Browse Source 
open #468
Removed ng-show="editMode" in object-inspector.html;
Refactored CSS as required in _inspector.scss;
Added opacity transition to splitter-inspect-panel and
split-pane-component pane bottom, but not working as desired currently:
entire inspector seems to be destroyed and recreated when switching into
and out of edit mode;
Moved <style> def for .location-item in object-inspector.html into .scss;
This commit is contained in:
Charles Hacskaylo
2016-01-08 16:47:11 -08:00
parent 898dd557e5
commit a65ca7cb1e
4 changed files with 133 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,7 +97,6 @@
}
.inspector-location {
//line-height: 180%;
.location-item {
cursor: pointer;
display: inline-block;
@@ -142,3 +141,20 @@
}
}
.l-inspect {
.splitter-inspect-panel,
.split-pane-component.pane.bottom {
@include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
opacity: 0;
pointer-events: none;
}
}
.s-status-editing .l-inspect {
.location-item { pointer-events: none; }
.splitter-inspect-panel,
.split-pane-component.pane.bottom {
opacity: 1;
pointer-events: inherit;
}
}

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

@@ -19,11 +19,6 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<style>
.s-status-editing .location-item{
pointer-events: none;
}
</style>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
@@ -69,8 +64,8 @@
</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">
<mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
<div class="split-pane-component pane bottom">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<mct-representation