Merge branch 'open940b' into open929

Merge in Fixed Position updates to reconcile conflicts
related to generalization of selection mechanism, WTD-929.

Conflicts:
	platform/features/layout/src/FixedController.js
	platform/features/layout/test/FixedControllerSpec.js

platform/commonUI/browse/res/templates/browse/object-header.html

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

platform/commonUI/general/res/css/forms.css

@@ -1,4 +1,4 @@
-/* line 2, ../sass/forms/_elems.scss */
+/* line 3, ../sass/forms/_elems.scss */
 .form .section-header {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -9,13 +9,13 @@
   font-size: 0.8em;
   margin-top: 5px;
   padding: 5px; }
-  /* line 8, ../sass/forms/_elems.scss */
+  /* line 9, ../sass/forms/_elems.scss */
   .form .section-header:first-child {
     margin-top: 0; }
-/* line 12, ../sass/forms/_elems.scss */
+/* line 13, ../sass/forms/_elems.scss */
 .form .form-section {
   position: relative; }
-/* line 16, ../sass/forms/_elems.scss */
+/* line 17, ../sass/forms/_elems.scss */
 .form .form-row {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -26,7 +26,7 @@
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 25, ../sass/forms/_elems.scss */
+  /* line 24, ../sass/forms/_elems.scss */
   .form .form-row:first-child {
     border-top: none; }
   /* line 29, ../sass/forms/_elems.scss */
@@ -41,24 +41,34 @@
     font-size: 0.75rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 39, ../sass/forms/_elems.scss */
+  /* line 38, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 46, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 50, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79%; }
-  /* line 58, ../sass/forms/_elems.scss */
+    /* line 55, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-composite-control {
+      display: inline-block; }
+      /* line 57, ../sass/forms/_elems.scss */
+      .form .form-row .controls .l-composite-control.l-checkbox {
+        line-height: 14px;
+        margin-right: 5px; }
+    /* line 65, ../sass/forms/_elems.scss */
+    .form .form-row .controls .select {
+      margin-right: 5px; }
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 62, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -69,7 +79,7 @@
     position: relative;
     height: 150px;
     max-width: 50%; }
-    /* line 70, ../sass/forms/_elems.scss */
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -78,15 +88,35 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 84, ../sass/forms/_elems.scss */
+/* line 96, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 90, ../sass/forms/_elems.scss */
+/* line 103, ../sass/forms/_elems.scss */
-.hint {
+.hint,
+.s-hint {
   font-size: 0.9em; }
 
+/* line 107, ../sass/forms/_elems.scss */
+.l-result {
+  display: inline-block;
+  min-width: 32px;
+  min-height: 32px;
+  position: relative;
+  vertical-align: top; }
+  /* line 114, ../sass/forms/_elems.scss */
+  .l-result div.s-hint {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    background: rgba(255, 153, 0, 0.8);
+    display: block;
+    color: #ffd699;
+    padding: 5px; }
+
 /* line 1, ../sass/forms/_textarea.scss */
 .edit-main textarea {
   -webkit-appearance: none;
@@ -166,30 +196,22 @@ input[type="text"] {
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+  border: none;
   border-top: 1px solid #666666;
   color: #999999;
   display: inline-block;
-  margin-right: 5px;
+  cursor: pointer;
-  margin-top: 1px;
+  display: inline-block;
-  padding: 0 25px 0 0;
+  margin: 0 0 2px 2px;
-  position: relative;
+  position: relative; }
-  overflow: hidden;
+  /* line 127, ../sass/_mixins.scss */
-  vertical-align: middle; }
-  /* line 115, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
     background-image: -webkit-linear-gradient(#666666, #4d4d4d);
     background-image: -moz-linear-gradient(#666666, #4d4d4d);
     background-image: -o-linear-gradient(#666666, #4d4d4d);
     background-image: linear-gradient(#666666, #4d4d4d); }
-  /* line 11, ../sass/forms/_selects.scss */
+  /* line 7, ../sass/forms/_selects.scss */
-  .form-control.select span.arw {
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    right: 8%;
-    top: 10%; }
-  /* line 18, ../sass/forms/_selects.scss */
   .form-control.select select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -197,16 +219,21 @@ input[type="text"] {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    border: none;
+    background: none;
-    box-shadow: none;
+    color: #999999;
-    background-color: transparent;
+    border: none !important;
-    background-image: none;
     cursor: pointer;
-    padding: 3px 5px 4px 5px;
+    padding: 4px 25px 2px 5px; }
-    width: 150%; }
+  /* line 16, ../sass/forms/_selects.scss */
-  /* line 32, ../sass/forms/_selects.scss */
+  .form-control.select:after {
-  .form-control.select select:focus {
+    color: #0099cc;
-    outline: none; }
+    content: "v";
+    display: block;
+    font-family: 'symbolsfont';
+    pointer-events: none;
+    position: absolute;
+    right: 5px;
+    top: 0; }
 
 /* line 2, ../sass/forms/_channel-selector.scss */
 .channel-selector .line {

platform/commonUI/general/res/css/items.css

@@ -24,6 +24,7 @@
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #737373;
     color: #999999;
     display: inline-block;
@@ -35,7 +36,7 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 115, ../sass/_mixins.scss */
+    /* line 127, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959));
       background-image: -webkit-linear-gradient(#737373, #595959);
@@ -109,6 +110,7 @@
       -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+      border: none;
       border-top: 1px solid #33ccff;
       color: #999999;
       display: inline-block;
@@ -118,7 +120,7 @@
       background-image: -o-linear-gradient(#33ccff, #0099cc);
       background-image: linear-gradient(#33ccff, #0099cc);
       color: #80dfff; }
-      /* line 123, ../sass/_mixins.scss */
+      /* line 135, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
         background-image: -webkit-linear-gradient(#66d9ff, #00bfff);

platform/commonUI/general/res/css/theme-espresso.css

@@ -364,6 +364,115 @@ span {
 .vscroll {
   overflow-y: auto; }
 
+/* line 2, ../sass/_fixed-position.scss */
+.t-fixed-position.l-fixed-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto; }
+  /* line 8, ../sass/_fixed-position.scss */
+  .t-fixed-position.l-fixed-position .l-grid-holder {
+    position: relative;
+    height: 100%;
+    width: 100%; }
+    /* line 11, ../sass/_fixed-position.scss */
+    .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+      z-index: 0; }
+      /* line 17, ../sass/_fixed-position.scss */
+      .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
+        background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-repeat: repeat-x; }
+      /* line 21, ../sass/_fixed-position.scss */
+      .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
+        background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
+        background-repeat: repeat-y; }
+/* line 28, ../sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item {
+  position: absolute;
+  border: 1px solid transparent; }
+  /* line 32, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-selected {
+    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    border-color: #0099cc;
+    cursor: move; }
+  /* line 37, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-not-selected {
+    opacity: 0.8; }
+  /* line 43, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-box,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%; }
+  /* line 51, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left top; }
+  /* line 57, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+    border: 1px solid transparent;
+    font-size: 0.8rem; }
+    /* line 62, ../sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
+      padding: 3px; }
+    /* line 67, ../sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
+      overflow: hidden;
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      bottom: 3px;
+      left: 3px;
+      width: auto;
+      height: auto;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 50%; }
+      /* line 71, ../sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
+        right: auto;
+        left: 3px; }
+      /* line 75, ../sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
+        right: 3px;
+        left: auto;
+        text-align: right; }
+        /* line 80, ../sass/_fixed-position.scss */
+        .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
+          left: 3px;
+          width: auto; }
+/* line 91, ../sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item-handle {
+  background: rgba(0, 153, 204, 0.5);
+  cursor: crosshair;
+  border: 1px solid #0099cc;
+  position: absolute; }
+
+/* line 103, ../sass/_fixed-position.scss */
+.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
+  border: 1px dotted rgba(0, 153, 204, 0.5); }
+
 /* line 3, ../sass/_about.scss */
 .t-about {
   line-height: 120%; }
@@ -500,7 +609,7 @@ span {
   display: inline-block;
   font-size: 1rem;
   vertical-align: middle; }
