From 9d25e3081f0d96a1e73c13c35efdf35afdb4f278 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 30 Jun 2015 13:23:56 -0700
Subject: [PATCH] [Frontend] Edit mode refactored to use new mct-split-pane

WTD-1404
WTD-1399
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../res/templates/browse/object-header.html   |   2 +-
 .../edit/res/templates/edit-object.html       |  61 +++-----
 platform/commonUI/general/res/css/forms.css   |  49 +++----
 .../general/res/css/theme-espresso.css        | 133 ++++++++++--------
 .../general/res/sass/controls/_controls.scss  |   2 +-
 .../general/res/sass/forms/_elems.scss        |  21 +--
 .../res/sass/user-environ/_layout.scss        |  33 +++--
 .../res/templates/containers/accordion.html   |  14 +-
 9 files changed, 163 insertions(+), 154 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 3671e08ace..3ac082fc59 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -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>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index eb13bb3764..fe521ef188 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -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>
\ No newline at end of file
diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html
index a7073b13a1..651bb03d6f 100644
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -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>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bc7cbac350..a21995d9f3 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -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;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 2b850933fa..d695d60a52 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -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
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 571c9f1146..98a919658e 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -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;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 8bb559a216..a47cdc2484 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -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;
 	}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 4bbfa59069..b70d081289 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -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;
 	}
diff --git a/platform/commonUI/general/res/templates/containers/accordion.html b/platform/commonUI/general/res/templates/containers/accordion.html
index b8348a205f..59db0635b5 100644
--- a/platform/commonUI/general/res/templates/containers/accordion.html
+++ b/platform/commonUI/general/res/templates/containers/accordion.html
@@ -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>
\ No newline at end of file