[Frontend] Improve layout of "locator"

Fixes #1118
Locator in Save In, Move, etc. dialog now
expands vertically to use as much vertical as
possible;

platform/commonUI/edit/src/creation/CreateWizard.js

@@ -90,7 +90,9 @@ define(
             // Ensure there is always a "save in" section
             if (includeLocation) {
                 sections.push({
-                    name: 'Location', rows: [{
+                    name: 'Location',
+                    cssclass: "grows",
+                    rows: [{
                         name: "Save In",
                         control: "locator",
                         validate: validateLocation,

platform/commonUI/general/res/sass/_inspector.scss

@@ -71,7 +71,7 @@
         .form {
             margin-bottom: $interiorMarginSm;
             padding-bottom: $interiorMarginLg;
-            .form-section {
+            .l-section-body {
                 margin-bottom: 0;
                 &:not(.first) {
                     border-top: 1px solid $colorFormLines;

platform/commonUI/general/res/sass/forms/_elems.scss

@@ -25,10 +25,20 @@
 
 .form {
 	color: $colorFormText;
+    height: 100%;
     width: 100%;
-	.form-section {
+
+    .l-form-section {
         position: relative;
-		margin-bottom: $interiorMarginLg * 2;
+        &.grows {
+            .l-section-body,
+            .form-row {
+                @include flex(1 1 auto);
+                .wrapper {
+                    height: 100%;
+                }
+            }
+        }
     }
 
     .section-header {
@@ -43,10 +53,14 @@
 	.form-row {
 		$m: $interiorMargin;
 		box-sizing: border-box;
-		@include clearfix;
 		border-top: 1px solid $colorFormLines;
+        margin-bottom: $interiorMarginLg * 2;
 		padding: $formTBPad 0;
 		position: relative;
+        //&ng-form {
+        //    display: block;
+        //}
+
 		&.first {
 			border-top: none;
 		}
@@ -92,9 +106,9 @@
 		.selector-list {
 			// Used in create overlay to display tree view
 			@include nice-input();
-			$h: 150px;
 			position: relative;
-			height: $h;
+            min-height: 150px;
+			height: 100%;
 			>.wrapper {
 				$p: $interiorMargin;
 				overflow: auto;

platform/entanglement/src/actions/AbstractComposeAction.js

@@ -95,7 +95,7 @@ define(
             this.locationService = locationService;
             this.composeService = composeService;
             this.verb = verb || "Compose";
-            this.suffix = suffix || "to a new location";
+            this.suffix = suffix || "To a New Location";
         }
 
         AbstractComposeAction.prototype.cloneContext = function () {

platform/entanglement/src/actions/CopyAction.js

@@ -54,7 +54,7 @@ define(
                 copyService,
                 context,
                 "Duplicate",
-                "to a location"
+                "To a Location"
             );
         }
 

platform/entanglement/src/services/LocationService.js

@@ -58,6 +58,7 @@ define(
                         sections: [
                             {
                                 name: 'Location',
+                                cssclass: "grows",
                                 rows: [
                                     {
                                         name: label,

platform/forms/res/templates/form.html

@@ -19,22 +19,24 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate class="form">
+<form name="mctForm" novalidate class="form l-flex-col">
-    <span ng-repeat="section in structure.sections">
+    <span ng-repeat="section in structure.sections"
-        <div class="section-header" ng-if="section.name">
+          class="l-form-section l-flex-col flex-elem {{ section.cssclass }}">
+        <div class="section-header flex-elem" ng-if="section.name">
             {{section.name}}
         </div>
-        <div class="form-section" ng-class="{ first:$index < 1 }">
+        <ng-form class="form-row validates l-flex-row flex-elem {{ section.cssclass }}"
-            <ng-form name="mctFormInner" ng-repeat="row in section.rows">
-                <div class="form-row validates l-flex-row"
                  ng-class="{
+                 first:$index < 1,
                  req: row.required,
                  valid: mctFormInner.$dirty && mctFormInner.$valid,
                  invalid: mctFormInner.$dirty && !mctFormInner.$valid,
                  first: $index < 1,
                 'l-controls-first': row.layout === 'control-first',
                 'l-controls-under': row.layout === 'controls-under'
-                               }">
+                 }"
+                 name="mctFormInner"
+                 ng-repeat="row in section.rows">
             <div class='label flex-elem' title="{{row.description}}">
                 {{row.name}}
             </div>
@@ -50,8 +52,6 @@
                     </mct-control>
                 </div>
             </div>
-                </div>
         </ng-form>
-        </div>
     </span>
 </form>