From dad8b2a025088672c1e8d448f1e614f7ae2f4d95 Mon Sep 17 00:00:00 2001 From: Keegan Date: Mon, 14 Mar 2016 03:09:23 +1100 Subject: [PATCH] add allowGray option to color picker --- README.md | 16 ++++++++- src/scripts/components/color.js | 11 ++++--- test/spec/components/color.js | 58 ++++++++++++++++++++++++++------- 3 files changed, 68 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index b45995d..990d3d4 100755 --- a/README.md +++ b/README.md @@ -300,7 +300,7 @@ A color picker that allows users to choose a color from the ones that are compat The color picker will automatically show a different layout depending on the watch connected: - Aplite (Firmware 2.x) - Black and white - - Aplite (Firmware 3.x) - Black, white and gray + - Aplite (Firmware 3.x) - Black and white. Will also include gray (`#AAAAAA`) if `allowGray` is set to `true` - Basalt/chalk - The 64 colors compatible with color Pebble smartwatches. ##### Properties @@ -315,6 +315,7 @@ The color picker will automatically show a different layout depending on the wat | description | string | Optional sub-text to include below the component | | sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. | | layout | string OR array | Optional. Use a custom layout for the color picker. Defaults to automatically choosing the most appropriate layout for the connected watch. The layout is represented by a two dimensional array. Use `false` to insert blank spaces. You may also use one of the preset layouts by setting `layout` to: `"COLOR"`, `"GRAY"` or `"BLACK_WHITE"` | +| allowGray | boolean | Optional. Set this to `true` to include gray (`#AAAAAA`) in the color picker for aplite running on firmware 3 and above. This is optional because only a subset of the drawing operations support gray on aplite. Defaults to `false` | ##### Example @@ -346,6 +347,19 @@ The color picker will automatically show a different layout depending on the wat } ``` +##### Example + +```javascript +{ + "type": "color", + "appKey": "background", + "defaultValue": "aaaaaa", + "label": "Background Color", + "sunlight": false, + "allowGray": true +} +``` + --- #### Radio Group diff --git a/src/scripts/components/color.js b/src/scripts/components/color.js index 8da578a..0420ca7 100644 --- a/src/scripts/components/color.js +++ b/src/scripts/components/color.js @@ -48,14 +48,15 @@ module.exports = { * @returns {Array} */ function autoLayout() { - if (!clay.meta.activeWatchInfo) { + if (!clay.meta.activeWatchInfo || + clay.meta.activeWatchInfo.firmware.major === 2 || + clay.meta.activeWatchInfo.platform === 'aplite' && + !self.config.allowGray) { return standardLayouts.BLACK_WHITE; } - if (clay.meta.activeWatchInfo.platform === 'aplite') { - return clay.meta.activeWatchInfo.firmware.major === 2 ? - standardLayouts.BLACK_WHITE : - standardLayouts.GRAY; + if (clay.meta.activeWatchInfo.platform === 'aplite' && self.config.allowGray) { + return standardLayouts.GRAY; } return standardLayouts.COLOR; diff --git a/test/spec/components/color.js b/test/spec/components/color.js index 837b1cf..620e50f 100644 --- a/test/spec/components/color.js +++ b/test/spec/components/color.js @@ -111,16 +111,24 @@ function testCustomLayout(layout, expectedColors) { /** * @param {string} platform * @param {Array} layout - * @param {string} [desc] + * @param {boolean} allowGray + * @param {string} desc * @param {Object} activeWatchInfo * @return {void} */ -function testAutoLayout(platform, layout, desc, activeWatchInfo) { - it('chooses the best layout for the ' + (desc || platform) + ' platform', +function testAutoLayout(platform, layout, allowGray, desc, activeWatchInfo) { + it('chooses the best layout for the ' + (desc || platform) + + ' platform when allowGray is ' + allowGray, function() { - var clayConfig = fixture.clayConfig(['color'], true, true, {}, { - activeWatchInfo: activeWatchInfo - }); + var clayConfig = fixture.clayConfig( + [{type: 'color', allowGray: allowGray}], + true, + true, + {}, + { + activeWatchInfo: activeWatchInfo + } + ); var colorItem = clayConfig.getItemsByType('color')[0]; assert.deepEqual(colorItem._layout, layout); }); @@ -285,8 +293,11 @@ describe('component - color', function() { describe('layouts', function() { - testAutoLayout('aplite', standardLayouts.BLACK_WHITE, 'aplite (2.x)', null); - testAutoLayout('aplite', standardLayouts.BLACK_WHITE, 'aplite (2.x)', { + // allow gray does nothing for 2.x + testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)', + null + ); + testAutoLayout('aplite', standardLayouts.BLACK_WHITE, true, 'aplite (2.x)', { platform: 'aplite', model: 'qemu_platform_aplite', language: 'en_US', @@ -297,7 +308,21 @@ describe('component - color', function() { suffix: '' } }); - testAutoLayout('aplite', standardLayouts.GRAY, 'aplite (3.x)', { + testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)', + null + ); + testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (2.x)', { + platform: 'aplite', + model: 'qemu_platform_aplite', + language: 'en_US', + firmware: { + major: 2, + minor: 10, + patch: 0, + suffix: '' + } + }); + testAutoLayout('aplite', standardLayouts.BLACK_WHITE, false, 'aplite (3.x)', { platform: 'aplite', model: 'qemu_platform_aplite', language: 'en_US', @@ -308,7 +333,18 @@ describe('component - color', function() { suffix: '' } }); - testAutoLayout('basalt', standardLayouts.COLOR, '', { + testAutoLayout('aplite', standardLayouts.GRAY, true, 'aplite (3.x)', { + platform: 'aplite', + model: 'qemu_platform_aplite', + language: 'en_US', + firmware: { + major: 3, + minor: 10, + patch: 0, + suffix: '' + } + }); + testAutoLayout('basalt', standardLayouts.COLOR, true, '', { platform: 'basalt', model: 'qemu_platform_basalt', language: 'en_US', @@ -319,7 +355,7 @@ describe('component - color', function() { suffix: '' } }); - testAutoLayout('chalk', standardLayouts.COLOR, '', { + testAutoLayout('chalk', standardLayouts.COLOR, true, '', { platform: 'chalk', model: 'qemu_platform_chalk', language: 'en_US',