Adds radio buttons and groups and checkboxes

[rjanja]

Following the discussion I had with @glebihan I've added radio buttons and checkboxes for building Cinnamon-looking controls.

The default look committed to Cinnamon theme lacks colour but if colour is desired I suggest adding a background-color to the StBin and then box-shadow to each of the four StBin definitions.

E.g.

.radiobutton CinnamonGenericContainer {
    spacing: .2em;
    height: 26px;
    padding-top: 2px;
}

.radiobutton StBin {
    width: 22px;
    height: 22px;
    background-color: #c2dda7;
    background-image: url("radiobutton-off.svg");
    border-radius: 15px;
    box-shadow: inset 0px 0px 15px rgba(194, 221, 167, 0.1);
}

.radiobutton:focus StBin {
    background-image: url("radiobutton-off.svg");
    box-shadow: inset 0px 0px 15px rgba(194, 221, 167, 0.5);
}

.radiobutton:checked StBin {
    background-image: url("radiobutton.svg");
    box-shadow: inset 0px 0px 15px rgba(194, 221, 167, 0.1);
}

.radiobutton:focus:checked StBin {
    background-image: url("radiobutton.svg");
    box-shadow: inset 0px 0px 15px rgba(194, 221, 167, 0.5);
}

.radiobutton StLabel {
   padding-top: 4px;
   font-size: 0.9em;
   box-shadow: none;
}

Becomes:

[rjanja]

Sample usage of radio buttons:

this.radioGroup = new RadioButton.RadioButtonGroup("fruit");
this.radioGroup.addButton('banana', _("An orange"));
this.radioGroup.addButton('orange', _("A banana"));
this.radioGroup.addButton('pineapple', _("A pineapple"));
this.radioGroup.connect("notify::radio-changed", Lang.bind(this, function() {
   this._selectedId = this.radioGroup.getActive();
   global.log("You selected: " + this._selectedId);
}));
this.radioGroup.setActive('orange');

[dalcde]

http://developer.gnome.org/gobject/stable/signal.html

The notify:: signal is used when a property of an object has changed (e.g. notify::hover is emitted when the property "hover" of a button is changed). I think the signal should be called "radio-changed" instead of "notify::radio-changed"

As a sidenote, shouldn't this be done in st instead?

[rjanja]

@dalcde I've changed the signal name. Thanks for pointing me at those docs, I had no idea it was being used to indicate property changed.

[bimsebasse]

Can I ask where checkboxes and radiobuttons are to be seen in Cinnamon? I can't reproduce a situation where either appear, and I can't find the radiobutton.svg's either anywhere on my system.

cinnamon 1.6.0-20120918044007-precise

[dalcde]

Makefile was not updated.

[bimsebasse]

Ah, OK.

[rjanja]

@bimsebasse I think there are plans to use this in the sound applet but I could be mistaken. If you're still looking for an example of the checkboxes in use you could install the desktop-capture applet I've been working on (here on github) and choose to do an "Interactive" mode capture (after right-clicking applet and setting camera to "Cinnamon"). It shows a modal that displays both the checkboxes and radio buttons.

I've been thinking it'd be nice to have a sample applet that uses every type of control available to demonstrate them for applet developers or be reference points for theme artists.

[bimsebasse]

Cheers rjanja - that's an excellent idea, actually, a reference applet, I'm gonna try to make one if no one else does.