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

[Frontend] Edit mode refactored to use new mct-split-pane

Browse Source 
WTD-1404
WTD-1399
This commit is contained in:
Charles Hacskaylo 2015-06-30 13:23:56 -07:00
parent c24a459f66
commit 9d25e3081f
9 changed files with 163 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<mct-split-pane class='contents abs' anchor='left'>
<div
class='split-pane-component treeview pane'
class='split-pane-component treeview pane left'
>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>

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

@ -25,6 +25,6 @@
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
<span class='type-name'>{{type.getName()}}</span>
<span class='title-label'>{{model.name}}</span>
<!--a id='actions-menu' class='ui-symbol context-available' onclick="alert('Not yet functional. This will display a dropdown menu of options for this object.');">v</a-->
<a id='actions-menu' class='ui-symbol context-available' onclick="alert('Not yet functional. This will display a dropdown menu of options for this object.');">v</a>
</span>
</div>

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

@ -23,74 +23,47 @@
mct-object="domainObject"
ng-model="representation">
</mct-representation>
<div class="holder edit-area abs"
ng-controller="SplitPaneController as vSplitter">
<mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state">
</mct-toolbar>
<div class='split-layout vertical contents abs work-area'>
<div
class='abs pane left edit-main'
ng-style="{ right: (vSplitter.state()+5) + 'px'}"
>
<div class='holder abs object-holder'>
<div class="holder edit-area abs">
<mct-split-pane class='contents abs' anchor='right'>
<div class='split-pane-component pane left edit-main'>
<mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state">
</mct-toolbar>
<div class='holder abs object-holder work-area'>
<mct-representation key="representation.selected.key"
toolbar="toolbar"
mct-object="representation.selected.key && domainObject">
</mct-representation>
</div>
</div>
<!-- MAIN VERTICAL SPLITTER -->
<mct-splitter></mct-splitter>
<div
class="splitter"
ng-style="{ right: vSplitter.state() + 'px'}"
mct-drag-down="vSplitter.startMove()"
mct-drag="vSplitter.move(-delta[0], 100, 1000)"
></div>
<div
class='abs pane right edit-objects menus-to-left'
class='split-pane-component pane right edit-objects menus-to-left'
ng-controller='EditPanesController as editPanes'
ng-style="{ width: (vSplitter.state()-4) + 'px', right: '0px'}"
>
<div
class='holder abs split-layout horizontal'
ng-controller="SplitPaneController as hSplitter"
>
<div
<mct-split-pane class='contents abs' anchor='bottom'>
<div
class="abs pane top accordion"
ng-style="{ bottom: (hSplitter.state()+8) + 'px', top: '0px' }"
ng-controller="ToggleController as toggle"
>
<mct-container key="accordion" title="Library">
<mct-representation key="'tree'"
alias="foo1"
mct-object="editPanes.getRoot()">
</mct-representation>
</mct-container>
</div>
<!-- HORZ SPLITTER -->
<div
class="splitter"
ng-style="{ bottom: hSplitter.state() + 'px', top: 'auto' }"
mct-drag-down="hSplitter.startMove()"
mct-drag="hSplitter.move(-delta[1], 120, 1000)"
>
</div>
<div
<mct-splitter></mct-splitter>
<div
class="abs pane bottom accordion"
ng-style="{ bottom: '0px', height: (hSplitter.state()-4) + 'px'}"
ng-controller="ToggleController as toggle"
>
<mct-container key="accordion" title="Elements">
<mct-representation key="'edit-elements'" mct-object="domainObject">
</mct-representation>
</mct-container>
</div>
</div>
</div>
</mct-split-pane>
</div>
</div>
</mct-split-pane>
</div>

49
platform/commonUI/general/res/css/forms.css
View File

