ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 13:43:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Applied split pane functionality to edit mode

Browse Source 
WTD-1002
SplitPaneController added to edit-object.html;
CSS modded to remove positioning that is now under splitter control;
This commit is contained in:
Charles Hacskaylo 2015-03-06 08:11:27 -08:00
parent 433cdf8b1c
commit feda668e18
5 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
platform/commonUI/edit/res/templates/edit-object.html
View File

@ -10,7 +10,7 @@
<div class='split-layout vertical contents abs work-area' ng-controller="SplitPaneController as vSplitter"> <div class='split-layout vertical contents abs work-area' ng-controller="SplitPaneController as vSplitter">
<div <div
class='abs pane left edit-main' class='abs pane left edit-main'
ng-style="{ right: (vSplitter.state(200) - 8) + 'px'}" ng-style="{ right: (vSplitter.state()+5) + 'px'}"
> >
<div class='holder abs object-holder'> <div class='holder abs object-holder'>
<mct-representation key="representation.selected.key" <mct-representation key="representation.selected.key"
@ -23,15 +23,14 @@
<!-- MAIN VERTICAL SPLITTER --> <!-- MAIN VERTICAL SPLITTER -->
<div <div
class="splitter" class="splitter"
ng-style="{ right: (Splitter.state()-8) + 'px'}" ng-style="{ right: vSplitter.state() + 'px'}"
mct-drag-down="vSplitter.startMove()" mct-drag-down="vSplitter.startMove()"
mct-drag="vSplitter.move(-delta[0], 300, 500)" mct-drag="vSplitter.move(-delta[0], 100, 1000)"
></div> ></div>
<div <div
class='abs pane right edit-objects menus-to-left' class='abs pane right edit-objects menus-to-left'
ng-style="{ width: vSplitter.state() + 'px', right: '0px'}" ng-style="{ width: (vSplitter.state()-4) + 'px', right: '0px'}"
> >
<div <div
class='holder abs split-layout horizontal' class='holder abs split-layout horizontal'
@ -39,7 +38,7 @@
> >
<div <div
class="abs pane top accordion" class="abs pane top accordion"
ng-style="{ bottom: (hSplitter.state(400) + 8) + 'px', top: '0px' }" ng-style="{ bottom: (hSplitter.state()+8) + 'px', top: '0px' }"
ng-controller="ToggleController as toggle" ng-controller="ToggleController as toggle"
> >
<mct-container key="accordion" title="Library"> <mct-container key="accordion" title="Library">
@ -57,7 +56,7 @@
</div> </div>
<div <div
class="abs pane bottom accordion" class="abs pane bottom accordion"
ng-style="{ bottom: '0px', height: (hSplitter.state()) + 'px'}" ng-style="{ bottom: '0px', height: (hSplitter.state()-4) + 'px'}"
ng-controller="ToggleController as toggle" ng-controller="ToggleController as toggle"
> >
<mct-container key="accordion" title="Elements"> <mct-container key="accordion" title="Elements">

