[Frontend] In-progress checkin: migrating style tags to classes, other

WTD-894
Significant migration of inline styles to CSS classes;
Changed telemetry component so that when title is hidden, telem element can take up 100% of the element width;
Static text elements now show scrollbars on overflow;
Added padding and box-sizing to text elements - this is throwing off the selected control because of the offset and should be fixed;

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

@@ -1,3 +1,4 @@
 <div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')', border: '1px solid ' + ngModel.stroke() }"
-     style="width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center;">
+     class="l-fixed-position-image"
+     style="">
 </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() }"
-     style="width: 100%; height: 100%;">
-    <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;"
-         ng-show="ngModel.element.titled">
+<div
+	class="l-fixed-position-text l-telemetry"
+	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
+	>
+    <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,5 @@
-<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke(), color: ngModel.color() }"
-     style="width: 100%; height: 100%; overflow: hidden;">
+<div
+	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

@@ -3,23 +3,21 @@
      mct-resize="controller.setBounds(bounds)">
 
     <!-- Background grid -->
-    <span ng-click="controller.clearSelection()">
-        <!--div ng-repeat="cell in controller.getCellStyles()"
-             class="l-grid-cell s-grid-cell"
-             ng-style="cell">
-        </div-->
-	    <span class="s-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></span>
-	    <span class="s-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></span>
-    </span>
+    <div class="l-grid-holder" ng-click="controller.clearSelection()">
+	    <div class="l-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></div>
+	    <div class="l-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
+    </div>
 
 
 
     <!-- Fixed position elements -->
+	<!-- TO-DO: Should not be applying positioning styles to the mct-include element.
+	Instead, these should be passed on to the actual HTML element within the template -->
     <mct-include ng-repeat="element in controller.getElements()"
-                 style="position: absolute;"
                  key="element.template"
                  parameters="{ gridSize: controller.getGridSize() }"
-                 ng-class="{ disabled: controller.selected() && !controller.selected(element) }"
+                 class="l-fixed-position-item"
+                 ng-class="{ 's-not-selected': controller.selected() && !controller.selected(element) }"
                  ng-style="element.style"
                  ng-click="controller.select(element)"
                  ng-model="element">
@@ -27,20 +25,18 @@
 
     <!-- Selection highlight, handles -->
     <span ng-if="controller.selected()">
-        <div class="s-fixed-position-item-selected"
-             style="position: absolute;"
+        <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()"
-             style="position: absolute;"
+             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()">
-            O
         </div>
     </span>
 

platform/features/layout/src/FixedDragHandle.js

@@ -6,8 +6,8 @@ define(
         'use strict';
 
 
-        // 8 by 8 pixels
-        var DRAG_HANDLE_SIZE = [ 8, 8 ];
+        // Drag handle dimensions
+        var DRAG_HANDLE_SIZE = [ 6, 6 ];
 
         /**
          * Template-displayable drag handle for an element in fixed