Can the colors of things be changed?

[rajid]

I'd like to change the color of the toggle, when it's "on" from red to green. I'd also like to make the submit button green. Is there a way to set colors in the Clay driven API? I was expecting some "attribute" but can't find any such documention.

[keegan-lillo]

There isn't a "direct" API for changing styles as the intent is for it to look as close to the native styling as possible, however you do have access to the "Minified" api of the element itself via the $element property: https://github.com/pebble/clay#clayitem-object-config-
http://minifiedjs.com/api/

clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
  var coolStuffToggle = clayConfig.getItemByMessageKey('cool_stuff');
  coolStuffToggle.on('change', function() {
    // only set the background if toggled
    var toggled = this.get();
    coolStuffToggle.$element.select('.marker').set('$backgroundColor',  toggled ? 'green' : null);
    coolStuffToggle.$element.select('.slide').set('$backgroundColor', toggled ? 'darkgreen' : null);
  })
});

[rajid]

Ok, thanks! I'll play with it. /raj

…

On Mar 30, 2017, at 6:21 PM, Keegan Lillo ***@***.*** ***@***.***>> wrote: There isn't a "direct" API for changing styles as the intent is for it to look as close to the native styling as possible, however you do have access to the "Minified" api of the element itself via the $element property: https://github.com/pebble/clay#clayitem-object-config- <https://github.com/pebble/clay#clayitem-object-config-> http://minifiedjs.com/api/ <http://minifiedjs.com/api/> clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() { var coolStuffToggle = clayConfig.getItemByMessageKey('cool_stuff'); coolStuffToggle.on('change', function() { // only set the background if toggled var toggled = this.get(); coolStuffToggle.$element.select('.marker').set('$backgroundColor', toggled ? 'green' : null); coolStuffToggle.$element.select('.slide').set('$backgroundColor', toggled ? 'darkgreen' : null); }) }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#157 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFAlZfDwDYt3QmIp5P1c1L_4lMzUC1YYks5rrFT_gaJpZM4MvE7O>. <https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png> <https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png> <https://github.com/pebble/clay> <https://github.com/pebble/clay#clayitem-object-config-\r\nhttp://minifiedjs.com/api/\r\n\r\n```js\r\nclayConfig.on> <#157 (comment)>

[rajid]

Thanks for this! It works just fine for setting the slider colors. I'm still trying to set the background color of the "Submit" button itself. I defined it in config.js as: { "type": "submit", "id": "submit", "defaultValue": "save" } which allows me to find it easily with "clayConfig.getItemById('submit')" (I think?), but when I do: clayConfig.getItemById('submit').$element.set({$backgroundColor: 'green'}); it sets the color of the background behind the button instead of the button itself. I tried things like: clayConfig.getItemById('submit').$element.select(".label").set({$backgroundColor: 'green'}); clayConfig.getItemById('submit').$element.select(".button").set({$backgroundColor: 'green'}); but nothing works. I don't know enough JS to be able to discover the name of the element to set. Can you help me with this? I promise this is the last thing I need to do here! /raj

…

On Mar 30, 2017, at 6:21 PM, Keegan Lillo ***@***.*** ***@***.***>> wrote: There isn't a "direct" API for changing styles as the intent is for it to look as close to the native styling as possible, however you do have access to the "Minified" api of the element itself via the $element property: https://github.com/pebble/clay#clayitem-object-config- <https://github.com/pebble/clay#clayitem-object-config-> http://minifiedjs.com/api/ <http://minifiedjs.com/api/> clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() { var coolStuffToggle = clayConfig.getItemByMessageKey('cool_stuff'); coolStuffToggle.on('change', function() { // only set the background if toggled var toggled = this.get(); coolStuffToggle.$element.select('.marker').set('$backgroundColor', toggled ? 'green' : null); coolStuffToggle.$element.select('.slide').set('$backgroundColor', toggled ? 'darkgreen' : null); }) }); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#157 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFAlZfDwDYt3QmIp5P1c1L_4lMzUC1YYks5rrFT_gaJpZM4MvE7O>. <https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png> <https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png> <https://github.com/pebble/clay> <https://github.com/pebble/clay#clayitem-object-config-\r\nhttp://minifiedjs.com/api/\r\n\r\n```js\r\nclayConfig.on> <#157 (comment)>

[keegan-lillo]

Yeh none of those selectors will target what you want. Have a look at the source for a submit button https://github.com/pebble/clay/blob/master/src/templates/components/submit.tpl

You want . select("button") not . select(".button")

I'm also not sure why you want to change the colors of the elements. The whole point behind Clay is for it to maintain visual consistency with the rest of the Pebble app (and other developers). By you changing the colors of things, you're interrupting that consistency.

[rajid]

Sorry, I wasn't very clear about my purposes. The program is a special version of my "Orbits" watchface which I produced for my wife. She has type 1 diabetes and I wanted a watchface which would visually remind her when it's time to change your insulin pump (every 3 days). She liked my Orbits watchface, so I modified it with the additional functionality. Later, I realized that I wanted to use your "Clay" package, since it doesn't require an Internet connection in order to make the configuration page work. When I switched it, she immediately said, "Why is the 'Save' button red, and when the toggles turn red it makes it look to me as though it's not selected when it is. I think they should be green." I couldn't help but agree with her logic, actually, and while it really didn't matter to me, if you're married, then you know that making the wife happy is a worthwhile endeavor! Plus, I was just wondering how hard it could be to change something as simple as color, and I figured I'd learn more javascript in the process! Well, now I know that it's not trivial, but it's not that hard either, thanks to your help! I was pretty close to the correct solution and I enjoyed playing with it. I think she'll be happy with this, and since the program is custom for her, no else will see it! Thanks a lot for all of your help! I really appreciate it! /raj

…

On Mar 31, 2017, at 10:22 PM, Keegan Lillo ***@***.*** ***@***.***>> wrote: Yeh none of those selectors will target what you want. Have a look at the source for a submit button https://github.com/pebble/clay/blob/master/src/templates/components/submit.tpl <https://github.com/pebble/clay/blob/master/src/templates/components/submit.tpl> You want . select("button") not . select(".button") I'm also not sure why you want to change the colors of the elements. The whole point behind Clay is for it to maintain visual consistency with the rest of the Pebble app (and other developers). By you changing the colors of things, you're interrupting that consistency. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#157 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFAlZSDulWboiO4zCQgGNHTC-jYYfijwks5rrd8AgaJpZM4MvE7O>. <https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png> <https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png> <https://github.com/pebble/clay> <https://github.com/pebble/clay/blob/master/src/templates/components/submit.tpl/r/n/r/nYou> <#157 (comment)>