[Fixed Position] Add color chooser

Add color picker for fill color, WTD-881

platform/features/layout/bundle.json

@@ -88,7 +88,7 @@
                                 {
                                     "property": "fill",
                                     "glyph": "X",
-                                    "control": "textfield",
+                                    "control": "color",
                                     "inclusive": true
                                 }
                             ]

platform/forms/bundle.json

@@ -60,6 +60,10 @@
             {
                 "key": "CompositeController",
                 "implementation": "controllers/CompositeController.js"
+            },
+            {
+                "key": "ColorController",
+                "implementation": "controllers/ColorController.js"
             }
         ]
     }

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

@@ -1,3 +1,36 @@
-<input type="color"
+<div class="s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
-       name="mctControl"
+     ng-controller="ClickAwayController as toggle">
-       ng-model="ngModel[field]">
+
+    <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'
+              ng-if="!structure.text">
+            v
+        </span>
+    </span>
+
+    <div class="menu dropdown"
+         ng-controller="ColorController as colors"
+         ng-show="toggle.isActive()">
+        <div style="width: 12em; display: block;">
+            <div style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
+                 ng-click="ngModel[field] = 'transparent'">
+                {{ngModel[field] === 'transparent' ? 'x' : '' }}
+            </div>
+            None
+        </div>
+        <div style="width: 12em; display: block;"
+             ng-repeat="group in colors.groups()">
+            <div ng-repeat="color in group"
+                 style="width: 1em; height: 1em; border: 1px gray solid; display: inline-block;"
+                 ng-style="{ background: color }"
+                 ng-click="ngModel[field] = color">
+                {{ngModel[field] === color ? 'x' : '' }}
+            </div>
+        </div>
+
+    </div>
+</div>

platform/forms/src/controllers/ColorController.js

@@ -0,0 +1,81 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        var BASE_COLORS = [
+                [ 136, 32, 32 ],
+                [ 224, 64, 64 ],
+                [ 240, 160, 72 ],
+                [ 255, 248, 96 ],
+                [ 128, 240, 72 ],
+                [ 128, 248, 248 ],
+                [ 88, 144, 224 ],
+                [ 0, 72, 240 ],
+                [ 136, 80, 240 ],
+                [ 224, 96, 248 ]
+            ],
+            GRADIENTS = [0.75, 0.50, 0.25, -0.25, -0.50, -0.75],
+            GROUPS = [];
+
+        function toWebColor(triplet) {
+            return '#' + triplet.map(function (v) {
+                return (v < 16 ? '0' : '') + v.toString(16);
+            }).join('');
+        }
+
+        function toGradient(triplet, value) {
+            return triplet.map(function (v) {
+                return Math.round(value > 0 ?
+                        (v + (255 - v) * value) :
+                        (v * (1 + value))
+                    );
+            });
+        }
+
+        function initializeGroups() {
+            var i, group;
+
+            // Ten grayscale colors
+            group = [];
+            while (group.length < 10) {
+                group.push(toWebColor([
+                    Math.round(28.3333 * group.length),
+                    Math.round(28.3333 * group.length),
+                    Math.round(28.3333 * group.length)
+                ]));
+            }
+            GROUPS.push(group);
+
+            // Ten basic colors
+            GROUPS.push(BASE_COLORS.map(toWebColor));
+
+            // ...and some gradients of those colors
+            group = [];
+            GRADIENTS.forEach(function (v) {
+                group = group.concat(BASE_COLORS.map(function (c) {
+                    return toWebColor(toGradient(c, v));
+                }));
+            });
+            GROUPS.push(group);
+        }
+
+
+
+        function ColorController() {
+            if (GROUPS.length === 0) {
+                initializeGroups();
+            }
+
+            return {
+                groups: function () {
+                    return GROUPS;
+                }
+            };
+        }
+
+        return ColorController;
+    }
+);