ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 09:52:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Manual re-do of collapse/expand panes

Browse Source 
open #90
Implementing PaneController;
Added inspection pane and toggle button in
browse-object.html;
This commit is contained in:
Charles Hacskaylo 2015-10-22 14:26:22 -07:00
parent b98c1cdfe8
commit 4f27104663
7 changed files with 111 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -41,9 +41,22 @@
</mct-representation>
</div>
</div>
<mct-split-pane class='t-object-and-inspector contents abs' anchor='right'>
<div class='split-pane-component t-object pane left'>
<mct-representation key="representation.selected.key"
mct-object="representation.selected.key && domainObject"
class="abs object-holder">
</mct-representation>
<a class="ui-symbol icon mobile-hide"
style="position: absolute; z-index: 1000; right: 0;"
ng-click="ngModel.toggle()">F</a>
</div><!--/ t-object -->
<mct-representation key="representation.selected.key"
mct-object="representation.selected.key && domainObject"
class="abs object-holder">
</mct-representation>
<mct-splitter class="mobile-hide" ng-class="{ hidden: !ngModel.visible()}"></mct-splitter>
<div class='split-pane-component t-inspector pane right mobile-hide'
ng-class="{ hidden:!ngModel.visible() }">
Inspector goes here
</div>
</mct-split-pane><!--/ t-object-and-inspector -->
</span>

20
platform/commonUI/browse/res/templates/browse.html
View File

@ -23,9 +23,10 @@
<div class="abs holder-all browse-mode" ng-controller="BrowseController">
<mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper"
ng-controller="PaneController as treePane"
ng-class="treePane.visible() ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'>
ng-controller="PaneController as modelPaneTree"
ng-class="modelPaneTree.visible() ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs'
anchor='left'>
<div class='split-pane-component treeview pane left'>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'"
@ -50,17 +51,18 @@
</div>
</div>
<mct-splitter class="mobile-hide"></mct-splitter>
<mct-splitter class="mobile-hide" ng-class="{ hidden: !modelPaneTree.visible()}"></mct-splitter>
<div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<a class="ui-symbol icon mobile-menu-icon"
style="position: absolute; z-index: 1000"
ng-click="modelPaneTree.toggle()">m</a>
<div class='holder abs l-mobile' id='content-area' ng-controller="PaneController as modelPaneInspect">
<mct-representation mct-object="navigatedObject"
key="'browse-object'">
key="'browse-object'"
ng-model="modelPaneInspect">
</mct-representation>
</div>
<a class="ui-symbol icon mobile-menu-icon"
style="position: absolute; z-index: 1000"
ng-click="treePane.toggle()">m</a>
</div>
</mct-split-pane>
</div>

6
platform/commonUI/browse/src/BrowseController.js
View File

@ -153,12 +153,6 @@ define(
$scope.$on("$destroy", function () {
navigationService.removeListener(setNavigation);
});
// Models for panes
$scope.paneModelTree = {};
$scope.paneModelInspect = {};
}
return BrowseController;

3
platform/commonUI/general/res/sass/_constants.scss
View File

@ -42,7 +42,8 @@ $ueFooterH: 25px;
$ueColMargin: 1.5%;
$ueAppLogoW: 105px;
$ueEditToolBarH: 25px;
$ueBrowseLeftPaneW: 25%;
$ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectW: 10%;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);

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

@ -205,10 +205,17 @@
.browse-mode {
.split-layout {
.split-pane-component.pane.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneW;
.split-pane-component.pane {
&.treeview.left {
min-width: 150px;
max-width: 800px;
width: $ueBrowseLeftPaneTreeW;
}
&.t-inspector.right {
min-width: 150px;
max-width: 800px;
width: $ueBrowseRightPaneInspectW;
}
}
}
}

65
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -3513,40 +3513,45 @@ span.req {
*zoom: 1;
padding: 5px 0; }
/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.left {
/* line 209, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.treeview.left {
min-width: 150px;
max-width: 800px;
width: 25%; }
/* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.t-inspector.right {
min-width: 150px;
max-width: 800px;
width: 10%; }
/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 225, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right {
width: 15%; }
/* line 220, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 227, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
min-height: 50px;
height: 30%; }
/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane {
position: absolute; }
/* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder {
bottom: auto;
top: 0;
height: 24px; }
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 242, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute;
bottom: 5px; }
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder {
top: 34px; }
/* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 64px; }
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -3559,31 +3564,31 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; }
/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 268, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane {
margin-top: 5px; }
/* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child {
margin-top: 0; }
/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane {
margin-left: 5px; }
/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 281, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder {
left: 0;
right: 0; }
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child {
margin-left: 0; }
/* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder {
right: 3px; }
/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder {
overflow: hidden;
top: 34px; }
/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 299, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include {
overflow: auto;
position: absolute;
@ -3593,11 +3598,11 @@ span.req {
left: 0;
width: auto;
height: auto; }
/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn,
@ -3609,12 +3614,12 @@ span.req {
line-height: 25px;
vertical-align: top; }
/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher,
.top-bar .view-switcher {
margin-right: 20px; }
/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar {
overflow: visible;
position: absolute;
@ -3630,41 +3635,41 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 335, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 20px; }
/* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 345, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex {
display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap; }
/* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left {
flex: 1 1 0;
-webkit-flex: 1 1 0;
padding-right: 10px; }
/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree .pane.left.treeview {
opacity: 0; }
/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree .pane.right-repr {
left: 0 !important; }
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-showtree .pane.left.treeview {
-moz-transition-property: opacity;
-o-transition-property: opacity;

65
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -3460,40 +3460,45 @@ span.req {
*zoom: 1;
padding: 5px 0; }
/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.left {
/* line 209, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.treeview.left {
min-width: 150px;
max-width: 800px;
width: 25%; }
/* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.t-inspector.right {
min-width: 150px;
max-width: 800px;
width: 10%; }
/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 225, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right {
width: 15%; }
/* line 220, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 227, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
min-height: 50px;
height: 30%; }
/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane {
position: absolute; }
/* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder {
bottom: auto;
top: 0;
height: 24px; }
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 242, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute;
bottom: 5px; }
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder {
top: 34px; }
/* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 64px; }
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -3506,31 +3511,31 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; }
/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 268, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane {
margin-top: 5px; }
/* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child {
margin-top: 0; }
/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane {
margin-left: 5px; }
/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 281, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder {
left: 0;
right: 0; }
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child {
margin-left: 0; }
/* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder {
right: 3px; }
/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder {
overflow: hidden;
top: 34px; }
/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 299, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include {
overflow: auto;
position: absolute;
@ -3540,11 +3545,11 @@ span.req {
left: 0;
width: auto;
height: auto; }
/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; }
/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn,
@ -3556,12 +3561,12 @@ span.req {
line-height: 25px;
vertical-align: top; }
/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher,
.top-bar .view-switcher {
margin-right: 20px; }
/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar {
overflow: visible;
position: absolute;
@ -3577,41 +3582,41 @@ span.req {
height: 24px;
line-height: 24px;
white-space: nowrap; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 335, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left {
padding-right: 20px; }
/* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 345, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex {
display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap; }
/* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left {
flex: 1 1 0;
-webkit-flex: 1 1 0;
padding-right: 10px; }
/* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree .pane.left.treeview {
opacity: 0; }
/* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-hidetree .pane.right-repr {
left: 0 !important; }
/* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-showtree .pane.left.treeview {
-moz-transition-property: opacity;
-o-transition-property: opacity;