[Fixed Position] Add stroke property

Add stroke property to Fixed Position toolbar for
borders, line color. WTD-881.

platform/features/layout/bundle.json

@@ -29,7 +29,6 @@
                                     "glyph": "+",
                                     "control": "menu-button",
                                     "text": "Add",
-                                    "inclusive": true,
                                     "options": [
                                         {
                                             "name": "Box",
@@ -61,7 +60,6 @@
                                     "method": "order",
                                     "glyph": "o",
                                     "control": "menu-button",
-                                    "inclusive": true,
                                     "options": [
                                         {
                                             "name": "Move to Top",
@@ -88,8 +86,12 @@
                                 {
                                     "property": "fill",
                                     "glyph": "X",
-                                    "control": "color",
-                                    "inclusive": true
+                                    "control": "color"
+                                },
+                                {
+                                    "property": "stroke",
+                                    "glyph": "-",
+                                    "control": "color"
                                 }
                             ]
                         },

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

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

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

@@ -1,3 +1,3 @@
-<div ng-style="{ 'background-image': 'url(' + ngModel.element.url + ')'}"
+<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;">
-</div>
+</div>

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

@@ -4,7 +4,7 @@
           ng-attr-y1="{{parameters.gridSize[1] * ngModel.y1() + 1}}"
           ng-attr-x2="{{parameters.gridSize[0] * ngModel.x2() + 1}}"
           ng-attr-y2="{{parameters.gridSize[1] * ngModel.y2() + 1}}"
-          stroke="lightgray"
+          ng-attr-stroke="{{ngModel.stroke()}}"
           stroke-width="2">
     </line>
 </svg>

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

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

platform/features/layout/src/FixedController.js

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

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

@@ -6,20 +6,24 @@ define(
         "use strict";
 
         var INITIAL_STATES = {
-                "fixed.image": {},
+                "fixed.image": {
+                    stroke: "transparent"
+                },
                 "fixed.box": {
-                    fill: "#888",
-                    border: "transparent"
+                    fill: "#717171",
+                    border: "transparent",
+                    stroke: "transparent"
                 },
                 "fixed.line": {
                     x: 5,
                     y: 9,
                     x2: 6,
-                    y2: 6
+                    y2: 6,
+                    stroke: "#717171"
                 },
                 "fixed.text": {
                     fill: "transparent",
-                    border: "transparent"
+                    stroke: "transparent"
                 }
             },
             DIALOGS = {

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

@@ -49,11 +49,11 @@ define(
                  */
                 y: new AccessorMutator(element, 'y'),
                 /**
-                 * Get and/or set the z index of this element.
-                 * @param {number} [z] the new z index (if setting)
-                 * @returns {number} the z index
+                 * Get and/or set the stroke color of this element.
+                 * @param {string} [stroke] the new stroke color (if setting)
+                 * @returns {string} the stroke color
                  */
-                z: new AccessorMutator(element, 'z'),
+                stroke: new AccessorMutator(element, 'stroke'),
                 /**
                  * Get and/or set the width of this element.
                  * Units are in fixed position grid space.