diff --git a/apps/src/applab/designMode.js b/apps/src/applab/designMode.js index 9e38c83215ea6..f519935d1dd25 100644 --- a/apps/src/applab/designMode.js +++ b/apps/src/applab/designMode.js @@ -250,6 +250,15 @@ designMode.updateProperty = function (element, name, value) { break; case 'icon-color': element.setAttribute('data-icon-color', value); + const imageUrl = element.getAttribute('data-canonical-image-url'); + if (ICON_PREFIX_REGEX.test(imageUrl)) { + const url = assetPrefix.renderIconToString(imageUrl, element); + if (element.nodeName == "IMG") { + element.src = url; + } else { + element.style.backgroundImage = 'url(' + url + ')'; + } + } break; case 'image': var originalValue = element.getAttribute('data-canonical-image-url'); @@ -475,6 +484,8 @@ designMode.readProperty = function (element, name) { return parseFloat(element.style.fontSize); case 'textAlign': return element.style.textAlign; + case 'icon-color': + return element.getAttribute('data-icon-color'); case 'image': return element.getAttribute('data-canonical-image-url'); case 'screen-image': diff --git a/apps/src/applab/setPropertyDropdown.js b/apps/src/applab/setPropertyDropdown.js index 81d8ba6e692a0..ee566b555e1a6 100644 --- a/apps/src/applab/setPropertyDropdown.js +++ b/apps/src/applab/setPropertyDropdown.js @@ -42,6 +42,7 @@ var PROP_INFO = { // it won't show up in the dropdown. pictureImage: { friendlyName: 'image', internalName: 'picture', type: 'string' }, picture: { friendlyName: 'picture', internalName: 'picture', type: 'string', alias: true }, + iconColor: { friendlyName: 'icon-color', internalName: 'icon-color', type: 'string' }, groupId: { friendlyName: 'group-id', internalName: 'groupId', type: 'string' }, checked: { friendlyName: 'checked', internalName: 'checked', type: 'boolean' }, readonly: { friendlyName: 'readonly', internalName: 'readonly', type: 'boolean' }, @@ -78,6 +79,7 @@ PROPERTIES[ElementType.BUTTON] = { 'fontSize', 'textAlign', 'image', + 'iconColor', 'hidden' ] }; @@ -157,6 +159,7 @@ PROPERTIES[ElementType.IMAGE] = { 'y', 'pictureImage', 'picture', // Since this is an alias, it is not shown in the dropdown but is allowed as a value + 'iconColor', 'hidden' ] }; @@ -173,7 +176,8 @@ PROPERTIES[ElementType.SCREEN] = { propertyNames: [ 'text', 'backgroundColor', - 'screenImage' + 'screenImage', + 'iconColor' ] }; PROPERTIES[ElementType.TEXT_AREA] = { diff --git a/apps/test/integration/levelSolutions/applab/ec_setprop.js b/apps/test/integration/levelSolutions/applab/ec_setprop.js index 5dbe0f857b29c..343fce1027a70 100644 --- a/apps/test/integration/levelSolutions/applab/ec_setprop.js +++ b/apps/test/integration/levelSolutions/applab/ec_setprop.js @@ -31,6 +31,8 @@ module.exports = { console.log("font-size: " + getProperty("my_button", "font-size")); setProperty("my_button", "image", "${facebookImage}"); console.log("image: " + getProperty("my_button", "image")); + setProperty("my_button", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_button", "icon-color")); `, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level @@ -43,6 +45,7 @@ module.exports = { assert.equal(button.style.fontSize, '21px'); assert(/facebook_purple.png$/.test(button.getAttribute('data-canonical-image-url'))); + assert(/blue/.test(button.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); @@ -54,7 +57,8 @@ module.exports = { expect(debugOutput.textContent).to.contain('text-color: red\n'); expect(debugOutput.textContent).to.contain('background-color: green\n'); expect(debugOutput.textContent).to.contain('font-size: 21\n'); - expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png$/); + expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -78,7 +82,10 @@ module.exports = { setProperty("my_button", "font-size", 21); console.log("font-size: " + getProperty("my_button", "font-size")); setProperty("my_button", "image", "${facebookImage}"); - console.log("image: " + getProperty("my_button", "image"));`, + console.log("image: " + getProperty("my_button", "image")); + setProperty("my_button", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_button", "icon-color")); +`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -90,6 +97,7 @@ module.exports = { assert.equal(button.style.fontSize, '21px'); assert(/facebook_purple.png$/.test(button.getAttribute('data-canonical-image-url'))); + assert(/blue/.test(button.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); @@ -101,7 +109,8 @@ module.exports = { expect(debugOutput.textContent).to.contain('text-color: red\n'); expect(debugOutput.textContent).to.contain('background-color: green\n'); expect(debugOutput.textContent).to.contain('font-size: 21\n'); - expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png$/); + expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -194,7 +203,9 @@ step: 3`); setProperty("my_image", "picture", "${facebookImage}"); console.log("picture: " + getProperty("my_image", "picture")); setProperty("my_image", "hidden", true); - console.log("hidden: " + getProperty("my_image", "hidden"));`, + console.log("hidden: " + getProperty("my_image", "hidden")); + setProperty("my_image", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_image", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -210,6 +221,7 @@ step: 3`); assert.equal(image.style.top, '14px'); assert(/facebook_purple.png$/.test(image.src)); + assert(/blue/.test(image.getAttribute('data-icon-color'))); // visibility is set via a class, so use getComputedStyle assert(window.getComputedStyle(image).visibility, 'hidden'); @@ -227,6 +239,7 @@ step: 3`); expect(debugOutput.textContent).to.contain('y: 14\n'); expect(debugOutput.textContent).to.match(/picture: .*facebook_purple.png\n/); expect(debugOutput.textContent).to.contain('hidden: true'); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -253,7 +266,9 @@ step: 3`); setProperty("my_image", "picture", "${facebookImage}"); console.log("picture: " + getProperty("my_image", "picture")); setProperty("my_image", "hidden", true); - console.log("hidden: " + getProperty("my_image", "hidden"));`, + console.log("hidden: " + getProperty("my_image", "hidden")); + setProperty("my_image", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_image", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -269,6 +284,7 @@ step: 3`); assert.equal(image.style.top, '14px'); assert(/facebook_purple.png$/.test(image.src)); + assert(/blue/.test(image.getAttribute('data-icon-color'))); // visibility is set via a class, so use getComputedStyle assert(window.getComputedStyle(image).visibility, 'hidden'); @@ -286,6 +302,7 @@ step: 3`); expect(debugOutput.textContent).to.contain('y: 14\n'); expect(debugOutput.textContent).to.match(/picture: .*facebook_purple.png\n/); expect(debugOutput.textContent).to.contain('hidden: true'); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -400,7 +417,9 @@ step: 3`); '', xml: `setProperty("screen1", "image", "${flappyImage}"); - console.log("image: " + getProperty("screen1", "image"));`, + console.log("image: " + getProperty("screen1", "image")); + setProperty("screen1", "icon-color", "blue"); + console.log("icon-color: " + getProperty("screen1", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -410,12 +429,14 @@ step: 3`); console.log(screen.style.backgroundImage); assert(/url\(.*flappy_promo.png['"]?\)$/.test(screen.style.backgroundImage), 'screen background image should be flappy_promo.png. Instead: '+screen.style.backgroundImage); + assert(/blue/.test(screen.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); }, customValidator: function (assert) { var debugOutput = document.getElementById('debug-output'); - expect(debugOutput.textContent).to.match(/image: .*flappy_promo.png$/); + expect(debugOutput.textContent).to.match(/image: .*flappy_promo.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, expected: {