Page 1 of 1

Button colors

Posted: 12 July 2016, 22:25
by Peyo61
The addActionButton doc specifies only 3 color choices: blue, red, gray.

I would REALLY like to use another color, like white, in my interface (where it makes sense to associate button color to action). Is this too much to ask the site devs to consider this ?

I did try "gray", which would actually be acceptable, but it turns out transparent which makes the button kind-of disappear next to his bright-colored button-friends. Not nice at all. Anyway I think adding a few bright color choices would not hurt :-)

Hope this gets some support !

Cheers,
Pierre

Re: Button colors

Posted: 13 July 2016, 20:03
by Victoria_La
Just define you own addButton, call original one, find a button
using dojo function and change its style. The other option redefine the style in your stylesheet, for example blue button style is .bgabutton_blue, if you redefine it to be white all blue buttons will be white.
Dynamic way is
dojo.query('.action-button').removeClass('bgabutton_blue');
dojo.query('.action-button').addClass('bgabutton_white');
And you have to have .bgabutton_white defined in our stylesheet.

Re: Button colors

Posted: 14 July 2016, 23:49
by Peyo61
Thanks for the hints. However it seems that it's not that simple, or at least too complicated for me.

The styling of the bgabutton's, which I copied from the BGA main CSS and tried to mimic for a white button, is too sophisticated for me, and changing the class gives weird results. Plus not future-proof I guess.

I really wish the BGA devs would consider adding a few more bright colors to the button API... (which would be future-proof by definition)

Re: Button colors

Posted: 20 July 2016, 03:02
by Victoria_La
I just tried that it works as expected, I defined a new function

Code: Select all

        addWhiteActionButton : function(id, div, handler) {
            this.addActionButton(id, div, handler, '', false, 'gray');
            dojo.style(id, "background-color", "white");
            dojo.style(id, "border", "1px solid white");
        },
to call

Code: Select all

    this.addWhiteActionButton("button_" + die, htmlOrTextForMyDie, 'onDieSelect');