Skip to content

Commit

Permalink
SDK-dependant options and display
Browse files Browse the repository at this point in the history
  • Loading branch information
Joseph Atkins-Turkish committed Jan 12, 2016
1 parent 2602ca2 commit b6ee338
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 51 deletions.
35 changes: 28 additions & 7 deletions ide/static/ide/css/ib.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions ide/static/ide/js/ib/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions ide/static/ide/js/ib/ib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
11 changes: 9 additions & 2 deletions ide/static/ide/js/ib/layers/actionbarlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand Down
70 changes: 40 additions & 30 deletions ide/static/ide/js/ib/properties.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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];
});
Expand Down Expand Up @@ -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]);
}
},
/**
Expand All @@ -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>')
Expand Down
20 changes: 10 additions & 10 deletions ide/static/ide/js/ib/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion ide/static/ide/js/ib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@
};
IB.colourMode = null;


IB.ColourMap = {
GColorClear: new IB.Colour('GColorClear', 'rgba(0, 0, 0, 0)', gettext('Transparent'))
};
Expand Down
2 changes: 1 addition & 1 deletion ide/static/ide/js/resources.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'});
Expand Down

0 comments on commit b6ee338

Please sign in to comment.