mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 05:37:53 +00:00
[Frontend] Applied split pane functionality to edit mode
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
parent
433cdf8b1c
commit
feda668e18
@ -10,7 +10,7 @@
|
||||
<div class='split-layout vertical contents abs work-area' ng-controller="SplitPaneController as vSplitter">
|
||||
<div
|
||||
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'>
|
||||
<mct-representation key="representation.selected.key"
|
||||
@ -23,15 +23,14 @@
|
||||
<!-- MAIN VERTICAL SPLITTER -->
|
||||
<div
|
||||
class="splitter"
|
||||
ng-style="{ right: (Splitter.state()-8) + 'px'}"
|
||||
ng-style="{ right: vSplitter.state() + 'px'}"
|
||||
mct-drag-down="vSplitter.startMove()"
|
||||
mct-drag="vSplitter.move(-delta[0], 300, 500)"
|
||||
mct-drag="vSplitter.move(-delta[0], 100, 1000)"
|
||||
></div>
|
||||
|
||||
|
||||
<div
|
||||
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
|
||||
class='holder abs split-layout horizontal'
|
||||
@ -39,7 +38,7 @@
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<mct-container key="accordion" title="Library">
|
||||
@ -57,7 +56,7 @@
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<mct-container key="accordion" title="Elements">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* 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,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -20,38 +20,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
border-collapse: collapse;
|
||||
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 {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
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 {
|
||||
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 {
|
||||
content: "";
|
||||
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 {
|
||||
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 {
|
||||
display: block; }
|
||||
|
||||
@ -343,24 +343,24 @@ span {
|
||||
/* line 182, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.horizontal > .pane {
|
||||
margin-top: 5px; }
|
||||
/* line 184, ../sass/user-environ/_layout.scss */
|
||||
/* line 185, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.horizontal > .pane:first-child {
|
||||
margin-top: 0; }
|
||||
/* line 191, ../sass/user-environ/_layout.scss */
|
||||
/* line 192, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane {
|
||||
margin-left: 5px; }
|
||||
/* line 193, ../sass/user-environ/_layout.scss */
|
||||
/* line 194, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane > .holder {
|
||||
left: 0;
|
||||
right: 0; }
|
||||
/* line 197, ../sass/user-environ/_layout.scss */
|
||||
/* line 198, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane:first-child {
|
||||
margin-left: 0; }
|
||||
/* line 199, ../sass/user-environ/_layout.scss */
|
||||
/* line 200, ../sass/user-environ/_layout.scss */
|
||||
.split-layout.vertical > .pane:first-child .holder {
|
||||
right: 5px; }
|
||||
|
||||
/* line 208, ../sass/user-environ/_layout.scss */
|
||||
/* line 209, ../sass/user-environ/_layout.scss */
|
||||
.vscroll {
|
||||
overflow-y: auto; }
|
||||
|
||||
@ -2690,21 +2690,17 @@ input[type="text"] {
|
||||
right: 0; }
|
||||
/* line 21, ../sass/helpers/_splitter.scss */
|
||||
.split-layout.horizontal .pane.top {
|
||||
bottom: auto;
|
||||
height: 70%; }
|
||||
bottom: auto; }
|
||||
/* line 25, ../sass/helpers/_splitter.scss */
|
||||
.split-layout.horizontal .pane.bottom {
|
||||
top: auto;
|
||||
height: 30%; }
|
||||
top: auto; }
|
||||
/* line 30, ../sass/helpers/_splitter.scss */
|
||||
.split-layout.horizontal > .splitter {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: 5px;
|
||||
margin-top: -7px;
|
||||
top: 70%; }
|
||||
height: 5px; }
|
||||
/* line 99, ../sass/_mixins.scss */
|
||||
.split-layout.horizontal > .splitter:before {
|
||||
content: '';
|
||||
@ -2733,9 +2729,7 @@ input[type="text"] {
|
||||
.split-layout.vertical > .splitter {
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: 5px;
|
||||
margin-left: -7px;
|
||||
left: 85%; }
|
||||
width: 5px; }
|
||||
/* line 99, ../sass/_mixins.scss */
|
||||
.split-layout.vertical > .splitter:before {
|
||||
content: '';
|
||||
@ -2800,10 +2794,10 @@ input[type="text"] {
|
||||
.wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@ -2842,10 +2836,10 @@ input[type="text"] {
|
||||
.treeview .wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
height: $splitT;
|
||||
// height: $splitT;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
height: 100% - $splitT;
|
||||
// height: 100% - $splitT;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@ -33,8 +33,8 @@
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterD;
|
||||
margin-top: ($splitterD + 2) * -1;
|
||||
top: $splitT;
|
||||
// margin-top: ($splitterD + 2) * -1; // Controlled by splitter
|
||||
// top: $splitT; // Controlled by splitter
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
@ -56,8 +56,8 @@
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterD;
|
||||
margin-left: ($splitterD + 2) * -1;
|
||||
left: $splitL;
|
||||
// margin-left: ($splitterD + 2) * -1; // Controlled by splitter
|
||||
// left: $splitL; // Controlled by splitter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -180,6 +180,7 @@
|
||||
&.horizontal {
|
||||
// Slides up and down
|
||||
>.pane {
|
||||
// @include test();
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
||||
@ -58,6 +58,8 @@ define(
|
||||
maximum,
|
||||
Math.max(minimum, start + delta)
|
||||
);
|
||||
|
||||
//console.log(current + "; minimum: " + minimum + "; max: " + maximum);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user