Added Gray for SDK 3 B&W watches

Author: Joseph Atkins-Turkish

ide/static/ide/js/ib/canvas.js

@@ -28,7 +28,7 @@
 
         // Window properties
         var mProperties = {
-            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourWhite),
+            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourWhite, true),
             fullscreen: new IB.Properties.Bool(gettext("Fullscreen"), CloudPebble.ProjectInfo.app_is_watchface || CloudPebble.ProjectInfo.sdk_version == '3')
         };
         mProperties.bg.on('change', handleBackgroundChange, this);

ide/static/ide/js/ib/layers/actionbarlayer.js

@@ -11,7 +11,7 @@
         IB.Layer.call(this, canvas, id);
 
         _.extend(this._properties, {
-            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourBlack),
+            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourBlack, true),
             icon_up: new IB.Properties.Bitmap(gettext("Top icon"), ""),
             icon_select: new IB.Properties.Bitmap(gettext("Middle icon"), ""),
             icon_down: new IB.Properties.Bitmap(gettext("Bottom icon"), "")

ide/static/ide/js/ib/layers/bitmaplayer.js

@@ -9,7 +9,7 @@
     IB.BitmapLayer = function(canvas, id) {
         IB.Layer.call(this, canvas, id);
         this._resource = new IB.Properties.Bitmap(gettext("Image"), '');
-        this._bg_colour = new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourClear);
+        this._bg_colour = new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourClear, true);
         this._has_changed_image = false;
         this._node.addClass('ib-bitmaplayer');
         this.setSize(40, 40);

ide/static/ide/js/ib/layers/textlayer.js

@@ -14,8 +14,8 @@
         _.extend(this._properties, {
             text: new IB.Properties.Text(gettext("Text"), pgettext("sample text", "Text layer")),
             font: new IB.Properties.Font(gettext("Font"), "GOTHIC_14_BOLD"),
-            fg: new IB.Properties.Colour(gettext("Text colour"), IB.ColourBlack),
-            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourWhite),
+            fg: new IB.Properties.Colour(gettext("Text colour"), IB.ColourBlack, false),
+            bg: new IB.Properties.Colour(pgettext("background colour", "Background"), IB.ColourWhite, true),
             align: new IB.Properties.MultipleChoice(pgettext("horizontal text positioning", "Alignment"), {
                 "GTextAlignmentLeft": gettext("Left"),
                 "GTextAlignmentCenter": gettext("Centre"),

ide/static/ide/js/ib/properties.js

@@ -195,7 +195,8 @@
      * @constructor
      * @extends {IB.Properties.Property}
      */
-    IB.Properties.Colour = function(name, value) {
+    IB.Properties.Colour = function(name, value, is_fill) {
+        this.is_fill = !!is_fill;
         Property.call(this, name, this._makeColours(value));
         if (IB.colourEnabled) {
             this._labelClass = 'ib-colour-label';
@@ -266,7 +267,7 @@
         },
         _generateNode: function() {
             var element;
-            var mono_options = _.map(IB.MonochromeMap, this._createColour);
+            var mono_options = _.map(IB.makeMonochromeMap(this.is_fill), this._createColour);
             this._bwNode = $('<select class="ib-property ib-colour">')
                 .append(mono_options)
                 .val(this._value[IB.ColourModes.Monochrome].name)

ide/static/ide/js/ib/utils.js

@@ -47,11 +47,16 @@
     IB.ColourClear = IB.ColourMap['GColorClear'];
     IB.ColourWhite = IB.ColourMap['GColorWhite'];
     IB.ColourBlack = IB.ColourMap['GColorBlack'];
-
-    IB.MonochromeMap = {
-        GColorWhite: IB.ColourWhite,
-        GColorBlack: IB.ColourBlack,
-        GColorClear: IB.ColourClear
+    IB.DitheredGray = new IB.Colour('GColorLightGray', '#7F7F7F', 'Gray');
+    IB.makeMonochromeMap = function(is_fill) {
+        colour_map = {};
+        colour_map['GColorWhite'] = IB.ColourWhite;
+        if (is_fill && CloudPebble.ProjectInfo.sdk_version == "3") {
+            colour_map['GColorLightGray'] = IB.DitheredGray;
+        }
+        colour_map['GColorBlack'] = IB.ColourBlack;
+        colour_map['GColorClear'] = IB.ColourClear;
+        return colour_map;
     };
 
     /**