diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
new file mode 100644
index 0000000000..2f0539a591
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -0,0 +1,57 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbCheckbox
+@restrict E
+@scope
+
+@description
+Added in Umbraco version 7.14.0 Use this directive to render an umbraco checkbox.
+
+
Markup example
+
+
+
+
+
+
+
+
+
+@param {boolean} model Set to true or false to set the checkbox to checked or unchecked.
+@param {string} value Set the value of the checkbox.
+@param {string} name Set the name of the checkbox.
+@param {string} text Set the text for the checkbox label.
+@param {string} onChange Callback when the value of the input element changes.
+
+
+**/
+
+(function () {
+ 'use strict';
+
+ function CheckboxDirective() {
+ var directive = {
+ restrict: 'E',
+ replace: true,
+ templateUrl: 'views/components/forms/umb-checkbox.html',
+ scope: {
+ model: "=",
+ value: "@",
+ name: "@",
+ text: "@",
+ required: "=",
+ onChange: "&"
+ }
+ };
+
+ return directive;
+
+ }
+
+ angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
new file mode 100644
index 0000000000..927a5f323e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
@@ -0,0 +1,55 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbRadiobutton
+@restrict E
+@scope
+
+@description
+Added in Umbraco version 7.14.0 Use this directive to render an umbraco radio button.
+
+
Markup example
+
+
+
+
+
+
+
+
+
+@param {boolean} model Set to true or false to set the radiobutton to checked or unchecked.
+@param {string} value Set the value of the radiobutton.
+@param {string} name Set the name of the radiobutton.
+@param {string} text Set the text for the radiobutton label.
+
+
+**/
+
+(function () {
+ 'use strict';
+
+ function RadiobuttonDirective() {
+ var directive = {
+ restrict: 'E',
+ replace: true,
+ templateUrl: 'views/components/forms/umb-radiobutton.html',
+ scope: {
+ model: "=",
+ value: "@",
+ name: "@",
+ text: "@",
+ required: "="
+ }
+ };
+
+ return directive;
+
+ }
+
+ angular.module('umbraco.directives').directive('umbRadiobutton', RadiobuttonDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 9458b11f46..88988485fe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -117,6 +117,7 @@
@import "components/umb-confirm-action.less";
@import "components/umb-keyboard-shortcuts-overview.less";
@import "components/umb-checkbox-list.less";
+@import "components/umb-form-check.less";
@import "components/umb-locked-field.less";
@import "components/umb-tabs.less";
@import "components/umb-load-indicator.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
index 02f30f6f35..985e57bea5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
@@ -1,3 +1,6 @@
+@checkboxWidth: 15px;
+@checkboxHeight: 15px;
+
.umb-checkbox-list {
list-style: none;
margin-left: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
new file mode 100644
index 0000000000..131fb632bd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
@@ -0,0 +1,127 @@
+@checkboxWidth: 15px;
+@checkboxHeight: 15px;
+
+.umb-form-check {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ position: relative;
+ padding: 0;
+ margin: 0;
+ min-height: 22px;
+ cursor: pointer !important;
+
+ &__text{
+ margin: 0 0 0 26px;
+ position: relative;
+ top: -1px;
+ }
+
+ &__input{
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+
+ &:checked ~ .umb-form-check__state .umb-form-check__check{
+ border-color: @ui-option-type;
+ }
+
+ &:focus:checked ~ .umb-form-check .umb-form-check__check,
+ &:focus ~ .umb-form-check__state .umb-form-check__check{
+ border-color: @inputBorderFocus;
+ }
+
+ &:checked ~ .umb-form-check__state{
+ .umb-form-check__check{
+ // This only happens if the state has a radiobutton modifier
+ .umb-form-check--radiobutton &{
+ &:before{
+ opacity: 1;
+ transform: scale(1);
+ }
+ }
+
+ // This only happens if state has the checkbox modifier
+ .umb-form-check--checkbox &{
+ &:before{
+ width: @checkboxWidth;
+ height: @checkboxHeight;
+ }
+ }
+ }
+
+ // This only happens if state has the checkbox modifier
+ .umb-form-check--checkbox &{
+ .umb-form-check__icon{
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ &__state{
+ height: 17px;
+ position: absolute;
+ top: 2px;
+ left: 0;
+ }
+
+ &__check{
+ position: relative;
+ border: 1px solid @inputBorder;
+ width: @checkboxWidth;
+ height: @checkboxHeight;
+
+ &:before{
+ content: "";
+ background: @ui-option-type;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ }
+
+ // This only happens if state has the radiobutton modifier
+ .umb-form-check--radiobutton &{
+ border-radius: 100%;
+
+ &:before{
+ width: 9px;
+ height: 9px;
+ border-radius: 100%;
+ opacity: 0;
+ transform: scale(0);
+ transition: .15s ease-out;
+ }
+ }
+
+ // This only happens if state has the checkbox modifier
+ .umb-form-check--checkbox &{
+ &:before{
+ width: 0;
+ height: 0;
+ transition: .05s ease-out;
+ }
+ }
+ }
+
+ &__icon{
+ color: @white;
+ text-align: center;
+ font-size: 10px;
+ opacity: 0;
+ transition: .2s ease-out;
+
+ &:before{
+ position: absolute;
+ top: -2px;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ }
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 307f32788e..df106fb7b3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -18,7 +18,16 @@
&-push {
float:right;
- }
+ }
+
+ &--list{
+ float: left;
+ }
+
+ &__item{
+ line-height: 1;
+ margin: 0 0 5px;
+ }
}
.umb-property-editor-tiny {
@@ -213,7 +222,7 @@
margin: 24px 0 0;
display: flex;
}
-
+
&__input {
width: 100%;
&-wrap{
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
new file mode 100644
index 0000000000..6b716f939f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -0,0 +1,15 @@
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
new file mode 100644
index 0000000000..c4b35577a8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
@@ -0,0 +1,12 @@
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
index 5e7eff0d1e..be3d5217f5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
@@ -37,13 +37,16 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
//check if it's already in sync
//get the checked vals from the view model
- var selectedVals = _.map(_.filter($scope.selectedItems,
+ var selectedVals = _.map(
+ _.filter($scope.selectedItems,
function(f) {
return f.checked;
- }),
+ }
+ ),
function(m) {
return m.value;
- });
+ }
+ );
//get all of the same values between the arrays
var same = _.intersection($scope.model.value, selectedVals);
//if the lengths are the same as the value, then we are in sync, just exit
@@ -64,18 +67,19 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
}
function changed(item) {
+
var index = _.findIndex($scope.model.value,
function (v) {
return v === item.val;
- });
+ }
+ );
if (item.checked) {
//if it doesn't exist in the model, then add it
if (index < 0) {
$scope.model.value.push(item.val);
}
- }
- else {
+ } else {
//if it exists in the model, then remove it
if (index >= 0) {
$scope.model.value.splice(index, 1);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
index 7ec7067734..ac8503dbe7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
@@ -1,16 +1,7 @@