-  /* line 159, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
   .invoke-menu:hover {
     color: #33ccff; }
 
@@ -512,15 +621,16 @@ span {
 /* line 49, ../sass/_icons.scss */
 .icon-buttons-main .invoke-menu {
   color: #666666; }
-  /* line 159, ../sass/_mixins.scss */
+  /* line 171, ../sass/_mixins.scss */
   .icon-buttons-main .invoke-menu:hover {
     color: #999999; }
 
 /* line 57, ../sass/_icons.scss */
 .object-header .type-icon {
-  color: #ffc700; }
+  color: #ffc700;
+  margin-right: 5px; }
 
-/* line 64, ../sass/_icons.scss */
+/* line 65, ../sass/_icons.scss */
 .menu .type-icon,
 .tree-item .type-icon,
 .icon-btn .menu.dropdown .icon,
@@ -652,10 +762,11 @@ span {
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #666666;
     color: #999999;
     display: inline-block; }
-    /* line 70, ../sass/_mixins.scss */
+    /* line 82, ../sass/_mixins.scss */
     .s-btn.s-very-subtle:hover, .s-very-subtle.s-icon-btn:hover {
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
       background-image: -webkit-linear-gradient(#666666, #595959);
@@ -690,6 +801,64 @@ a.l-btn,
 a.l-btn span {
   display: inline-block; }
 
+/* line 1, ../sass/controls/_color-palette.scss */
+.l-color-palette {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 5px !important; }
+  /* line 10, ../sass/controls/_color-palette.scss */
+  .l-color-palette .l-palette-row {
+    overflow: hidden;
+    *zoom: 1;
+    line-height: 16px;
+    width: 170px; }
+    /* line 15, ../sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .l-palette-item {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      text-shadow: rgba(0, 0, 0, 0.8) 0 1px 2px;
+      -webkit-transition-property: visibility, opacity, background-color, border-color;
+      -moz-transition-property: visibility, opacity, background-color, border-color;
+      -o-transition-property: visibility, opacity, background-color, border-color;
+      transition-property: visibility, opacity, background-color, border-color;
+      -webkit-transition-duration: 0.25s;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      transition-duration: 0.25s;
+      -webkit-transition-timing-function: ease-in-out;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      border: 1px solid transparent;
+      color: white;
+      display: block;
+      font-family: 'symbolsfont';
+      float: left;
+      height: 16px;
+      width: 16px;
+      line-height: 16px;
+      margin: 0 1px 1px 0;
+      text-align: center;
+      vertical-align: middle; }
+    /* line 32, ../sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .s-palette-item:hover {
+      -webkit-transition-property: none;
+      -moz-transition-property: none;
+      -o-transition-property: none;
+      transition-property: none;
+      border-color: white !important; }
+    /* line 38, ../sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .l-palette-item-label {
+      margin-left: 5px; }
+    /* line 42, ../sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row.l-option-row {
+      margin-bottom: 5px; }
+      /* line 44, ../sass/controls/_color-palette.scss */
+      .l-color-palette .l-palette-row.l-option-row .s-palette-item {
+        border-color: #999999; }
+
 /* line 3, ../sass/controls/_controls.scss */
 .control.view-control .icon {
   display: inline-block;
@@ -815,6 +984,7 @@ a.l-btn span {
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #33ccff;
     color: #999999;
     display: inline-block;
@@ -824,7 +994,7 @@ a.l-btn span {
     background-image: -o-linear-gradient(#33ccff, #0099cc);
     background-image: linear-gradient(#33ccff, #0099cc);
     color: #ccf2ff; }
-    /* line 123, ../sass/_mixins.scss */
+    /* line 135, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover {
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff));
       background-image: -webkit-linear-gradient(#66d9ff, #00bfff);
@@ -849,6 +1019,7 @@ a.l-btn span {
       -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+      border: none;
       border-top: 1px solid #4dd2ff;
       color: #999999;
       display: inline-block;
@@ -858,7 +1029,7 @@ a.l-btn span {
       background-image: -o-linear-gradient(#4dd2ff, #00ace6);
       background-image: linear-gradient(#4dd2ff, #00ace6);
       color: #ccf2ff; }
-      /* line 123, ../sass/_mixins.scss */
+      /* line 135, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover {
         background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #80dfff), color-stop(100%, #1ac6ff));
         background-image: -webkit-linear-gradient(#80dfff, #1ac6ff);
@@ -892,10 +1063,11 @@ a.l-btn span {
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #999999;
     color: #cccccc;
     display: inline-block; }
-    /* line 115, ../sass/_mixins.scss */
+    /* line 127, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover {
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #999999), color-stop(100%, #808080));
       background-image: -webkit-linear-gradient(#999999, #808080);
@@ -920,10 +1092,11 @@ a.l-btn span {
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #666666;
     color: #b3b3b3;
     display: inline-block; }
-    /* line 115, ../sass/_mixins.scss */
+    /* line 127, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover {
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
       background-image: -webkit-linear-gradient(#666666, #4d4d4d);
@@ -954,6 +1127,13 @@ a.l-btn span {
   margin-left: 5px; }
 
 /* line 157, ../sass/controls/_controls.scss */
+.l-composite-control {
+  vertical-align: middle; }
+  /* line 160, ../sass/controls/_controls.scss */
+  .l-composite-control.l-checkbox .composite-control-label {
+    line-height: 18px; }
+
+/* line 166, ../sass/controls/_controls.scss */
 .control-group {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -961,16 +1141,16 @@ a.l-btn span {
   border-left: 1px solid #4d4d4d;
   padding: 0 5px;
   position: relative; }
-  /* line 164, ../sass/controls/_controls.scss */
+  /* line 173, ../sass/controls/_controls.scss */
   .control-group:first-child {
     border-left: none;
     padding-left: 0; }
 
-/* line 170, ../sass/controls/_controls.scss */
+/* line 179, ../sass/controls/_controls.scss */
 .btn-set {
   display: inline-block;
   position: relative; }
-  /* line 175, ../sass/controls/_controls.scss */
+  /* line 184, ../sass/controls/_controls.scss */
   .btn-set .btn,
   .btn-set .t-btn {
     -webkit-border-radius: 0;
@@ -980,7 +1160,7 @@ a.l-btn span {
     border-radius: 0;
     border-left: 1px solid #666666;
     margin-left: 0; }
-    /* line 179, ../sass/controls/_controls.scss */
+    /* line 188, ../sass/controls/_controls.scss */
     .btn-set .btn:first-child,
     .btn-set .t-btn:first-child {
       border-left: none;
@@ -990,7 +1170,7 @@ a.l-btn span {
       -moz-border-radius-bottomleft: 3px;
       -webkit-border-bottom-left-radius: 3px;
       border-bottom-left-radius: 3px; }
-    /* line 183, ../sass/controls/_controls.scss */
+    /* line 192, ../sass/controls/_controls.scss */
     .btn-set .btn:last-child,
     .btn-set .t-btn:last-child {
       -moz-border-radius-topright: 3px;
@@ -1000,7 +1180,7 @@ a.l-btn span {
       -webkit-border-bottom-right-radius: 3px;
       border-bottom-right-radius: 3px; }
 
-/* line 194, ../sass/controls/_controls.scss */
+/* line 203, ../sass/controls/_controls.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .top-bar .buttons-main .btn,
@@ -1011,7 +1191,7 @@ a.l-btn span {
   font-size: 12.6px;
   height: 28px;
   line-height: 28px; }
-  /* line 200, ../sass/controls/_controls.scss */
+  /* line 209, ../sass/controls/_controls.scss */
   .object-browse-bar .btn .icon:not(.invoke-menu),
   .object-browse-bar .t-btn .icon:not(.invoke-menu),
   .top-bar .buttons-main .btn .icon:not(.invoke-menu),
@@ -1021,21 +1201,22 @@ a.l-btn span {
     font-size: 150%;
     vertical-align: middle; }
 
-/* line 208, ../sass/controls/_controls.scss */
+/* line 217, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
   display: inline-block;
   line-height: 14px;
   margin-right: 20px;
   padding-left: 19px;
-  position: relative; }
+  position: relative;
-  /* line 218, ../sass/controls/_controls.scss */
+  vertical-align: top; }
+  /* line 228, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 223, ../sass/controls/_controls.scss */
+    /* line 233, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -webkit-border-radius: 2.25px;
       -moz-border-radius: 2.25px;
@@ -1056,51 +1237,51 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 241, ../sass/controls/_controls.scss */
+  /* line 251, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 247, ../sass/controls/_controls.scss */
+    /* line 257, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 251, ../sass/controls/_controls.scss */
+  /* line 261, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 253, ../sass/controls/_controls.scss */
+    /* line 263, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 261, ../sass/controls/_controls.scss */
+/* line 271, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 263, ../sass/controls/_controls.scss */
+  /* line 273, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 267, ../sass/controls/_controls.scss */
+  /* line 277, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 270, ../sass/controls/_controls.scss */
+  /* line 280, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 275, ../sass/controls/_controls.scss */
+/* line 285, ../sass/controls/_controls.scss */
 .btn-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 280, ../sass/controls/_controls.scss */
+/* line 290, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 286, ../sass/controls/_controls.scss */
+/* line 296, ../sass/controls/_controls.scss */
 .btn-menu {
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
   background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@@ -1118,51 +1299,52 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+  border: none;
   border-top: 1px solid #666666;
   color: #999999;
   display: inline-block;
   height: 20px;
   line-height: 20px; }
-  /* line 115, ../sass/_mixins.scss */
+  /* line 127, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
     background-image: -webkit-linear-gradient(#666666, #4d4d4d);
     background-image: -moz-linear-gradient(#666666, #4d4d4d);
     background-image: -o-linear-gradient(#666666, #4d4d4d);
     background-image: linear-gradient(#666666, #4d4d4d); }
-  /* line 293, ../sass/controls/_controls.scss */
+  /* line 303, ../sass/controls/_controls.scss */
   .btn-menu.dropdown {
     padding-right: 7px; }
-  /* line 298, ../sass/controls/_controls.scss */
+  /* line 308, ../sass/controls/_controls.scss */
   .btn-menu:not(.disabled):hover {
     color: #cccccc; }
-  /* line 302, ../sass/controls/_controls.scss */
+  /* line 312, ../sass/controls/_controls.scss */
   .btn-menu.btn-invoke-menu {
     color: #0099cc;
     padding: 0 5px; }
-    /* line 306, ../sass/controls/_controls.scss */
+    /* line 316, ../sass/controls/_controls.scss */
     .btn-menu.btn-invoke-menu:hover {
       color: deepskyblue; }
-  /* line 311, ../sass/controls/_controls.scss */
+  /* line 325, ../sass/controls/_controls.scss */
   .btn-menu .type-icon {
     margin-right: 5px; }
-  /* line 314, ../sass/controls/_controls.scss */
+  /* line 328, ../sass/controls/_controls.scss */
   .btn-menu .menu {
     text-align: left; }
-    /* line 317, ../sass/controls/_controls.scss */
+    /* line 331, ../sass/controls/_controls.scss */
     .btn-menu .menu .ui-symbol.icon {
       width: 12px; }
 
-/* line 323, ../sass/controls/_controls.scss */
+/* line 337, ../sass/controls/_controls.scss */
 .top-bar .btn-menu {
   height: 35px;
   line-height: 35px;
   padding-right: 10px; }
-  /* line 331, ../sass/controls/_controls.scss */
+  /* line 345, ../sass/controls/_controls.scss */
   .top-bar .btn-menu.browse-btn {
     margin-right: 5px;
     padding-left: 35px; }
-    /* line 334, ../sass/controls/_controls.scss */
+    /* line 348, ../sass/controls/_controls.scss */
     .top-bar .btn-menu.browse-btn .badge {
       -webkit-border-radius: 4.5px;
       -moz-border-radius: 4.5px;
@@ -1181,31 +1363,30 @@ label.checkbox.custom {
       height: auto; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 351, ../sass/controls/_controls.scss */
+/* line 365, ../sass/controls/_controls.scss */
 .object-header {
   display: inline-block;
   font-size: 1em; }
-  /* line 354, ../sass/controls/_controls.scss */
+  /* line 368, ../sass/controls/_controls.scss */
   .object-header .title {
     color: white; }
-  /* line 357, ../sass/controls/_controls.scss */
+  /* line 371, ../sass/controls/_controls.scss */
   .object-header .type-icon {
     font-size: 1.5em;
     margin-right: 5px;
     vertical-align: middle; }
 
-/* line 366, ../sass/controls/_controls.scss */
+/* line 380, ../sass/controls/_controls.scss */
 .top-bar .object-header,
 .object-browse-bar .object-header {
-  font-size: 1.2em; }
+  font-size: 1.1em; }
-  /* line 368, ../sass/controls/_controls.scss */
+  /* line 382, ../sass/controls/_controls.scss */
   .top-bar .object-header span,
   .object-browse-bar .object-header span {
-    display: inline-block;
+    display: inline-block; }
-    margin-right: 5px; }
 
 /******************************************************** VIEW-CONTROLS */
-/* line 377, ../sass/controls/_controls.scss */
+/* line 391, ../sass/controls/_controls.scss */
 .view-controls .view-type {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -1219,16 +1400,16 @@ label.checkbox.custom {
   line-height: 20px;
   padding-left: 5px;
   padding-right: 5px; }
-  /* line 388, ../sass/controls/_controls.scss */
+  /* line 402, ../sass/controls/_controls.scss */
   .view-controls .view-type.cur {
     background: #666666; }
 
-/* line 393, ../sass/controls/_controls.scss */
+/* line 407, ../sass/controls/_controls.scss */
 .edit-mode .top-bar .control-set.edit-view-controls {
   margin-right: 50px; }
 
 /******************************************************** SLIDERS */
-/* line 404, ../sass/controls/_controls.scss */
+/* line 418, ../sass/controls/_controls.scss */
 .slider .slot {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -1251,7 +1432,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 415, ../sass/controls/_controls.scss */
+/* line 429, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
   background-image: -webkit-linear-gradient(#4d4d4d, #404040);
@@ -1269,6 +1450,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+  border: none;
   border-top: 1px solid #666666;
   color: #999999;
   display: inline-block;
@@ -1280,14 +1462,14 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 115, ../sass/_mixins.scss */
+  /* line 127, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
     background-image: -webkit-linear-gradient(#666666, #4d4d4d);
     background-image: -moz-linear-gradient(#666666, #4d4d4d);
     background-image: -o-linear-gradient(#666666, #4d4d4d);
     background-image: linear-gradient(#666666, #4d4d4d); }
-  /* line 87, ../sass/_mixins.scss */
+  /* line 99, ../sass/_mixins.scss */
   .slider .knob:before {
     content: '';
     display: block;
@@ -1298,15 +1480,15 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 108, ../sass/_mixins.scss */
+  /* line 120, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     border-color: rgba(0, 153, 204, 0.9); }
-  /* line 426, ../sass/controls/_controls.scss */
+  /* line 440, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 433, ../sass/controls/_controls.scss */
+/* line 447, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -1317,12 +1499,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 443, ../sass/controls/_controls.scss */
+  /* line 457, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 451, ../sass/controls/_controls.scss */
+/* line 465, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -1341,7 +1523,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 457, ../sass/controls/_controls.scss */
+/* line 471, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
   background-image: -webkit-linear-gradient(#666666, #595959 20px);
@@ -1360,7 +1542,7 @@ label.checkbox.custom {
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   border-top: 1px solid gray; }
-  /* line 464, ../sass/controls/_controls.scss */
+  /* line 478, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
@@ -1368,7 +1550,7 @@ label.checkbox.custom {
     background-image: -o-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 469, ../sass/controls/_controls.scss */
+/* line 483, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -1408,6 +1590,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+    border: none;
     border-top: 1px solid #737373;
     color: #999999;
     display: inline-block;
@@ -1420,7 +1603,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 167, ../sass/_mixins.scss */
+      /* line 179, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -1535,6 +1718,7 @@ label.checkbox.custom {
       -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
       box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+      border: none;
       border-top: 1px solid #a6a6a6;
       color: #999999;
       display: inline-block; }
@@ -1580,7 +1764,7 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 2, ../sass/forms/_elems.scss */
+/* line 3, ../sass/forms/_elems.scss */
 .form .section-header {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
@@ -1591,13 +1775,13 @@ label.checkbox.custom {
   font-size: 0.8em;
   margin-top: 5px;
   padding: 5px; }
-  /* line 8, ../sass/forms/_elems.scss */
+  /* line 9, ../sass/forms/_elems.scss */
   .form .section-header:first-child {
     margin-top: 0; }
-/* line 12, ../sass/forms/_elems.scss */
+/* line 13, ../sass/forms/_elems.scss */
 .form .form-section {
   position: relative; }
-/* line 16, ../sass/forms/_elems.scss */
+/* line 17, ../sass/forms/_elems.scss */
 .form .form-row {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -1608,7 +1792,7 @@ label.checkbox.custom {
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 25, ../sass/forms/_elems.scss */
+  /* line 24, ../sass/forms/_elems.scss */
   .form .form-row:first-child {
     border-top: none; }
   /* line 29, ../sass/forms/_elems.scss */
@@ -1623,24 +1807,34 @@ label.checkbox.custom {
     font-size: 0.75rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 39, ../sass/forms/_elems.scss */
+  /* line 38, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 46, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 50, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79%; }
-  /* line 58, ../sass/forms/_elems.scss */
+    /* line 55, ../sass/forms/_elems.scss */
+    .form .form-row .controls .l-composite-control {
+      display: inline-block; }
+      /* line 57, ../sass/forms/_elems.scss */
+      .form .form-row .controls .l-composite-control.l-checkbox {
+        line-height: 14px;
+        margin-right: 5px; }
+    /* line 65, ../sass/forms/_elems.scss */
+    .form .form-row .controls .select {
+      margin-right: 5px; }
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 62, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -1651,7 +1845,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     max-width: 50%; }
-    /* line 70, ../sass/forms/_elems.scss */
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -1660,15 +1854,35 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 84, ../sass/forms/_elems.scss */
+/* line 96, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 90, ../sass/forms/_elems.scss */
+/* line 103, ../sass/forms/_elems.scss */
-.hint {
+.hint,
+.s-hint {
   font-size: 0.9em; }
 
+/* line 107, ../sass/forms/_elems.scss */
+.l-result {
+  display: inline-block;
+  min-width: 32px;
+  min-height: 32px;
+  position: relative;
+  vertical-align: top; }
+  /* line 114, ../sass/forms/_elems.scss */
+  .l-result div.s-hint {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    background: rgba(255, 153, 0, 0.8);
+    display: block;
+    color: #ffd699;
+    padding: 5px; }
+
 /* line 4, ../sass/forms/_validation.scss */
 .validates > .label {
   padding-right: 25px; }
@@ -1753,30 +1967,22 @@ input[type="text"] {
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+  border: none;
   border-top: 1px solid #666666;
   color: #999999;
   display: inline-block;
-  margin-right: 5px;
+  cursor: pointer;
-  margin-top: 1px;
+  display: inline-block;
-  padding: 0 25px 0 0;
+  margin: 0 0 2px 2px;
-  position: relative;
+  position: relative; }
-  overflow: hidden;
+  /* line 127, ../sass/_mixins.scss */
-  vertical-align: middle; }
-  /* line 115, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d));
     background-image: -webkit-linear-gradient(#666666, #4d4d4d);
     background-image: -moz-linear-gradient(#666666, #4d4d4d);
     background-image: -o-linear-gradient(#666666, #4d4d4d);
     background-image: linear-gradient(#666666, #4d4d4d); }
-  /* line 11, ../sass/forms/_selects.scss */
+  /* line 7, ../sass/forms/_selects.scss */
-  .form-control.select span.arw {
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    right: 8%;
-    top: 10%; }
-  /* line 18, ../sass/forms/_selects.scss */
   .form-control.select select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -1784,16 +1990,21 @@ input[type="text"] {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    border: none;
+    background: none;
-    box-shadow: none;
+    color: #999999;
-    background-color: transparent;
+    border: none !important;
-    background-image: none;
     cursor: pointer;
-    padding: 3px 5px 4px 5px;
+    padding: 4px 25px 2px 5px; }
-    width: 150%; }
+  /* line 16, ../sass/forms/_selects.scss */
-  /* line 32, ../sass/forms/_selects.scss */
+  .form-control.select:after {
-  .form-control.select select:focus {
+    color: #0099cc;
-    outline: none; }
+    content: "v";
+    display: block;
+    font-family: 'symbolsfont';
+    pointer-events: none;
+    position: absolute;
+    right: 5px;
+    top: 0; }
 
 /* line 2, ../sass/forms/_channel-selector.scss */
 .channel-selector .line {
@@ -1912,7 +2123,7 @@ input[type="text"] {
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
-  display: block;
+  display: inline-block;
   font-size: 1.3em;
   height: 22px;
   line-height: 22px;
@@ -2222,6 +2433,7 @@ input[type="text"] {
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+  border: none;
   border-top: 1px solid #666666;
   color: #999999;
   display: inline-block;
@@ -2488,7 +2700,7 @@ input[type="text"] {
     height: 5px;
     margin-top: -7px;
     top: 70%; }
-    /* line 87, ../sass/_mixins.scss */
+    /* line 99, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       content: '';
       display: block;
@@ -2499,7 +2711,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 108, ../sass/_mixins.scss */
+    /* line 120, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       border-color: rgba(0, 153, 204, 0.9); }
 /* line 42, ../sass/helpers/_splitter.scss */
@@ -2521,7 +2733,7 @@ input[type="text"] {
   width: 5px;
   margin-left: -7px;
   left: 85%; }
-  /* line 87, ../sass/_mixins.scss */
+  /* line 99, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     content: '';
     display: block;
@@ -2532,7 +2744,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 108, ../sass/_mixins.scss */
+  /* line 120, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     border-color: rgba(0, 153, 204, 0.9); }
 

platform/commonUI/general/res/css/tree.css

@@ -2,7 +2,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 167, ../sass/_mixins.scss */
+  /* line 179, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -2,12 +2,12 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg>
 <metadata>
-Created by FontForge 20110222 at Mon Feb 23 21:13:56 2015
+Created by FontForge 20110222 at Thu Feb 26 00:33:43 2015
  By deploy user
 Copyright 2015 Adobe Systems Incorporated. All rights reserved.
 </metadata>
 <defs>
-<font id="WTDSymbols" horiz-adv-x="500" >
+<font id="WTDSymbols" horiz-adv-x="750" >
   <font-face 
     font-family="WTDSymbols"
     font-weight="400"
@@ -23,15 +23,15 @@ Copyright 2015 Adobe Systems Incorporated. All rights reserved.
     underline-position="-50"
     unicode-range="U+0020-2044"
   />
-<missing-glyph 
+<missing-glyph horiz-adv-x="500" 
  />
-    <glyph glyph-name=".notdef" 
+    <glyph glyph-name=".notdef" horiz-adv-x="500" 
  />
     <glyph glyph-name=".null" horiz-adv-x="0" 
  />
     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="333" 
  />
-    <glyph glyph-name="space" unicode=" " 
+    <glyph glyph-name="space" unicode=" " horiz-adv-x="500" 
  />
     <glyph glyph-name="exclam" unicode="!" horiz-adv-x="636" 
 d="M476 730q65 0 112.5 -46.5t47.5 -111.5v-413q0 -66 -47 -112.5t-113 -46.5h-317q-66 0 -112.5 46.5t-46.5 112.5v413q0 65 46.5 111.5t112.5 46.5h317zM405 108v63q0 8 -6.5 13.5t-13.5 5.5h-135q-21 0 -21 -19v-63q0 -10 6.5 -16t14.5 -6h135q7 0 13.5 6.5t6.5 15.5z
@@ -74,7 +74,7 @@ d="M352 0l-352 367l352 368v-735z" />
 d="M352 366l-352 -366v735z" />
     <glyph glyph-name="A" unicode="A" horiz-adv-x="812" 
 d="M446 735l366 -368l-366 -367l-130 130l147 147h-156q-51 -76 -140 -76q-69 0 -118 48.5t-49 117.5t49 117.5t118 48.5q90 0 140 -75h156l-147 146zM167 295q30 0 51 21.5t21 50.5q0 30 -21 51.5t-51 21.5t-52 -21.5t-22 -51.5q0 -29 22.5 -50.5t51.5 -21.5z" />
-    <glyph glyph-name="C" unicode="C" horiz-adv-x="750" 
+    <glyph glyph-name="C" unicode="C" 
 d="M374 750q157 0 266.5 -109t109.5 -267q0 -155 -110 -264.5t-266 -109.5q-154 0 -264 110t-110 264q0 158 109.5 267t264.5 109zM558 281q7 14 3 29.5t-18 22.5l-131 68v260q0 36 -38 36q-16 0 -26 -9.5t-10 -26.5v-309l167 -85q9 -4 20 -4q22 0 33 18z" />
     <glyph glyph-name="D" unicode="D" horiz-adv-x="811" 
 d="M719 418q76 26 92 40v-313q0 -56 -116 -93.5t-287 -37.5t-289.5 37.5t-118.5 93.5v313q57 -30 97 -40q131 -43 311 -43q182 0 311 43zM811 615q0 -55 -117 -95t-286 -40t-288.5 40t-119.5 95q0 52 119.5 89.5t288.5 37.5t286 -37.5t117 -89.5z" />
@@ -90,7 +90,7 @@ q3 -16 3 -50zM361 224q66 0 113 45.5t47 111.5q0 65 -47 112.5t-113 47.5q-65 0 -112
 d="M0 0v700h180v-700h-180zM297 0v700h180v-700h-180zM594 192v508h180v-508h-180z" />
     <glyph glyph-name="I" unicode="I" horiz-adv-x="853" 
 d="M635 582h-439l220 200zM663 209v349l190 -174zM169 558v-349l-191 175zM196 185h439l-219 -199z" />
-    <glyph glyph-name="J" unicode="J" 
+    <glyph glyph-name="J" unicode="J" horiz-adv-x="500" 
  />
     <glyph glyph-name="L" unicode="L" horiz-adv-x="817" 
 d="M0 575q0 67 47 113.5t114 46.5h303v-735h-303q-67 0 -114 47t-47 113v415zM652 735q66 0 113.5 -46.5t47.5 -113.5v-172h-271v332h110zM542 0v324h271v-164q0 -66 -47.5 -113t-113.5 -47h-110z" />
@@ -120,7 +120,7 @@ d="M339 727l340 -236v-491h-340h-339v491zM339 255l252 176l-252 174l-252 -174z" />
     <glyph glyph-name="X" unicode="X" horiz-adv-x="753" 
 d="M471 471v-95h-95v-94h-94v94h-94v95h94v94h94v-94h95zM753 94l-94 -94l-149 149q-81 -55 -181 -55q-137 0 -232 97q-97 95 -97 233q0 137 97 232q95 97 232 97q138 0 233 -97q97 -95 97 -232q0 -100 -55 -181zM329 235q79 0 134 55t55 134q0 78 -55 133t-134 55
 q-78 0 -133 -55t-55 -133q0 -79 55 -134t133 -55z" />
-    <glyph glyph-name="Y" unicode="Y" 
+    <glyph glyph-name="Y" unicode="Y" horiz-adv-x="500" 
 d="M471 471v-95h-283v95h283zM753 94l-94 -94l-149 149q-81 -55 -181 -55q-137 0 -232 97q-97 95 -97 233q0 137 97 232q95 97 232 97q138 0 233 -97q97 -95 97 -232q0 -100 -55 -181zM329 235q79 0 134 55t55 134q0 78 -55 133t-134 55q-78 0 -133 -55t-55 -133
 q0 -79 55 -134t133 -55z" />
     <glyph glyph-name="Z" unicode="Z" horiz-adv-x="808" 
@@ -199,11 +199,25 @@ d="M0 0l131 262l-131 262h91l132 -262l-132 -262h-91z" />
     <glyph glyph-name="asciitilde" unicode="~" horiz-adv-x="799" 
 d="M658 363h141q-36 -150 -70 -227q-28 -58 -58 -88q-45 -46 -102 -48h-7q-55 0 -98 40q-34 31 -60 86q-35 72 -71 222q-35 137 -61 194q-9 18 -17.5 30t-12.5 15t-6 3q-3 0 -8 -4t-14.5 -18t-19.5 -35q-28 -62 -53 -170h-141q36 152 70 227q25 57 58 88q41 42 102 49
 q57 2 105 -40q33 -31 60 -86q34 -73 70 -222q36 -140 62 -194q9 -18 17.5 -30t12.5 -15.5t5 -3.5q15 0 42 57q30 66 54 170z" />
+    <glyph glyph-name="agrave" unicode="&#xe0;" horiz-adv-x="753" 
+d="M752 141q0 -59 -41 -100t-100 -41h-470q-59 0 -100 41t-41 100v470q0 59 41 100t100 41h470q59 0 100 -41t41 -100v-470z" />
+    <glyph glyph-name="aacute" unicode="&#xe1;" 
+d="M750 469l-375 -282l-375 282l375 281zM375 94l312 234l63 -47l-375 -281l-375 281l63 47z" />
+    <glyph glyph-name="acircumflex" unicode="&#xe2;" 
+d="M47 328q-19 0 -33 14t-14 33t14 33t33 14h656q19 0 33 -14t14 -33t-14 -33t-33 -14h-656z" />
+    <glyph glyph-name="atilde" unicode="&#xe3;" horiz-adv-x="749" 
+d="M655 749q39 0 66.5 -27.5t27.5 -66.5v-561q0 -39 -27.5 -66.5t-66.5 -27.5h-561q-39 0 -66.5 27.5t-27.5 66.5v561q0 39 27.5 66.5t66.5 27.5h561zM655 94v561h-561v-561h561zM234 562l187 -188l94 94l94 -94v-234h-469v328z" />
+    <glyph glyph-name="adieresis" unicode="&#xe4;" 
+d="M0 750h750v-94v-47v-47h-94v47h-187v-515h140v-94h-468v94h140v515h-187v-47h-94v47v47v94z" />
+    <glyph glyph-name="aring" unicode="&#xe5;" 
+d="M656 750q39 0 66.5 -27.5t27.5 -66.5v-562q0 -39 -27.5 -66.5t-66.5 -27.5h-562q-39 0 -66.5 27.5t-27.5 66.5v562q0 39 27.5 66.5t66.5 27.5h562zM94 656v-562h234v562h-234zM656 94v562h-234v-562h234z" />
+    <glyph glyph-name="ccedilla" unicode="&#xe7;" 
+d="M656 750q39 0 66.5 -27.5t27.5 -66.5v-562q0 -39 -27.5 -66.5t-66.5 -27.5h-562q-39 0 -66.5 27.5t-27.5 66.5v562q0 39 27.5 66.5t66.5 27.5h562zM656 94v562h-234v-562h234z" />
     <glyph glyph-name="fraction" unicode="&#x2044;" horiz-adv-x="761" 
 d="M380 751q158 0 269.5 -111.5t111.5 -268.5q0 -133 -82.5 -236.5t-209.5 -134.5l-4 491l-176 -490q-126 31 -207.5 134.5t-81.5 235.5q0 157 111.5 268.5t268.5 111.5zM168 488l55 20l-34 94l-56 -20zM410 530v100h-59v-100h59zM593 488l34 94l-55 20l-34 -94z" />
     <glyph glyph-name="H.002" horiz-adv-x="803" 
 d="M0 0v726h187v-726h-187zM308 0v726h187v-726h-187zM616 199v527h187v-527h-187z" />
-    <glyph glyph-name="H.001" 
+    <glyph glyph-name="H.001" horiz-adv-x="500" 
  />
   </font>
 </defs></svg>

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

@@ -23,6 +23,7 @@ $colorFormRequired: #ffc700;
 $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff9900;
+$colorGridLines: rgba(#fff, 0.05);
 
 
 // Ratios

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -0,0 +1,107 @@
+.t-fixed-position {
+	&.l-fixed-position {
+//		@include test(red);
+		position: absolute;
+		top: 0; right: 0; bottom: 0; left: 0;
+		width: auto; height: auto;
+
+		.l-grid-holder {
+			position: relative;
+			height: 100%; width: 100%;
+			.l-grid {
+//				@include test(orange);
+				position: absolute;
+				height: 100%; width: 100%;
+				pointer-events: none;
+				z-index: 0;
+				&.l-grid-x {
+					@include bgTicks($colorGridLines, 'x');
+				}
+
+				&.l-grid-y {
+					@include bgTicks($colorGridLines, 'y');
+				}
+			}
+		}
+	}
+
+	.l-fixed-position-item {
+		position: absolute;
+		border: 1px solid transparent;
+
+		&.s-selected {
+			@include boxShdwLarge();
+			border-color: $colorKey;
+			cursor: move;
+		}
+		&.s-not-selected {
+			opacity: 0.8;
+		}
+
+		.l-fixed-position-box,
+		.l-fixed-position-image,
+		.l-fixed-position-text {
+			@include box-sizing(border-box);
+			height: 100%; width: 100%;
+		}
+
+		.l-fixed-position-box {
+		}
+		
+		.l-fixed-position-image {
+			background-size: cover;
+			background-repeat: no-repeat;
+			background-position: left top;
+		}
+
+		.l-fixed-position-text {
+			@include txtShdwSubtle();
+			border:1px solid transparent;
+			font-size: 0.8rem;
+			$p: $interiorMarginSm;
+			&.l-static-text {
+//				overflow: auto;
+				padding: $p;
+			}
+			&.l-telemetry {
+				.l-elem {
+					@include absPosDefault($p);
+					@include box-sizing(border-box);
+					width: 50%;
+					&.l-title {
+						right: auto;
+						left: $p;
+					}
+					&.l-value {
+//                        @include test(blue);
+						right: $p;
+						left: auto;
+						text-align: right;
+						&.telem-only {
+//							@include test(red);
+							left: $p;
+							width: auto;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.l-fixed-position-item-handle {
+		$brd: 1px solid $colorKey;
+		//		@include border-radius($controlCr);
+		background: rgba($colorKey, 0.5);
+		cursor: crosshair;
+		border: $brd;
+		position: absolute;
+	}
+}
+
+.edit-mode .t-fixed-position {
+	.l-fixed-position-item {
+		&:not(.s-selected):hover {
+			border: 1px dotted rgba($colorKey, 0.5);
+		}
+	}
+}

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

@@ -56,6 +56,7 @@
 
 .object-header .type-icon {
     color: $colorAlt1;
+	margin-right: $interiorMargin;
 }
 
 .menu .type-icon,

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

@@ -9,11 +9,13 @@
 @import "global";
 @import "fonts";
 @import "user-environ/layout";
+@import "fixed-position";
 @import "about";
 @import "badges";
 @import "icons";
 @import "lists/tabular";
 @import "controls/buttons";
+@import "controls/color-palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";

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

@@ -6,9 +6,13 @@
 }
 
 @mixin trans-prop-nice-fade($t: 0.5s) {
-    @include transition-property(visibility, opacity, background-color);
+	@if $t == 0 {
-    @include transition-duration($t);
+		@include transition-property(none);
-    @include transition-timing-function(ease-in-out);
+	} @else {
+		@include transition-property(visibility, opacity, background-color, border-color);
+		@include transition-duration($t);
+		@include transition-timing-function(ease-in-out);
+	}
 }
 
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
@@ -48,13 +52,20 @@
 	background-size: $d $d;
 }
 
-@mixin bgTicks($c: $colorBodyFg) {
+@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-	$c: $c;
+	$deg: 90deg;
-	@include background-image(linear-gradient(90deg,
+	@if ($repeatDir != 'x') {
+		$deg: 0deg;
+		$repeatDir: repeat-y;
+	} @else {
+		$repeatDir: repeat-x;
+	}
+
+	@include background-image(linear-gradient($deg,
 		$c 1px, transparent 1px,
 		transparent 100%
 	));
-	background-repeat: repeat-x;
+	background-repeat: $repeatDir;
 }
 
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@@ -63,6 +74,7 @@
 	@include box-sizing(border-box);
 //	@include box-shadow(rgba(black, 0.3) 0 1px 2px);
 	@include boxShdwSubtle();
+	border: none;
 	border-top: 1px solid lighten($bg, 20%);
 	color: $fg;
 	display: inline-block;

platform/commonUI/general/res/sass/controls/_color-palette.scss

@@ -0,0 +1,55 @@
+.l-color-palette {
+	$d: 16px;
+	$colorsPerRow: 10;
+	$m: 1;
+	$colorSelectedColor: #fff;
+
+	@include box-sizing(border-box);
+	padding: $interiorMargin !important;
+
+	.l-palette-row {
+		@include clearfix;
+		line-height: $d;
+		width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
+
+		.l-palette-item {
+			@include box-sizing(border-box);
+			@include txtShdwSubtle(0.8);
+			@include trans-prop-nice-fade(0.25s);
+			border: 1px solid transparent;
+			color: $colorSelectedColor;
+			display: block;
+			font-family: 'symbolsfont';
+			float: left;
+			height: $d; width: $d;
+			line-height: $d;
+			margin: 0 ($m * 1px) ($m * 1px) 0;
+			text-align: center;
+			vertical-align: middle;
+		}
+
+		.s-palette-item {
+			&:hover {
+				@include trans-prop-nice-fade(0);
+				border-color: $colorSelectedColor !important;
+			}
+		}
+
+		.l-palette-item-label {
+			margin-left: $interiorMargin;
+		}
+
+		&.l-option-row {
+			margin-bottom: $interiorMargin;
+			.s-palette-item {
+				border-color: $colorBodyFg;
+			}
+		}
+	}
+
+
+
+
+
+
+}

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -154,6 +154,15 @@
 	}
 }
 
+.l-composite-control {
+	vertical-align: middle;
+	&.l-checkbox {
+		.composite-control-label {
+			line-height: 18px;
+		}
+	}
+}
+
 .control-group {
 	// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
 	//	@include test();
@@ -215,6 +224,7 @@ label.checkbox.custom {
 	margin-right: $interiorMargin * 4;
 	padding-left: $d + $interiorMargin;
 	position: relative;
+	vertical-align: top;
 	em {
 		color: $colorBodyFg;
 		display: inline-block;
@@ -308,6 +318,10 @@ label.checkbox.custom {
 		}
 	}
 
+    .l-click-area {
+//        @include test();
+    }
+
 	.type-icon {
 		margin-right: $interiorMargin;
 	}
@@ -364,10 +378,10 @@ label.checkbox.custom {
 .top-bar,
 .object-browse-bar {
 	.object-header {
-		font-size: 1.2em;
+		font-size: 1.1em;
 		span {
 			display: inline-block;
-			margin-right: $interiorMargin;
+//			margin-right: $interiorMargin;
 		}
 	}
 }

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

@@ -1,4 +1,5 @@
 .form {
+//	@include test(orange);
 	.section-header {
 		@include border-radius(3px);
 		background: rgba(white, 0.1);
@@ -16,18 +17,16 @@
 	.form-row {
 		@include box-sizing(border-box);
 		@include clearfix;
-		//		background: rgba(#00ff00, 0.1);
 		border-top: 1px solid $colorInteriorBorder;
-		//		box-sizing: border-box;
 		margin-top: $interiorMargin;
 		padding: $interiorMargin;
 		position: relative;
 		&:first-child {
 			border-top: none;
 		}
+
 		.label,
 		.controls {
-			//			background: rgba(#ffcc00, 0.1);
 			@include box-sizing(border-box);
 			@include clearfix;
 			box-sizing: border-box;
@@ -50,9 +49,22 @@
 
 		.controls {
 			float: left;
-//			padding-left: $interiorMargin;
             position: relative;
 			width: 99% - $formLabelW; // Start with less than 100% for Firefox
+
+			.l-composite-control {
+				display: inline-block;
+				&.l-checkbox {
+//					@include test();
+//					height: $formRowCtrlsH;
+					line-height: $formRowCtrlsH;
+					margin-right: 5px;
+				}
+			}
+
+			.select {
+				margin-right: $interiorMargin;
+			}
 		}
 
 		.field-hints {
@@ -87,6 +99,23 @@ label.form-control.checkbox {
 	}
 }
 
-.hint {
+.hint,
+.s-hint {
 	font-size: 0.9em;
 }
+
+.l-result {
+	// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
+	display: inline-block;
+	min-width: 32px; min-height: 32px;
+	position: relative;
+	vertical-align: top;
+
+	div.s-hint {
+		@include border-radius($basicCr);
+		background: rgba($colorFormInvalid, 0.8);
+		display: block;
+		color: lighten($colorFormInvalid, 30%);
+		padding: $interiorMargin;
+	}
+}

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

@@ -20,7 +20,7 @@
 	}
 	.icon.ui-symbol {
 		@include border-radius($controlCr);
-		display: block;
+		display: inline-block;
 		font-size: 1.3em;
 		height: $formInputH;
 		line-height: $formInputH;

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

@@ -1,35 +1,26 @@
 .form-control.select {
-	$myH: $formInputH + 1;
 	@include btnSubtle($colorBodyBg);
-	margin-right: $interiorMargin;
+	cursor: pointer;
-	margin-top: 1px;
+	display: inline-block;
-	padding: 0 25px 0 0;
+	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
 	position: relative;
-	overflow: hidden;
-	vertical-align: middle;
-	
-	span.arw {
-		display: block;
-		pointer-events: none;
-		position: absolute;
-		right: 8%; top: 10%;
-	}
-
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
-		border: none;
+		background: none;
-		box-shadow: none;
+		color: $colorBodyFg;
-		background-color: transparent;
+		border: none !important;
-		background-image: none;
 		cursor: pointer;
-//		height: $myH;
+		padding: 4px 25px 2px 5px;
-//		line-height: $myH;
-		padding: 3px 5px 4px 5px;
-		width: 150%;
 	}
-
+	&:after {
-	select:focus {
+		color: $colorKey;
-		outline: none;
+		content:"v";
+		display: block;
+		font-family: 'symbolsfont';
+		pointer-events: none;
+		position: absolute;
+		right: $interiorMargin; top: 0;
+//		z-index: 2;
 	}
 }

platform/commonUI/general/res/templates/controls/action-button.html

@@ -1,5 +1,4 @@
-<a href=""
+<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
-   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">

platform/commonUI/general/res/templates/controls/switcher.html

@@ -24,10 +24,11 @@
         </div>
     </div>
 
-    <span class="btn"
+	<!-- CH commented out 2/24/15 - really don't think we need this. Single view is what it is. -->
+    <!--span class="btn"
           ng-if="view.length === 1">
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
         <span>{{ngModel.selected.name}}</span>
-    </span>
+    </span-->
 
 </span>

platform/features/layout/bundle.json

@@ -32,22 +32,22 @@
                                     "options": [
                                         {
                                             "name": "Box",
-                                            "glyph": "\u2610",
+                                            "glyph": "\u00E0",
                                             "key": "fixed.box"
                                         },
                                         {
                                             "name": "Line",
-                                            "glyph": "-",
+                                            "glyph": "\u00E2",
                                             "key": "fixed.line"
                                         },
                                         {
                                             "name": "Text",
-                                            "glyph": "\u1D1B",
+                                            "glyph": "\u00E4",
                                             "key": "fixed.text"
                                         },
                                         {
                                             "name": "Image",
-                                            "glyph": "\u2353",
+                                            "glyph": "\u00E3",
                                             "key": "fixed.image"
                                         }
                                     ]
@@ -58,7 +58,7 @@
                             "items": [
                                 {
                                     "method": "order",
-                                    "glyph": "o",
+                                    "glyph": "\u00E1",
                                     "control": "menu-button",
                                     "options": [
                                         {
@@ -85,23 +85,23 @@
                                 },
                                 {
                                     "property": "fill",
-                                    "glyph": "X",
+                                    "glyph": "\u00E0",
                                     "control": "color"
                                 },
                                 {
                                     "property": "stroke",
-                                    "glyph": "-",
+                                    "glyph": "\u00E2",
                                     "control": "color"
                                 },
                                 {
                                     "property": "color",
-                                    "glyph": "\u1D1B",
+                                    "glyph": "\u00E4",
                                     "mandatory": true,
                                     "control": "color"
                                 },
                                 {
                                     "property": "url",
-                                    "glyph": "\u2353",
+                                    "glyph": "\u00E3",
                                     "control": "dialog-button",
                                     "title": "Image Properties",
                                     "dialog": {
@@ -123,13 +123,13 @@
                                 },
                                 {
                                     "method": "showTitle",
-                                    "glyph": "+",
+                                    "glyph": "\u00E7",
                                     "control": "button",
                                     "description": "Show telemetry element title."
                                 },
                                 {
                                     "method": "hideTitle",
-                                    "glyph": "X",
+                                    "glyph": "\u00E5",
                                     "control": "button",
                                     "description": "Hide telemetry element title."
                                 }

platform/features/layout/res/templates/elements/box.html

@@ -1,3 +1,5 @@
-<div ng-style="{ background: ngModel.fill(), border: '1px ' + ngModel.stroke() + ' solid' }"
+<div
-     style="width: 100%; height: 100%;">
+	class="l-fixed-position-box"
+	ng-style="{ background: ngModel.fill(), border: '1px ' + ngModel.stroke() + ' solid' }"
+	>
 </div>

platform/features/layout/res/templates/elements/image.html

@@ -1,3 +1,5 @@
-<div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
+<div
-     style="width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;">
+	ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
+    class="l-fixed-position-image"
+	>
 </div>

platform/features/layout/res/templates/elements/telemetry.html

@@ -1,10 +1,17 @@
-<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
+<div
-     style="width: 100%; height: 100%;">
+	class="l-fixed-position-text l-telemetry"
-    <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;"
+	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
-         ng-show="ngModel.element.titled">
+	>
+    <div
+	    class="l-elem l-title"
+         ng-show="ngModel.element.titled"
+	    >
         {{ngModel.name}}
     </div>
-    <div style="position: absolute; right: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;">
+    <div
+	    class="l-elem l-value"
+	    ng-class="{ 'telem-only': !ngModel.element.titled }"
+	    >
         {{ngModel.value}}
     </div>
 </div>

platform/features/layout/res/templates/elements/text.html

@@ -1,4 +1,6 @@
-<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
+<div
-     style="width: 100%; height: 100%; overflow: hidden;">
+	class="l-fixed-position-text l-static-text"
+	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
+	>
     {{ngModel.element.text}}
 </div>

platform/features/layout/res/templates/fixed.html

@@ -1,26 +1,42 @@
-<div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"
+<div class="t-fixed-position l-fixed-position"
      ng-controller="FixedController as controller"
      mct-resize="controller.setBounds(bounds)">
 
     <!-- Background grid -->
-    <span ng-click="controller.clearSelection()">
+    <div class="l-grid-holder" ng-click="controller.clearSelection()">
-        <div ng-repeat="cell in controller.getCellStyles()"
+	    <div class="l-grid l-grid-x"
-             style="position: absolute; border: 1px gray solid; background: black;"
+             ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
-             ng-style="cell">
+	    <div class="l-grid l-grid-y"
+             ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
+    </div>
+
+    <!-- Fixed position elements -->
+    <div ng-repeat="element in controller.getElements()"
+         class="l-fixed-position-item"
+         ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
+         ng-style="element.style"
+         ng-click="controller.select(element)">
+        <mct-include key="element.template"
+                     parameters="{ gridSize: controller.getGridSize() }"
+                     ng-model="element">
+        </mct-include>
+    </div>
+
+    <!-- Selection highlight, handles -->
+    <span ng-if="controller.selected()">
+        <div class="l-fixed-position-item s-selected"
+             mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
+             mct-drag="controller.moveHandle().continueDrag(delta)"
+             mct-drag-up="controller.moveHandle().endDrag()"
+             ng-style="controller.selected().style">
+        </div>
+        <div ng-repeat="handle in controller.handles()"
+             class="l-fixed-position-item-handle"
+             ng-style="handle.style()"
+             mct-drag-down="handle.startDrag()"
+             mct-drag="handle.continueDrag(delta)"
+             mct-drag-up="handle.endDrag()">
         </div>
     </span>
 
-    <!-- Fixed position elements -->
-    <mct-include ng-repeat="element in controller.getElements()"
-                 style="position: absolute;"
-                 key="element.template"
-                 parameters="{ gridSize: controller.getGridSize() }"
-                 ng-class="{ test: controller.selected(element) }"
-                 ng-style="element.style"
-                 ng-click="controller.select(element)"
-                 ng-model="element"
-                 mct-drag-down="controller.startDrag(element); controller.select(element)"
-                 mct-drag="controller.continueDrag(delta)"
-                 mct-drag-up="controller.endDrag()">
-    </mct-include>
 </div>

platform/features/layout/src/FixedController.js

@@ -1,8 +1,8 @@
 /*global define*/
 
 define(
-    ['./LayoutDrag', './FixedProxy', './elements/ElementProxies'],
+    ['./FixedProxy', './elements/ElementProxies', './FixedDragHandle'],
-    function (LayoutDrag, FixedProxy, ElementProxies) {
+    function (FixedProxy, ElementProxies, FixedDragHandle) {
         "use strict";
 
         var DEFAULT_DIMENSIONS = [ 2, 1 ],
@@ -27,6 +27,8 @@ define(
                 names = {}, // Cache names by ID
                 values = {}, // Cache values by ID
                 elementProxiesById = {},
+                handles = [],
+                moveHandle,
                 selection;
 
             // Refresh cell styles (e.g. because grid extent changed)
@@ -64,6 +66,40 @@ define(
                 };
             }
 
+            // Update the style for a selected element
+            function updateSelectionStyle() {
+                var element = selection && selection.get();
+                if (element) {
+                    element.style = convertPosition(element);
+                }
+            }
+
+            // Generate a specific drag handle
+            function generateDragHandle(elementHandle) {
+                return new FixedDragHandle(
+                    elementHandle,
+                    gridSize,
+                    updateSelectionStyle,
+                    $scope.commit
+                );
+            }
+
+            // Generate drag handles for an element
+            function generateDragHandles(element) {
+                return element.handles().map(generateDragHandle);
+            }
+
+            // Select an element
+            function select(element) {
+                if (selection) {
+                    // Update selection...
+                    selection.select(element);
+                    // ...as well as move, resize handles
+                    moveHandle = generateDragHandle(element);
+                    handles = generateDragHandles(element);
+                }
+            }
+
             // Update the displayed value for this object
             function updateValue(telemetryObject) {
                 var id = telemetryObject && telemetryObject.getId();
@@ -121,7 +157,7 @@ define(
                 if (selection) {
                     selection.deselect();
                     if (index > -1) {
-                        selection.select(elementProxies[index]);
+                        select(elementProxies[index]);
                     }
                 }
 
@@ -183,9 +219,7 @@ define(
                 // Refresh displayed elements
                 refreshElements();
                 // Select the newly-added element
-                if (selection) {
+                select(elementProxies[elementProxies.length - 1]);
-                    selection.select(elementProxies[elementProxies.length - 1]);
-                }
                 // Mark change as persistable
                 if ($scope.commit) {
                     $scope.commit("Dropped an element.");
@@ -201,7 +235,7 @@ define(
                     y: Math.floor(position.y / gridSize[1]),
                     id: id,
                     stroke: "transparent",
-                    color: "#717171",
+                    color: "#cccccc",
                     titled: true,
                     width: DEFAULT_DIMENSIONS[0],
                     height: DEFAULT_DIMENSIONS[1]
@@ -274,82 +308,42 @@ define(
                     return elementProxies;
                 },
                 /**
-                 * Check if the element is currently selected.
+                 * Check if the element is currently selected, or (if no
+                 * argument is supplied) get the currently selected element.
                  * @returns {boolean} true if selected
                  */
                 selected: function (element) {
-                    return selection && selection.selected(element);
+                    return selection && ((arguments.length > 0) ?
+                            selection.selected(element) : selection.get());
                 },
                 /**
                  * Set the active user selection in this view.
                  * @param element the element to select
                  */
-                select: function (element) {
+                select: select,
-                    if (selection) {
-                        selection.select(element);
-                    }
-                },
                 /**
                  * Clear the current user selection.
                  */
                 clearSelection: function () {
                     if (selection) {
                         selection.deselect();
+                        handles = [];
+                        moveHandle = undefined;
                     }
                 },
                 /**
-                 * Start a drag gesture to move/resize a frame.
+                 * Get drag handles.
-                 *
+                 * @returns {Array} drag handles for the current selection
-                 * The provided position and dimensions factors will determine
-                 * whether this is a move or a resize, and what type it
-                 * will be. For instance, a position factor of [1, 1]
-                 * will move a frame along with the mouse as the drag
-                 * proceeds, while a dimension factor of [0, 0] will leave
-                 * dimensions unchanged. Combining these in different
-                 * ways results in different handles; a position factor of
-                 * [1, 0] and a dimensions factor of [-1, 0] will implement
-                 * a left-edge resize, as the horizontal position will move
-                 * with the mouse while the horizontal dimensions shrink in
-                 * kind (and vertical properties remain unmodified.)
-                 *
-                 * @param element the raw (undecorated) element to drag
                  */
-                startDrag: function (element) {
+                handles: function () {
-                    // Only allow dragging in edit mode
+                    return handles;
-                    if ($scope.domainObject &&
-                            $scope.domainObject.hasCapability('editor')) {
-                        dragging = {
-                            element: element,
-                            x: element.x(),
-                            y: element.y()
-                        };
-                    }
                 },
                 /**
-                 * Continue an active drag gesture.
+                 * Get the handle to handle dragging to reposition an element.
-                 * @param {number[]} delta the offset, in pixels,
+                 * @returns {FixedDragHandle} the drag handle
-                 *        of the current pointer position, relative
-                 *        to its position when the drag started
                  */
-                continueDrag: function (delta) {
+                moveHandle: function () {
-                    if (dragging) {
+                    return moveHandle;
-                        // Update x/y values
-                        dragging.element.x(dragging.x + Math.round(delta[0] / gridSize[0]));
-                        dragging.element.y(dragging.y + Math.round(delta[1] / gridSize[1]));
-                        // Update display position
-                        dragging.element.style = convertPosition(dragging.element);
-                    }
-                },
-                /**
-                 * End the active drag gesture. This will update the
-                 * view configuration.
-                 */
-                endDrag: function () {
-                    // Mark this object as dirty to encourage persistence
-                    if (dragging && $scope.commit) {
-                        dragging = undefined;
-                        $scope.commit("Moved element.");
-                    }
                 }
             };
 

platform/features/layout/src/FixedDragHandle.js

@@ -0,0 +1,96 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+
+        // Drag handle dimensions
+        var DRAG_HANDLE_SIZE = [ 6, 6 ];
+
+        /**
+         * Template-displayable drag handle for an element in fixed
+         * position mode.
+         * @constructor
+         */
+        function FixedDragHandle(elementHandle, gridSize, update, commit) {
+            var self = {},
+                dragging;
+
+            // Generate ng-style-appropriate style for positioning
+            function getStyle() {
+                // Adjust from grid to pixel coordinates
+                var x = elementHandle.x() * gridSize[0],
+                    y = elementHandle.y() * gridSize[1];
+
+                // Convert to a CSS style centered on that point
+                return {
+                    left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px',
+                    top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px',
+                    width: DRAG_HANDLE_SIZE[0] + 'px',
+                    height: DRAG_HANDLE_SIZE[1] + 'px'
+                };
+            }
+
+            // Begin a drag gesture
+            function startDrag() {
+                // Cache initial x/y positions
+                dragging = { x: elementHandle.x(), y: elementHandle.y() };
+            }
+
+            // Reposition during drag
+            function continueDrag(delta) {
+                if (dragging) {
+                    // Update x/y positions (snapping to grid)
+                    elementHandle.x(
+                        dragging.x + Math.round(delta[0] / gridSize[0])
+                    );
+                    elementHandle.y(
+                        dragging.y + Math.round(delta[1] / gridSize[1])
+                    );
+                    // Invoke update callback
+                    if (update) {
+                        update();
+                    }
+                }
+            }
+
+            // Conclude a drag gesture
+            function endDrag() {
+                // Clear cached state
+                dragging = undefined;
+                // Mark change as complete
+                if (commit) {
+                    commit("Dragged handle.");
+                }
+            }
+
+            return {
+                /**
+                 * Get a CSS style to position this drag handle.
+                 * @returns CSS style object (for `ng-style`)
+                 */
+                style: getStyle,
+                /**
+                 * Start a drag gesture. This should be called when a drag
+                 * begins to track initial state.
+                 */
+                startDrag: startDrag,
+                /**
+                 * Continue a drag gesture; update x/y positions.
+                 * @param {number[]} delta x/y pixel difference since drag
+                 *                   started
+                 */
+                continueDrag: continueDrag,
+                /**
+                 * End a drag gesture. This should be callled when a drag
+                 * concludes to trigger commit of changes.
+                 */
+                endDrag: endDrag
+            };
+        }
+
+        return FixedDragHandle;
+    }
+);

platform/features/layout/src/elements/AccessorMutator.js

@@ -8,14 +8,26 @@ define(
         /**
          * Utility function for creating getter-setter functions,
          * since these are frequently useful for element proxies.
+         *
+         * An optional third argument may be supplied in order to
+         * constrain or modify arguments when using as a setter;
+         * this argument is a function which takes two arguments
+         * (the current value for the property, and the requested
+         * new value.) This is useful when values need to be kept
+         * in certain ranges; specifically, to keep x/y positions
+         * non-negative in a fixed position view.
+         *
          * @constructor
          * @param {Object} object the object to get/set values upon
          * @param {string} key the property to get/set
+         * @param {function} [updater] function used to process updates
          */
-        function AccessorMutator(object, key) {
+        function AccessorMutator(object, key, updater) {
             return function (value) {
                 if (arguments.length > 0) {
-                    object[key] = value;
+                    object[key] = updater ?
+                            updater(value, object[key]) :
+                            value;
                 }
                 return object[key];
             };

platform/features/layout/src/elements/ElementFactory.js

@@ -24,7 +24,7 @@ define(
                 "fixed.text": {
                     fill: "transparent",
                     stroke: "transparent",
-                    color: "#717171"
+                    color: "#cccccc"
                 }
             },
             DIALOGS = {

platform/features/layout/src/elements/ElementProxy.js

@@ -1,8 +1,8 @@
 /*global define*/
 
 define(
-    ['./AccessorMutator'],
+    ['./AccessorMutator', './ResizeHandle'],
-    function (AccessorMutator) {
+    function (AccessorMutator, ResizeHandle) {
         "use strict";
 
         // Index deltas for changes in order
@@ -13,6 +13,11 @@ define(
             bottom: Number.NEGATIVE_INFINITY
         };
 
+        // Ensure a value is non-negative (for x/y setters)
+        function clamp(value) {
+            return Math.max(value, 0);
+        }
+
         /**
          * Abstract superclass for other classes which provide useful
          * interfaces upon an elements in a fixed position view.
@@ -29,6 +34,8 @@ define(
          * @param {Array} elements the full array of elements
          */
         function ElementProxy(element, index, elements) {
+            var handles = [ new ResizeHandle(element, 1, 1) ];
+
             return {
                 /**
                  * The element as stored in the view configuration.
@@ -40,14 +47,14 @@ define(
                  * @param {number} [x] the new x position (if setting)
                  * @returns {number} the x position
                  */
-                x: new AccessorMutator(element, 'x'),
+                x: new AccessorMutator(element, 'x', clamp),
                 /**
                  * Get and/or set the y position of this element.
                  * Units are in fixed position grid space.
                  * @param {number} [y] the new y position (if setting)
                  * @returns {number} the y position
                  */
-                y: new AccessorMutator(element, 'y'),
+                y: new AccessorMutator(element, 'y', clamp),
                 /**
                  * Get and/or set the stroke color of this element.
                  * @param {string} [stroke] the new stroke color (if setting)
@@ -97,6 +104,13 @@ define(
                     if (elements[index] === element) {
                         elements.splice(index, 1);
                     }
+                },
+                /**
+                 * Get handles to control specific features of this element,
+                 * e.g. corner size.
+                 */
+                handles: function () {
+                    return handles;
                 }
             };
         }

platform/features/layout/src/elements/LineHandle.js

@@ -0,0 +1,61 @@
+/*global define*/
+define(
+    [],
+    function () {
+        'use strict';
+
+        /**
+         * Handle for changing x/y position of a line's end point.
+         * This is used to support drag handles for line elements
+         * in a fixed position view. Field names for opposite ends
+         * are provided to avoid zero-length lines.
+         * @constructor
+         * @param element the line element
+         * @param {string} xProperty field which stores x position
+         * @param {string} yProperty field which stores x position
+         * @param {string} xOther field which stores x of other end
+         * @param {string} yOther field which stores y of other end
+         */
+        function LineHandle(element, xProperty, yProperty, xOther, yOther) {
+            return {
+                /**
+                 * Get/set the x position of the lower-right corner
+                 * of the handle-controlled element, changing size
+                 * as necessary.
+                 */
+                x: function (value) {
+                    if (arguments.length > 0) {
+                        // Ensure we stay in view
+                        value = Math.max(value, 0);
+                        // Make sure end points will still be different
+                        if (element[yOther] !== element[yProperty] ||
+                                element[xOther] !== value) {
+                            element[xProperty] = value;
+                        }
+                    }
+                    return element[xProperty];
+                },
+                /**
+                 * Get/set the y position of the lower-right corner
+                 * of the handle-controlled element, changing size
+                 * as necessary.
+                 */
+                y: function (value) {
+                    if (arguments.length > 0) {
+                        // Ensure we stay in view
+                        value = Math.max(value, 0);
+                        // Make sure end points will still be different
+                        if (element[xOther] !== element[xProperty] ||
+                                element[yOther] !== value) {
+                            element[yProperty] = value;
+                        }
+                    }
+                    return element[yProperty];
+                }
+            };
+        }
+
+        return LineHandle;
+
+    }
+);

platform/features/layout/src/elements/LineProxy.js

@@ -1,8 +1,8 @@
 /*global define*/
 
 define(
-    ['./ElementProxy'],
+    ['./ElementProxy', './LineHandle'],
-    function (ElementProxy) {
+    function (ElementProxy, LineHandle) {
         'use strict';
 
         /**
@@ -15,7 +15,11 @@ define(
          * @param {Array} elements the full array of elements
          */
         function LineProxy(element, index, elements) {
-            var proxy = new ElementProxy(element, index, elements);
+            var proxy = new ElementProxy(element, index, elements),
+                handles = [
+                    new LineHandle(element, 'x', 'y', 'x2', 'y2'),
+                    new LineHandle(element, 'x2', 'y2', 'x', 'y')
+                ];
 
             /**
              * Get the top-left x coordinate, in grid space, of
@@ -24,7 +28,7 @@ define(
              */
             proxy.x = function (v) {
                 var x = Math.min(element.x, element.x2),
-                    delta = v - x;
+                    delta = Math.max(v, 0) - x;
                 if (arguments.length > 0 && delta) {
                     element.x += delta;
                     element.x2 += delta;
@@ -39,7 +43,7 @@ define(
              */
             proxy.y = function (v) {
                 var y = Math.min(element.y, element.y2),
-                    delta = v - y;
+                    delta = Math.max(v, 0) - y;
                 if (arguments.length > 0 && delta) {
                     element.y += delta;
                     element.y2 += delta;
@@ -105,6 +109,15 @@ define(
                 return element.y2 - proxy.y();
             };
 
+            /**
+             * Get element handles for changing the position of end
+             * points of this line.
+             * @returns {LineHandle[]} line handles for both end points
+             */
+            proxy.handles = function () {
+                return handles;
+            };
+
             return proxy;
         }
 

platform/features/layout/src/elements/ResizeHandle.js

@@ -0,0 +1,53 @@
+/*global define*/
+define(
+    [],
+    function () {
+        'use strict';
+
+        /**
+         * Handle for changing width/height properties of an element.
+         * This is used to support drag handles for different
+         * element types in a fixed position view.
+         * @constructor
+         */
+        function ResizeHandle(element, minWidth, minHeight) {
+            // Ensure reasonable defaults
+            minWidth = minWidth || 0;
+            minHeight = minHeight || 0;
+
+            return {
+                /**
+                 * Get/set the x position of the lower-right corner
+                 * of the handle-controlled element, changing size
+                 * as necessary.
+                 */
+                x: function (value) {
+                    if (arguments.length > 0) {
+                        element.width = Math.max(
+                            minWidth,
+                            value - element.x
+                        );
+                    }
+                    return element.x + element.width;
+                },
+                /**
+                 * Get/set the y position of the lower-right corner
+                 * of the handle-controlled element, changing size
+                 * as necessary.
+                 */
+                y: function (value) {
+                    if (arguments.length > 0) {
+                        element.height = Math.max(
+                            minHeight,
+                            value - element.y
+                        );
+                    }
+                    return element.y + element.height;
+                }
+            };
+        }
+
+        return ResizeHandle;
+
+    }
+);

platform/features/layout/test/FixedControllerSpec.js

@@ -170,6 +170,20 @@ define(
                     .toHaveBeenCalledWith(elements[1]);
             });
 
+            it("allows selection retrieval", function () {
+                // selected with no arguments should give the current
+                // selection
+                var elements;
+
+                testModel.modified = 1;
+                findWatch("model.modified")(testModel.modified);
+
+                elements = controller.getElements();
+                controller.select(elements[1]);
+                mockScope.selection.get.andReturn(elements[1]);
+                expect(controller.selected()).toEqual(elements[1]);
+            });
+
             it("allows selections to be cleared", function () {
                 var elements;
 
@@ -303,6 +317,69 @@ define(
                     jasmine.any(Object)
                 );
             });
+
+            it("exposes drag handles", function () {
+                var handles;
+
+                // Select something so that drag handles are expected
+                testModel.modified = 1;
+                findWatch("model.modified")(testModel.modified);
+                controller.select(controller.getElements()[1]);
+
+                // Should have a non-empty array of handles
+                handles = controller.handles();
+                expect(handles).toEqual(jasmine.any(Array));
+                expect(handles.length).not.toEqual(0);
+
+                // And they should have start/continue/end drag methods
+                handles.forEach(function (handle) {
+                    expect(handle.startDrag).toEqual(jasmine.any(Function));
+                    expect(handle.continueDrag).toEqual(jasmine.any(Function));
+                    expect(handle.endDrag).toEqual(jasmine.any(Function));
+                });
+            });
+
+            it("exposes a move handle", function () {
+                var handle;
+
+                // Select something so that drag handles are expected
+                testModel.modified = 1;
+                findWatch("model.modified")(testModel.modified);
+                controller.select(controller.getElements()[1]);
+
+                // Should have a move handle
+                handle = controller.moveHandle();
+
+                // And it should have start/continue/end drag methods
+                expect(handle.startDrag).toEqual(jasmine.any(Function));
+                expect(handle.continueDrag).toEqual(jasmine.any(Function));
+                expect(handle.endDrag).toEqual(jasmine.any(Function));
+            });
+
+            it("updates selection style during drag", function () {
+                var oldStyle;
+
+                // Select something so that drag handles are expected
+                testModel.modified = 1;
+                findWatch("model.modified")(testModel.modified);
+                controller.select(controller.getElements()[1]);
+                mockScope.selection.get.andReturn(controller.getElements()[1]);
+
+                // Get style
+                oldStyle = controller.selected().style;
+
+                // Start a drag gesture
+                controller.moveHandle().startDrag();
+
+                // Haven't moved yet; style shouldn't have updated yet
+                expect(controller.selected().style).toEqual(oldStyle);
+
+                // Drag a little
+                controller.moveHandle().continueDrag([ 1000, 100 ]);
+
+                // Style should have been updated
+                expect(controller.selected().style).not.toEqual(oldStyle);
+            });
         });
     }
 );

platform/features/layout/test/FixedDragHandleSpec.js

@@ -0,0 +1,68 @@
+/*global define,describe,it,expect,beforeEach,jasmine,xit*/
+
+define(
+    ['../src/FixedDragHandle'],
+    function (FixedDragHandle) {
+        "use strict";
+
+        var TEST_GRID_SIZE = [ 13, 33 ];
+
+        describe("A fixed position drag handle", function () {
+            var mockElementHandle,
+                mockUpdate,
+                mockCommit,
+                handle;
+
+            beforeEach(function () {
+                mockElementHandle = jasmine.createSpyObj(
+                    'elementHandle',
+                    [ 'x', 'y' ]
+                );
+                mockUpdate = jasmine.createSpy('update');
+                mockCommit = jasmine.createSpy('commit');
+
+                mockElementHandle.x.andReturn(6);
+                mockElementHandle.y.andReturn(8);
+
+                handle = new FixedDragHandle(
+                    mockElementHandle,
+                    TEST_GRID_SIZE,
+                    mockUpdate,
+                    mockCommit
+                );
+            });
+
+            it("provides a style for positioning", function () {
+                var style = handle.style();
+                // 6 grid coords * 13 pixels - 3 pixels for centering
+                expect(style.left).toEqual('75px');
+                // 8 grid coords * 33 pixels - 3 pixels for centering
+                expect(style.top).toEqual('261px');
+            });
+
+            it("allows handles to be dragged", function () {
+                handle.startDrag();
+                handle.continueDrag([ 16, 8 ]);
+
+                // Should update x/y, snapped to grid
+                expect(mockElementHandle.x).toHaveBeenCalledWith(7);
+                expect(mockElementHandle.y).toHaveBeenCalledWith(8);
+
+                handle.continueDrag([ -16, -35 ]);
+
+                // Should have interpreted relative to initial state
+                expect(mockElementHandle.x).toHaveBeenCalledWith(5);
+                expect(mockElementHandle.y).toHaveBeenCalledWith(7);
+
+                // Should have called update once per continueDrag
+                expect(mockUpdate.calls.length).toEqual(2);
+
+                // Finally, ending drag should commit
+                expect(mockCommit).not.toHaveBeenCalled();
+                handle.endDrag();
+                expect(mockCommit).toHaveBeenCalled();
+            });
+
+        });
+    }
+);

platform/features/layout/test/elements/ElementProxySpec.js

@@ -47,6 +47,13 @@ define(
                 proxy.order("top");
                 expect(testElements).toEqual([{}, {}, {}, testElement]);
             });
+
+            it("ensures x/y values are non-negative", function () {
+                proxy.x(-1);
+                proxy.y(-400);
+                expect(proxy.x()).toEqual(0);
+                expect(proxy.y()).toEqual(0);
+            });
         });
     }
 );

platform/features/layout/test/elements/LineHandleSpec.js

@@ -0,0 +1,54 @@
+/*global define,describe,it,expect,beforeEach,jasmine,xit*/
+
+define(
+    ['../../src/elements/LineHandle'],
+    function (LineHandle) {
+        "use strict";
+
+        describe("A fixed position drag handle", function () {
+            var testElement,
+                handle;
+
+            beforeEach(function () {
+                testElement = {
+                    x: 3,
+                    y: 42,
+                    x2: 8,
+                    y2: 11
+                };
+
+                handle = new LineHandle(testElement, 'x', 'y', 'x2', 'y2');
+            });
+
+            it("provides x/y grid coordinates for its corner", function () {
+                expect(handle.x()).toEqual(3);
+                expect(handle.y()).toEqual(42);
+            });
+
+            it("changes x and y positions", function () {
+                handle.x(30);
+                expect(testElement.x).toEqual(30);
+                handle.y(40);
+                expect(testElement.y).toEqual(40);
+            });
+
+            it("disallows values less than zero", function () {
+                handle.x(-1);
+                handle.y(-400);
+                expect(testElement.x).toEqual(0);
+                expect(testElement.y).toEqual(0);
+            });
+
+            it("ensures that end points remain different", function () {
+                handle.x(testElement.x2);
+                handle.y(testElement.y2);
+                // First change should have been fine, because y was different
+                expect(testElement.x).toEqual(testElement.x2);
+                // Second change should have been rejected
+                expect(testElement.y).not.toEqual(testElement.y2);
+            });
+
+
+        });
+    }
+);

platform/features/layout/test/elements/LineProxySpec.js

@@ -67,6 +67,10 @@ define(
                 expect(proxy.y2()).toEqual(0);
             });
 
+            it("provides handles for both ends", function () {
+                expect(new LineProxy(diagonal).handles().length).toEqual(2);
+            });
+
         });
     }
 );

platform/features/layout/test/elements/ResizeHandleSpec.js

@@ -0,0 +1,59 @@
+/*global define,describe,it,expect,beforeEach,jasmine,xit*/
+
+define(
+    ['../../src/elements/ResizeHandle'],
+    function (ResizeHandle) {
+        "use strict";
+
+        var TEST_MIN_WIDTH = 4, TEST_MIN_HEIGHT = 2;
+
+        describe("A fixed position drag handle", function () {
+            var testElement,
+                handle;
+
+            beforeEach(function () {
+                testElement = {
+                    x: 3,
+                    y: 42,
+                    width: 30,
+                    height: 36
+                };
+
+                handle = new ResizeHandle(
+                    testElement,
+                    TEST_MIN_WIDTH,
+                    TEST_MIN_HEIGHT
+                );
+            });
+
+            it("provides x/y grid coordinates for lower-right corner", function () {
+                expect(handle.x()).toEqual(33);
+                expect(handle.y()).toEqual(78);
+            });
+
+            it("changes width of an element", function () {
+                handle.x(30);
+                // Should change width, not x
+                expect(testElement.x).toEqual(3);
+                expect(testElement.width).toEqual(27);
+            });
+
+            it("changes height of an element", function () {
+                handle.y(60);
+                // Should change height, not y
+                expect(testElement.y).toEqual(42);
+                expect(testElement.height).toEqual(18);
+            });
+
+            it("enforces minimum width/height", function () {
+                handle.x(testElement.x);
+                handle.y(testElement.y);
+                expect(testElement.x).toEqual(3);
+                expect(testElement.y).toEqual(42);
+                expect(testElement.width).toEqual(TEST_MIN_WIDTH);
+                expect(testElement.height).toEqual(TEST_MIN_HEIGHT);
+            });
+
+        });
+    }
+);

platform/features/layout/test/suite.json

@@ -1,5 +1,6 @@
 [
     "FixedController",
+    "FixedDragHandle",
     "FixedProxy",
     "LayoutController",
     "LayoutDrag",
@@ -9,6 +10,7 @@
     "elements/ElementProxies",
     "elements/ElementProxy",
     "elements/LineProxy",
+    "elements/ResizeHandle",
     "elements/TelemetryProxy",
     "elements/TextProxy"
 ]

platform/forms/res/templates/controls/button.html

@@ -1,5 +1,4 @@
-<a href=""
+<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle xxx"
-   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
    ng-class="{ labeled: structure.text }"
    ng-click="structure.click()">
     <span class="ui-symbol icon">

platform/forms/res/templates/controls/checkbox.html

@@ -3,5 +3,5 @@
            name="mctControl"
            ng-model="ngModel[field]"
            ng-disabled="ngDisabled">
-    <em>&nbsp;</em>
+    <em></em>
 </label>

platform/forms/res/templates/controls/color.html

@@ -1,36 +1,45 @@
-<div class="s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
+<div
-     ng-controller="ClickAwayController as toggle">
+	class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
+    ng-controller="ClickAwayController as toggle"
+	>
 
     <span ng-click="toggle.toggle()">
         <span class="ui-symbol icon">{{structure.glyph}}</span>
         <span class="title-label" ng-if="structure.text">
             {{structure.text}}
         </span>
-        <span class='ui-symbol icon invoke-menu'
+        <span class='ui-symbol icon invoke-menu' ng-if="!structure.text">v</span>
-              ng-if="!structure.text">
-            v
-        </span>
     </span>
 
-    <div class="menu dropdown"
+    <div
-         ng-controller="ColorController as colors"
+	    class="menu dropdown l-color-palette"
-         ng-show="toggle.isActive()">
+        ng-controller="ColorController as colors"
-        <div style="width: 12em; display: block;" ng-if="!structure.mandatory">
+        ng-show="toggle.isActive()"
-            <div style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
+	    >
-                 ng-click="ngModel[field] = 'transparent'">
+        <div
-                {{ngModel[field] === 'transparent' ? 'x' : '' }}
+	        class="l-palette-row l-option-row"
+	        ng-if="!structure.mandatory"
+	        >
+            <div
+	            class="l-palette-item s-palette-item"
+                ng-click="ngModel[field] = 'transparent'"
+	            >
+                {{ngModel[field] === 'transparent' ? '2' : '' }}
             </div>
-            None
+            <span class="l-palette-item-label">None</span>
         </div>
-        <div style="width: 12em; display: block;"
+        <div
-             ng-repeat="group in colors.groups()">
+	        class="l-palette-row"
-            <div ng-repeat="color in group"
+            ng-repeat="group in colors.groups()"
-                 style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
+	        >
-                 ng-style="{ background: color }"
+            <div
-                 ng-click="ngModel[field] = color">
+	            class="l-palette-item s-palette-item"
-                {{ngModel[field] === color ? 'x' : '' }}
+	            ng-repeat="color in group"
+                ng-style="{ background: color }"
+                ng-click="ngModel[field] = color"
+	            >
+                {{ngModel[field] === color ? '2' : '' }}
             </div>
         </div>
-
     </div>
 </div>

platform/forms/res/templates/controls/composite.html

@@ -1,15 +1,17 @@
 <span ng-controller="CompositeController as compositeCtrl">
     <ng-form name="mctFormItem" ng-repeat="item in structure.items">
-        <mct-control key="item.control"
+	    <div class="l-composite-control l-{{item.control}}">
-                     ng-model="ngModel[field]"
+	        <mct-control key="item.control"
-                     ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
+	                     ng-model="ngModel[field]"
-                     ng-pattern="ngPattern"
+	                     ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])"
-                     options="item.options"
+	                     ng-pattern="ngPattern"
-                     structure="row"
+	                     options="item.options"
-                     field="$index">
+	                     structure="row"
-        </mct-control>
+	                     field="$index">
-        <span class="composite-control-label">
+	        </mct-control>
-            {{item.name}}
+	        <span class="composite-control-label">
-        </span>
+	            {{item.name}}
+	        </span>
+	    </div>
     </ng-form>
 </span>

platform/forms/res/templates/controls/menu-button.html

@@ -1,7 +1,7 @@
-<div class="s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
+<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
      ng-controller="ClickAwayController as toggle">
 
-    <span ng-click="toggle.toggle()">
+    <span class="l-click-area" ng-click="toggle.toggle()">
         <span class="ui-symbol icon">{{structure.glyph}}</span>
         <span class="title-label" ng-if="structure.text">
             {{structure.text}}
@@ -14,8 +14,8 @@
 
     <div class="menu dropdown" ng-show="toggle.isActive()">
         <ul>
-            <li ng-repeat="option in structure.options">
+            <li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
-                <a href="" ng-click="structure.click(option.key); toggle.setState(false)">
+                <a href="">
                     <span class="ui-symbol type-icon icon">
                         {{option.glyph}}
                     </span>

platform/forms/res/templates/controls/select.html

@@ -1,8 +1,9 @@
-<select class='form-control input select'
+<div class='form-control select'>
-        ng-model="ngModel[field]"
+	<select
-        ng-options="opt.value as opt.name for opt in options"
+	        ng-model="ngModel[field]"
-        ng-required="ngRequired"
+	        ng-options="opt.value as opt.name for opt in options"
-        name="mctControl">
+	        ng-required="ngRequired"
-    <option value="" ng-if="!ngModel[field]">- Select One -</option>
+	        name="mctControl">
-    <span class='ui-symbol arw colorKey'>v</span>
+	    <option value="" ng-if="!ngModel[field]">- Select One -</option>
-</select>
+	</select>
+</div>

platform/forms/res/templates/toolbar.html

@@ -1,34 +1,29 @@
-<form name="tool-bar btn-bar contents" novalidate>
+<form novalidate>
-
+	<div class="tool-bar btn-bar contents abs">
-<div class="form">
+	    <span ng-repeat="section in structure.sections"
-    <span ng-repeat="section in structure.sections"
+	          class="control-group"
-          class="control-group coordinates"
+	          ng-if="!section.hidden"
-          ng-if="!section.hidden"
+	          title="{{section.description}}">
-          title="{{section.description}}">
+	        <ng-form ng-repeat="item in section.items"
-
+	                 ng-class="{ 'input-labeled': item.name }"
-        <ng-form ng-repeat="item in section.items"
+	                 ng-hide="item.hidden"
-                 ng-class="{ 'input-labeled': item.name }"
+	                 class="inline"
-                 ng-hide="item.hidden"
+	                 title="{{item.description}}"
-                 class="inline"
+	                 name="mctFormInner">
-                 title="{{item.description}}"
-                 name="mctFormInner">
-
-            <label ng-if="item.name">
-                {{item.name}}:
-            </label>
-            <mct-control key="item.control"
-                         ng-class="{ disabled: item.disabled }"
-                         ng-model="ngModel"
-                         ng-required="item.required"
-                         ng-pattern="getRegExp(item.pattern)"
-                         options="item.options"
-                         structure="item"
-                         field="item.key">
-            </mct-control>
-
-        </ng-form>
-
-    </span>
-</div>
 
+	            <label ng-if="item.name">
+	                {{item.name}}:
+	            </label>
+	            <mct-control key="item.control"
+	                         ng-class="{ disabled: item.disabled }"
+	                         ng-model="ngModel"
+	                         ng-required="item.required"
+	                         ng-pattern="getRegExp(item.pattern)"
+	                         options="item.options"
+	                         structure="item"
+	                         field="item.key">
+	            </mct-control>
+	        </ng-form>
+	    </span>
+	</div>
 </form>