radio control

app/app/components/ui/ui-radio.js

@@ -0,0 +1,28 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+	tagName: 'span',
+	value: '',
+	onClick: null,
+
+	actions: {
+		onCheck() {
+			if (this.get('onClick') !== null) {
+				this.attrs.onClick(this.get('value'));
+			} else {
+				this.set('selected', !this.get('selected'));
+			}
+		}
+	}
+});

app/app/styles/widget/widget-radio.scss

@@ -0,0 +1,27 @@
+.ui-radio {
+	vertical-align: bottom;
+	cursor: pointer;
+	font-size: 1.1rem;
+	overflow: hidden;
+	white-space: nowrap;
+	margin: 0 0 5px 0;
+
+	> .material-icons {
+		font-size: 1.4rem;
+		color: $color-gray;
+		vertical-align: top;
+		margin-right: 5px;
+	}
+
+	> .selected {
+		color: $color-link;
+	}
+
+	&:hover {
+		color: $color-link;
+	}
+}
+
+.ui-radio-selected {
+	color: $color-link;
+}

app/app/styles/widget/widget.scss

@@ -72,5 +72,6 @@
 @import "widget-table";
 @import "widget-tooltip";
 @import "widget-checkbox";
+@import "widget-radio";
 @import "widget-tab";
 @import "widget-selection";

app/app/templates/components/ui/ui-radio.hbs

@@ -0,0 +1,8 @@
+<div class="ui-radio {{if selected 'ui-radio-selected'}}" {{action 'onCheck'}}>
+	{{#if selected}}
+		<i class="material-icons selected">radio_button_checked</i>
+	{{else}}
+		<i class="material-icons">radio_button_unchecked</i>
+	{{/if}}
+	{{yield}}
+</div>