@ -120,8 +120,8 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 24, ../sass/forms/_elems.scss */
.form .section-header {
/* line 22, ../sass/forms/_elems.scss */
.section-header {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
@ -129,13 +129,14 @@
font-size: 0.8em;
margin-top: 5px;
padding: 5px; }
/* line 30, ../sass/forms/_elems.scss */
.form .section-header:first-child {
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
/* line 34, ../sass/forms/_elems.scss */
/* line 35, ../sass/forms/_elems.scss */
.form .form-section {
position: relative; }
/* line 38, ../sass/forms/_elems.scss */
/* line 39, ../sass/forms/_elems.scss */
.form .form-row {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -146,10 +147,10 @@
margin-top: 5px;
padding: 5px;
position: relative; }
/* line 45, ../sass/forms/_elems.scss */
/* line 46, ../sass/forms/_elems.scss */
.form .form-row.first {
border-top: none; }
/* line 49, ../sass/forms/_elems.scss */
/* line 50, ../sass/forms/_elems.scss */
.form .form-row .label,
.form .form-row .controls {
-moz-box-sizing: border-box;
@ -161,47 +162,47 @@
font-size: 0.75rem;
line-height: 22px;
min-height: 22px; }
/* line 60, ../sass/forms/_elems.scss */
/* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label {
float: left;
position: relative;
white-space: nowrap;
width: 20%; }
/* line 68, ../sass/forms/_elems.scss */
/* line 69, ../sass/forms/_elems.scss */
.form .form-row .value {
color: #cccccc; }
/* line 72, ../sass/forms/_elems.scss */
/* line 73, ../sass/forms/_elems.scss */
.form .form-row .controls {
float: left;
position: relative;
width: 79.9%; }
/* line 79, ../sass/forms/_elems.scss */
/* line 80, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block;
line-height: 14px;
margin-right: 5px; }
/* line 88, ../sass/forms/_elems.scss */
/* line 89, ../sass/forms/_elems.scss */
.form .form-row .controls input[type="text"] {
height: 22px;
line-height: 22px;
margin-top: -4px;
vertical-align: baseline; }
/* line 95, ../sass/forms/_elems.scss */
/* line 96, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] {
width: 200px; }
/* line 99, ../sass/forms/_elems.scss */
/* line 100, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] {
width: 50px; }
/* line 103, ../sass/forms/_elems.scss */
/* line 104, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] {
text-align: right; }
/* line 107, ../sass/forms/_elems.scss */
/* line 108, ../sass/forms/_elems.scss */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 112, ../sass/forms/_elems.scss */
/* line 113, ../sass/forms/_elems.scss */
.form .form-row .field-hints {
color: #666666; }
/* line 116, ../sass/forms/_elems.scss */
/* line 117, ../sass/forms/_elems.scss */
.form .form-row .selector-list {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -214,7 +215,7 @@
position: relative;
height: 150px;
overflow: auto; }
/* line 127, ../sass/forms/_elems.scss */
/* line 128, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper {
overflow-y: auto;
position: absolute;
@ -223,24 +224,24 @@
bottom: 5px;
left: 5px; }
/* line 141, ../sass/forms/_elems.scss */
/* line 142, ../sass/forms/_elems.scss */
label.form-control.checkbox input {
margin-right: 5px;
vertical-align: top; }
/* line 147, ../sass/forms/_elems.scss */
/* line 148, ../sass/forms/_elems.scss */
.hint,
.s-hint {
font-size: 0.9em; }
/* line 152, ../sass/forms/_elems.scss */
/* line 153, ../sass/forms/_elems.scss */
.l-result {
display: inline-block;
min-width: 32px;
min-height: 32px;
position: relative;
vertical-align: top; }
/* line 159, ../sass/forms/_elems.scss */
/* line 160, ../sass/forms/_elems.scss */
.l-result div.s-hint {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

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

@ -611,64 +611,71 @@ mct-container {
*zoom: 1;
padding: 5px 0; }
/* line 199, ../sass/user-environ/_layout.scss */
/* line 201, ../sass/user-environ/_layout.scss */
.browse-mode .split-layout .pane.left {
min-width: 150px;
max-width: 50%; }
/* line 210, ../sass/user-environ/_layout.scss */
.edit-mode .split-layout .pane.right {
min-width: 150px;
max-width: 50%; }
/* line 213, ../sass/user-environ/_layout.scss */
.edit-mode .split-layout .pane.right .pane.bottom {
min-height: 50px;
max-height: 80%; }
/* line 221, ../sass/user-environ/_layout.scss */
.pane {
position: absolute; }
/* line 201, ../sass/user-environ/_layout.scss */
.pane.treeview {
min-width: 150px;
max-width: 50%; }
/* line 204, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder {
bottom: auto;
top: 0;
height: 24px; }
/* line 207, ../sass/user-environ/_layout.scss */
.pane.treeview .create-btn-holder .wrapper.menu-element {
position: absolute;
bottom: 5px; }
/* line 212, ../sass/user-environ/_layout.scss */
.pane.treeview .tree-holder {
overflow: auto;
top: 34px;
padding-right: 5px; }
/* line 220, ../sass/user-environ/_layout.scss */
/* line 224, ../sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder {
bottom: auto;
top: 0;
height: 24px; }
/* line 227, ../sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute;
bottom: 5px; }
/* line 232, ../sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder {
overflow: auto;
top: 34px;
padding-right: 5px; }
/* line 240, ../sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
.pane.items .object-browse-bar .right.abs,
.pane.items .object-browse-bar .btn-menu span.right.l-click-area,
.btn-menu .pane.items .object-browse-bar span.right.l-click-area {
top: auto; }
/* line 225, ../sass/user-environ/_layout.scss */
/* line 245, ../sass/user-environ/_layout.scss */
.pane.items .object-holder {
top: 34px; }
/* line 230, ../sass/user-environ/_layout.scss */
.pane.edit-main .object-holder {
top: 0; }
/* line 236, ../sass/user-environ/_layout.scss */
/* line 249, ../sass/user-environ/_layout.scss */
.pane .object-holder {
overflow: auto; }
/* line 244, ../sass/user-environ/_layout.scss */
/* line 257, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane {
margin-top: 5px; }
/* line 247, ../sass/user-environ/_layout.scss */
/* line 260, ../sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child {
margin-top: 0; }
/* line 254, ../sass/user-environ/_layout.scss */
/* line 267, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane {
margin-left: 5px; }
/* line 256, ../sass/user-environ/_layout.scss */
/* line 269, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder {
left: 0;
right: 0; }
/* line 260, ../sass/user-environ/_layout.scss */
/* line 273, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child {
margin-left: 0; }
/* line 262, ../sass/user-environ/_layout.scss */
/* line 275, ../sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder {
right: 3px; }
/* line 271, ../sass/user-environ/_layout.scss */
/* line 284, ../sass/user-environ/_layout.scss */
.vscroll {
overflow-y: auto; }
@ -1922,7 +1929,7 @@ a.l-btn span {
content: "^";
display: block;
font-family: 'symbolsfont';
font-size: 1.2em;
font-size: 0.9em;
position: absolute;
right: 5px;
text-transform: none;
@ -3146,8 +3153,8 @@ label.checkbox.custom {
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* line 24, ../sass/forms/_elems.scss */
.form .section-header {
/* line 22, ../sass/forms/_elems.scss */
.section-header {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
@ -3155,13 +3162,14 @@ label.checkbox.custom {
font-size: 0.8em;
margin-top: 5px;
padding: 5px; }
/* line 30, ../sass/forms/_elems.scss */
.form .section-header:first-child {
/* line 28, ../sass/forms/_elems.scss */
.section-header:first-child {
margin-top: 0; }
/* line 34, ../sass/forms/_elems.scss */
/* line 35, ../sass/forms/_elems.scss */
.form .form-section {
position: relative; }
/* line 38, ../sass/forms/_elems.scss */
/* line 39, ../sass/forms/_elems.scss */
.form .form-row {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@ -3172,10 +3180,10 @@ label.checkbox.custom {
margin-top: 5px;
padding: 5px;
position: relative; }
/* line 45, ../sass/forms/_elems.scss */
/* line 46, ../sass/forms/_elems.scss */
.form .form-row.first {
border-top: none; }
/* line 49, ../sass/forms/_elems.scss */
/* line 50, ../sass/forms/_elems.scss */
.form .form-row .label,
.form .form-row .controls {
-moz-box-sizing: border-box;
@ -3187,47 +3195,47 @@ label.checkbox.custom {
font-size: 0.75rem;
line-height: 22px;
min-height: 22px; }
/* line 60, ../sass/forms/_elems.scss */
/* line 61, ../sass/forms/_elems.scss */
.form .form-row > .label {
float: left;
position: relative;
white-space: nowrap;
width: 20%; }
/* line 68, ../sass/forms/_elems.scss */
/* line 69, ../sass/forms/_elems.scss */
.form .form-row .value {
color: #cccccc; }
/* line 72, ../sass/forms/_elems.scss */
/* line 73, ../sass/forms/_elems.scss */
.form .form-row .controls {
float: left;
position: relative;
width: 79.9%; }
/* line 79, ../sass/forms/_elems.scss */
/* line 80, ../sass/forms/_elems.scss */
.form .form-row .controls .l-composite-control.l-checkbox {
display: inline-block;
line-height: 14px;
margin-right: 5px; }
/* line 88, ../sass/forms/_elems.scss */
/* line 89, ../sass/forms/_elems.scss */
.form .form-row .controls input[type="text"] {
height: 22px;
line-height: 22px;
margin-top: -4px;
vertical-align: baseline; }
/* line 95, ../sass/forms/_elems.scss */
/* line 96, ../sass/forms/_elems.scss */
.form .form-row .controls .l-med input[type="text"] {
width: 200px; }
/* line 99, ../sass/forms/_elems.scss */
/* line 100, ../sass/forms/_elems.scss */
.form .form-row .controls .l-small input[type="text"] {
width: 50px; }
/* line 103, ../sass/forms/_elems.scss */
/* line 104, ../sass/forms/_elems.scss */
.form .form-row .controls .l-numeric input[type="text"] {
text-align: right; }
/* line 107, ../sass/forms/_elems.scss */
/* line 108, ../sass/forms/_elems.scss */
.form .form-row .controls .select {
margin-right: 5px; }
/* line 112, ../sass/forms/_elems.scss */
/* line 113, ../sass/forms/_elems.scss */
.form .form-row .field-hints {
color: #666666; }
/* line 116, ../sass/forms/_elems.scss */
/* line 117, ../sass/forms/_elems.scss */
.form .form-row .selector-list {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -3240,7 +3248,7 @@ label.checkbox.custom {
position: relative;
height: 150px;
overflow: auto; }
/* line 127, ../sass/forms/_elems.scss */
/* line 128, ../sass/forms/_elems.scss */
.form .form-row .selector-list .wrapper {
overflow-y: auto;
position: absolute;
@ -3249,24 +3257,24 @@ label.checkbox.custom {
bottom: 5px;
left: 5px; }
/* line 141, ../sass/forms/_elems.scss */
/* line 142, ../sass/forms/_elems.scss */
label.form-control.checkbox input {
margin-right: 5px;
vertical-align: top; }
/* line 147, ../sass/forms/_elems.scss */
/* line 148, ../sass/forms/_elems.scss */
.hint,
.s-hint {
font-size: 0.9em; }
/* line 152, ../sass/forms/_elems.scss */
/* line 153, ../sass/forms/_elems.scss */
.l-result {
display: inline-block;
min-width: 32px;
min-height: 32px;
position: relative;
vertical-align: top; }
/* line 159, ../sass/forms/_elems.scss */
/* line 160, ../sass/forms/_elems.scss */
.l-result div.s-hint {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
@ -4947,10 +4955,17 @@ input[type="text"] {
height: 100%;
width: 100%; }
/* line 6, ../sass/_initialization.scss */
.browse-mode .split-layout .pane .treeview {
/* line 5, ../sass/_initialization.scss */
.browse-mode .split-layout .pane.left {
width: 15%; }
/* line 13, ../sass/_initialization.scss */
.edit-mode .split-layout .pane.right {
width: 15%; }
/* line 15, ../sass/_initialization.scss */
.edit-mode .split-layout .pane.right .pane.bottom {
height: 30%; }
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space

2
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -79,7 +79,7 @@
content: "^";
display: block;
font-family: 'symbolsfont';
font-size: 1.2em;
font-size: 0.9em;
position: absolute;
right: $interiorMargin;
text-transform: none;

21
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@ -19,18 +19,19 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.section-header {
@include border-radius(3px);
background: rgba(white, 0.1);
font-size: 0.8em;
margin-top: $interiorMargin;
padding: $interiorMargin;
&:first-child {
margin-top: 0;
}
}
.form {
// @include test(orange);
.section-header {
@include border-radius(3px);
background: rgba(white, 0.1);
font-size: 0.8em;
margin-top: $interiorMargin;
padding: $interiorMargin;
&:first-child {
margin-top: 0;
}
}
.form-section {
position: relative;
}

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

@ -196,11 +196,31 @@
}
}
.browse-mode {
.split-layout {
.pane.left {
min-width: 150px;
max-width: 50%;
}
}
}
.edit-mode {
.split-layout {
.pane.right {
min-width: 150px;
max-width: 50%;
.pane.bottom {
min-height: 50px;
max-height: 80%;
}
}
}
}
.pane {
position: absolute;
&.treeview {
min-width: 150px;
max-width: 50%;
&.treeview.left {
.create-btn-holder {
bottom: auto; top: 0;
height: $ueTopBarH;
@ -226,13 +246,6 @@
top: $ueTopBarH + $interiorMarginLg;
}
}
&.edit-main {
.object-holder {
top: 0;
}
}
&.edit-objects {
}
.object-holder {
overflow: auto;
}

14
platform/commonUI/general/res/templates/containers/accordion.html
View File

@ -19,10 +19,16 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<div class="accordion-head" ng-click="toggle.toggle()">
<div
class="accordion-head"
ng-click="toggle.toggle()"
ng-class="{ expanded:!toggle.isActive() }"
>
{{container.title}}
</div>
<div class="accordion-contents"
ng-show="!toggle.isActive()"
ng-transclude>
<div
class="accordion-contents"
ng-show="!toggle.isActive()"
ng-transclude
>
</div>