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

[Browse] Begin implementing splitter movement

Browse Source 
Begin implementing moveable splitter, WTD-747.
This commit is contained in:
Victor Woeltjen 2015-01-28 16:25:16 -08:00
parent d0de13ca62
commit 06b599ee37
4 changed files with 56 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area outline abs" ng-controller="BrowseController"> <div class="holder browse-area outline abs" ng-controller="BrowseController">
<div class='split-layout vertical contents abs'> <div class='split-layout vertical contents abs'>
<div class='split-pane-component treeview pane' style="width: 200px;"> <div class='split-pane-component treeview pane'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@ -12,13 +12,12 @@
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
<div class="splitter" style="left: 200px"></div> <mct-container key="splitter">
<div class='split-pane-component items pane' style="right:0; left:200px;">
<div class='holder abs' id='content-area'> <div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>
</div> </mct-container>
</div> </div>
</div> </div>
<mct-include key="'bottombar'"></mct-include> <mct-include key="'bottombar'"></mct-include>

8
platform/commonUI/general/bundle.json
View File

@ -84,6 +84,10 @@
"key": "GetterSetterController", "key": "GetterSetterController",
"implementation": "controllers/GetterSetterController.js", "implementation": "controllers/GetterSetterController.js",
"depends": [ "$scope" ] "depends": [ "$scope" ]
},
{
"key": "SplitPaneController",
"implementation": "controllers/SplitPaneController.js"
} }
], ],
"directives": [ "directives": [
@ -108,6 +112,10 @@
"key": "accordion", "key": "accordion",
"templateUrl": "templates/containers/accordion.html", "templateUrl": "templates/containers/accordion.html",
"attributes": [ "title" ] "attributes": [ "title" ]
},
{
"key": "splitter",
"templateUrl": "templates/containers/split-pane.html"
} }
], ],
"representations": [ "representations": [

9
platform/commonUI/general/res/templates/containers/split-pane.html Normal file
View File

@ -0,0 +1,9 @@
<span ng-controller="SplitPaneController as splitter">
<div class="splitter" ng-style="splitter.style()"
mct-drag="splitter.move(delta.x)">
</div>
<div class='split-pane-component items pane' style="right:0;"
ng-style="splitter.style()"
ng-transclude>
</div>
</span>

36
platform/commonUI/general/src/controllers/SplitPaneController.js Normal file
View File

@ -0,0 +1,36 @@
/*global define*/
define(
[],
function () {
"use strict";
function SplitPaneController() {
var minimum = 8,
maximum = 600,
current = 200,
style;
function updateStyle() {
style = { left: current + 'px' };
}
updateStyle();
return {
style: function () {
return style;
},
move: function (delta) {
current = Math.min(
maximum,
Math.max(minimum, current + delta)
);
updateStyle();
}
};
}
return SplitPaneController;
}
);