60
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -1,5 +1,5 @@
/* CONSTANTS */ /* CONSTANTS */
/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
@ -20,38 +20,38 @@ time, mark, audio, video {
font-size: 100%; font-size: 100%;
vertical-align: baseline; } vertical-align: baseline; }
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html { html {
line-height: 1; } line-height: 1; }
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul { ol, ul {
list-style: none; } list-style: none; }
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td { caption, th, td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } vertical-align: middle; }
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote { q, blockquote {
quotes: none; } quotes: none; }
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after { q:before, q:after, blockquote:before, blockquote:after {
content: ""; content: "";
content: none; } content: none; }
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img { a img {
border: none; } border: none; }
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ /* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; } display: block; }
@ -343,24 +343,24 @@ span {
/* line 182, ../sass/user-environ/_layout.scss */ /* line 182, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 184, ../sass/user-environ/_layout.scss */ /* line 185, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 191, ../sass/user-environ/_layout.scss */ /* line 192, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 193, ../sass/user-environ/_layout.scss */ /* line 194, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 197, ../sass/user-environ/_layout.scss */ /* line 198, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 199, ../sass/user-environ/_layout.scss */ /* line 200, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 5px; } right: 5px; }
/* line 208, ../sass/user-environ/_layout.scss */ /* line 209, ../sass/user-environ/_layout.scss */
.vscroll { .vscroll {
overflow-y: auto; } overflow-y: auto; }
@ -2690,21 +2690,17 @@ input[type="text"] {
right: 0; } right: 0; }
/* line 21, ../sass/helpers/_splitter.scss */ /* line 21, ../sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; bottom: auto; }
height: 70%; }
/* line 25, ../sass/helpers/_splitter.scss */ /* line 25, ../sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; top: auto; }
height: 30%; }
/* line 30, ../sass/helpers/_splitter.scss */ /* line 30, ../sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; width: auto;
height: 5px; height: 5px; }
margin-top: -7px;
top: 70%; }
/* line 99, ../sass/_mixins.scss */ /* line 99, ../sass/_mixins.scss */
.split-layout.horizontal > .splitter:before { .split-layout.horizontal > .splitter:before {
content: ''; content: '';
@ -2733,9 +2729,7 @@ input[type="text"] {
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; width: 5px; }
margin-left: -7px;
left: 85%; }
/* line 99, ../sass/_mixins.scss */ /* line 99, ../sass/_mixins.scss */
.split-layout.vertical > .splitter:before { .split-layout.vertical > .splitter:before {
content: ''; content: '';
@ -2800,10 +2794,10 @@ input[type="text"] {
.wait-spinner { .wait-spinner {
display: block; display: block;
position: absolute; position: absolute;
-webkit-animation: rotation .6s infinite linear; -webkit-animation: rotation 0.6s infinite linear;
-moz-animation: rotation .6s infinite linear; -moz-animation: rotation 0.6s infinite linear;
-o-animation: rotation .6s infinite linear; -o-animation: rotation 0.6s infinite linear;
animation: rotation .6s infinite linear; animation: rotation 0.6s infinite linear;
border-color: rgba(0, 153, 204, 0.25); border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; border-top-color: #0099cc;
border-style: solid; border-style: solid;
@ -2842,10 +2836,10 @@ input[type="text"] {
.treeview .wait-spinner { .treeview .wait-spinner {
display: block; display: block;
position: absolute; position: absolute;
-webkit-animation: rotation .6s infinite linear; -webkit-animation: rotation 0.6s infinite linear;
-moz-animation: rotation .6s infinite linear; -moz-animation: rotation 0.6s infinite linear;
-o-animation: rotation .6s infinite linear; -o-animation: rotation 0.6s infinite linear;
animation: rotation .6s infinite linear; animation: rotation 0.6s infinite linear;
border-color: rgba(0, 153, 204, 0.25); border-color: rgba(0, 153, 204, 0.25);
border-top-color: #0099cc; border-top-color: #0099cc;
border-style: solid; border-style: solid;

12
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@ -20,11 +20,11 @@
right: 0; right: 0;
&.top { &.top {
bottom: auto; bottom: auto;
height: $splitT; // height: $splitT;
} }
&.bottom { &.bottom {
top: auto; top: auto;
height: 100% - $splitT; // height: 100% - $splitT;
} }
} }
>.splitter { >.splitter {
@ -33,8 +33,8 @@
left: 0; right: 0; left: 0; right: 0;
width: auto; width: auto;
height: $splitterD; height: $splitterD;
margin-top: ($splitterD + 2) * -1; // margin-top: ($splitterD + 2) * -1; // Controlled by splitter
top: $splitT; // top: $splitT; // Controlled by splitter
} }
} }
&.vertical { &.vertical {
@ -56,8 +56,8 @@
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: $splitterD; width: $splitterD;
margin-left: ($splitterD + 2) * -1; // margin-left: ($splitterD + 2) * -1; // Controlled by splitter
left: $splitL; // left: $splitL; // Controlled by splitter
} }
} }
} }

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

@ -180,6 +180,7 @@
&.horizontal { &.horizontal {
// Slides up and down // Slides up and down
>.pane { >.pane {
// @include test();
margin-top: $interiorMargin; margin-top: $interiorMargin;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;

2
platform/commonUI/general/src/controllers/SplitPaneController.js
View File

@ -58,6 +58,8 @@ define(
maximum, maximum,
Math.max(minimum, start + delta) Math.max(minimum, start + delta)
); );
//console.log(current + "; minimum: " + minimum + "; max: " + maximum);
} }
}; };
} }