SDK-dependant options and display

Author: Joseph Atkins-Turkish

ide/static/ide/css/ib.css

@@ -160,33 +160,54 @@
 
 /* ActionBarLayer */
 
-.ib-actionbarlayer {
+.ib-canvas-sdk2 .ib-actionbarlayer {
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
 }
 
 .ib-actionbarlayer-icon {
     position: absolute;
-    left: 1px;
-    width: 18px;
-    height: 18px;
     text-align: center;
     background-repeat: no-repeat;
     pointer-events: none;
 }
 
-.ib-icon-up {
+.ib-canvas-sdk2 .ib-actionbarlayer-icon {
+    left: 1px;
+    width: 18px;
+    height: 18px;
+}
+
+.ib-canvas-sdk3 .ib-actionbarlayer-icon {
+    left: 5px;
+    width: 22px;
+    height: 22px;
+}
+
+.ib-canvas-sdk2 .ib-icon-up {
     top: calc(16% - 9px);
 }
 
-.ib-icon-select {
+.ib-canvas-sdk2 .ib-icon-select {
     top: calc(50% - 9px);
 }
 
-.ib-icon-down {
+.ib-canvas-sdk2 .ib-icon-down {
     top: calc(83% - 9px);
 }
 
+.ib-canvas-sdk3 .ib-icon-up {
+    top: calc(19% - 11px);
+}
+
+.ib-canvas-sdk3 .ib-icon-select {
+    top: calc(50% - 11px);
+}
+
+.ib-canvas-sdk3 .ib-icon-down {
+    top: calc(80% - 11px);
+}
+
 /* MenuLayer */
 
 .ib-menulayer {

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

@@ -44,6 +44,8 @@
         function init(parent) {
             mNode = $('<div class="ib-canvas">');
             mNode.on('mousedown', handleMouseDown);
+            mNode.toggleClass('ib-canvas-sdk2', CloudPebble.ProjectInfo.sdk_version == "2");
+            mNode.toggleClass('ib-canvas-sdk3', CloudPebble.ProjectInfo.sdk_version == "3");
             mNode.appendTo(parent);
 
             render();

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

@@ -93,6 +93,7 @@
             init();
         };
         if (!IB.colourMode) {
+            IB.ColourEnabled = (CloudPebble.ProjectInfo.sdk_version == "3");
             IB.colourMode = (CloudPebble.ProjectInfo.sdk_version == "3" ? IB.ColourModes.Colour : IB.ColourModes.Monochrome);
         }
         init();

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

@@ -32,8 +32,15 @@
             this._properties['icon_' + it].on('change', _.partial(this._handleIconChange, it), this);
         }, this);
 
-        this.setSize(20, 146);
-        this.setPos(124, 3);
+        if (CloudPebble.ProjectInfo.sdk_version == "3") {
+            this.setSize(30, 168);
+            this.setPos(114, 0);
+        }
+        else {
+            this.setSize(20, 146);
+            this.setPos(124, 3);
+        }
+
         this._size.lock();
         this._pos.lock();
     };

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

@@ -197,7 +197,9 @@
      */
     IB.Properties.Colour = function(name, value) {
         Property.call(this, name, this._makeColours(value));
-        this._labelClass = 'ib-colour-label';
+        if (IB.ColourEnabled) {
+            this._labelClass = 'ib-colour-label';
+        }
     };
     IB.Properties.Colour.prototype = Object.create(_super);
     IB.Properties.Colour.prototype.constructor = IB.Properties.Colour;
@@ -207,7 +209,7 @@
                 value = IB.ColourMap[value];
             }
             if (_.isArray(value)) {
-                if (value[0] == "COLOR_FALLBACK") {
+                if (value[0] == "PBL_IF_COLOR_ELSE") {
                     value = _.map(value.slice(1), function(c) {
                         return IB.ColourMap[c];
                     });
@@ -247,7 +249,7 @@
             if (_.uniq(this._value).length == 1) {
                 return this._value[0].name;
             } else {
-                return interpolate("COLOR_FALLBACK(%s, %s)", [this._value[0].name, this._value[1].name]);
+                return interpolate("PBL_IF_COLOR_ELSE(%s, %s)", [this._value[0].name, this._value[1].name]);
             }
         },
         /**
@@ -263,39 +265,47 @@
             }
         },
         _generateNode: function() {
+            var element;
             var mono_options = _.map(IB.MonochromeMap, this._createColour);
-            var table = $(interpolate('<table class="ib-colours">' +
-                '<thead><tr><th>%s</th><th>%s</th></tr></thead>' +
-                '<tbody><tr></tr></tbody>' +
-                '</table>', [gettext("Colour Watches"), gettext("B/W Watches")]));
-            var tr = table.find('tbody tr');
-            var td = $("<td></td>").appendTo(tr);
-            var div = $('<div></div>').appendTo(td);
-            this._colourNode =  $('<input type="text" class="item-color item-color-normal" name="color-1">')
-                .change(_.bind(this._handleChange, this))
-                .val(this._value[IB.ColourModes.Colour].name)
-                .appendTo(div);
-
             this._bwNode = $('<select class="ib-property ib-colour">')
                 .append(mono_options)
                 .val(this._value[IB.ColourModes.Monochrome].name)
                 .change(_.bind(this._handleChange, this));
-            this._bwNode.appendTo("<td>").parent().appendTo(tr);
-            var self = this;
-            setTimeout(function() {
-                self._colourNode.pebbleColourPicker({
-                    value_mapping: function(value) {
-                        if (value == "transparent") {
-                            return "GColorClear";
-                        }
-                        else {
-                            return _.findWhere(IB.ColourMap, {css: value});
+
+            if (IB.ColourEnabled) {
+                element = $(interpolate('<table class="ib-colours">' +
+                    '<thead><tr><th>%s</th><th>%s</th></tr></thead>' +
+                    '<tbody><tr></tr></tbody>' +
+                    '</table>', [gettext("Colour Watches"), gettext("B/W Watches")]));
+                var tr = element.find('tbody tr');
+                var td = $("<td></td>").appendTo(tr);
+                var div = $('<div></div>').appendTo(td);
+                this._colourNode =  $('<input type="text" class="item-color item-color-normal" name="color-1">')
+                    .change(_.bind(this._handleChange, this))
+                    .val(this._value[IB.ColourModes.Colour].name)
+                    .appendTo(div);
+                this._bwNode.appendTo("<td>").parent().appendTo(tr);
+
+                var self = this;
+                setTimeout(function() {
+                    self._colourNode.pebbleColourPicker({
+                        value_mapping: function(value) {
+                            if (value == "transparent") {
+                                return "GColorClear";
+                            }
+                            else {
+                                return _.findWhere(IB.ColourMap, {css: value});
+                            }
                         }
-                    }
-                });
-                self._setColourCSS();
-            }, 1);
-            return table;
+                    });
+                    self._setColourCSS();
+                }, 0);
+            }
+            else {
+                this._colourNode = this._bwNode;
+                element = this._bwNode;
+            }
+            return element;
         },
         _createColour: function(colour) {
             return $('<option>')

ide/static/ide/js/ib/settings.js

@@ -4,14 +4,14 @@
     IB.Settings.ColourMode = {
         name: gettext("Preview Mode"),
         id: 'ib-setting-colourmode',
+        isEnabled: function() {return IB.ColourEnabled;},
         renderNode: function (parent) {
             var isColour = IB.colourMode == IB.ColourModes.Colour;
-            var node = $('<select>' +
-                interpolate('<option value="0" %s>%s</option>', [(isColour ? 'selected' : ''), gettext("Colour")]) +
-                interpolate('<option value="1" %s>%s</option>', [(isColour ? '' : 'selected'), gettext("Monochrome")]) +
-                '</select>').attr('id', 'ib-setting-colourmode');
-            node.change(_.bind(this.handleChange, parent));
-            return node;
+            console.log("makign mode setting");
+            return $('<select>')
+                .append(interpolate('<option value="0" %s>%s</option>', [(isColour ? 'selected' : ''), gettext("Colour")]))
+                .append(interpolate('<option value="1" %s>%s</option>', [(isColour ? '' : 'selected'), gettext("Monochrome")]))
+                .change(_.bind(this.handleChange, parent));
         },
         handleChange: function (evt) {
             IB.colourMode = parseInt(evt.target.value, 10);
@@ -43,10 +43,10 @@
 
             var form = this._formNode;
             form.empty();
-
-            _.each(IB.Settings, function (setting, name) {
-                form.append(this._generateControlGroup(setting));
-            }, this);
+            _.chain(IB.Settings)
+                .filter(function(setting){return setting.isEnabled();})
+                .map(function(setting) {return this._generateControlGroup(setting);}, this)
+                .each(function(element){form.append(element);});
         },
         /**
          * Empties the contents of the parent node

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

@@ -37,7 +37,6 @@
     };
     IB.colourMode = null;
 
-
     IB.ColourMap = {
         GColorClear: new IB.Colour('GColorClear', 'rgba(0, 0, 0, 0)', gettext('Transparent'))
     };

ide/static/ide/js/resources.js

@@ -964,7 +964,7 @@ CloudPebble.Resources = (function() {
             return names;
         },
         GetBitmaps: function() {
-            return _.filter(project_resources, function(item) { return /^png/.test(item.kind); });
+            return _.filter(project_resources, function(item) { return /^(png|bitmap)/.test(item.kind); });
         },
         GetFonts: function() {
             return _.where(project_resources, {kind: 'font'});