[Fixed Position] Add text color property

Add a property to the Fixed Position toolbar to set text
color, WTD-881.

platform/features/layout/bundle.json

@@ -92,6 +92,12 @@
                                     "property": "stroke",
                                     "glyph": "-",
                                     "control": "color"
+                                },
+                                {
+                                    "property": "color",
+                                    "glyph": "\u1D1B",
+                                    "mandatory": true,
+                                    "control": "color"
                                 }
                             ]
                         },

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

@@ -1,4 +1,4 @@
-<div ng-style="{ background: ngModel.fill(), border: '1px solid ' + ngModel.stroke() }"
+<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;">
         {{ngModel.name}}

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

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

platform/features/layout/src/FixedController.js

@@ -194,6 +194,7 @@ define(
                     y: Math.floor(position.y / gridSize[1]),
                     id: id,
                     stroke: "transparent",
+                    color: "#717171",
                     width: DEFAULT_DIMENSIONS[0],
                     height: DEFAULT_DIMENSIONS[1]
                 });

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

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

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

@@ -20,6 +20,13 @@ define(
         function TextProxy(element, index, elements) {
             var proxy = new BoxProxy(element, index, elements);
 
+            /**
+             * Get and/or set the text color of this element.
+             * @param {string} [color] the new text color (if setting)
+             * @returns {string} the text color
+             */
+            proxy.color = new AccessorMutator(element, 'color');
+
             return proxy;
         }
 

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

@@ -15,7 +15,7 @@
     <div class="menu dropdown"
          ng-controller="ColorController as colors"
          ng-show="toggle.isActive()">
-        <div style="width: 12em; display: block;">
+        <div style="width: 12em; display: block;" ng-if="!structure.mandatory">
             <div style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
                  ng-click="ngModel[field] = 'transparent'">
                 {{ngModel[field] === 'transparent' ? 'x' : '' }}