Merge pull request #3464 from BatJan/feature/temp-U4-3463

3463 - Suggestion: Make checkboxes look prettier in checkbox lists

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
+<b>Added in Umbraco version 7.14.0</b> Use this directive to render an umbraco checkbox.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-checkbox
+            name="checkboxlist"
+            value="{{key}}"
+            model="true"
+            text="{{text}}">
+        </umb-checkbox>
+
+    </div>
+</pre>
+
+@param {boolean} model Set to <code>true</code> or <code>false</code> 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.
+
+
+**/
+
+(function () {
+    'use strict';
+
+    function CheckboxDirective() {
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/forms/umb-checkbox.html',
+            scope: {
+                model: "=",
+                value: "@",
+                name: "@",
+                text: "@"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective);
+
+})();
+
+
+

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -0,0 +1,54 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbRadiobutton
+@restrict E
+@scope
+
+@description
+<b>Added in Umbraco version 7.14.0</b> Use this directive to render an umbraco radio button.
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <umb-radiobutton
+            name="checkboxlist"
+            value="{{key}}"
+            model="true"
+            text="{{text}}">
+        </umb-radiobutton>
+
+    </div>
+</pre>
+
+@param {boolean} model Set to <code>true</code> or <code>false</code> 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: "@"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbRadiobutton', RadiobuttonDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -101,6 +101,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";

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;

src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less

@@ -0,0 +1,125 @@
+@checkboxWidth: 15px;
+@checkboxHeight: 15px;
+
+.umb-form-check {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    position: relative;
+    padding: 0;
+    margin: 0;
+
+    &__text{
+        margin: 0 0 0 26px;
+        position: relative;
+        top: 2px;
+    }
+
+    &__input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+
+        &:checked ~ .umb-form-check__state .umb-form-check__check{
+            border-color: @green;
+        }
+
+        &:focus:checked ~ .umb-form-check .umb-form-check__check,
+        &:focus ~ .umb-form-check__state .umb-form-check__check{
+            border-color: @gray-5;
+        }
+
+        &: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 @gray-7;
+        width: @checkboxWidth;
+        height: @checkboxHeight;
+
+        &:before{
+            content: "";
+            background: @green;
+            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;
+        }
+    }
+}

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -13,7 +13,16 @@
 
 	&-push {
 		float:right;
-	}
+    }
+
+    &--list{
+        float: left;
+    }
+
+    &__item{
+        line-height: 1;
+        margin: 0 0 5px;
+    }
 }
 
 .umb-editor-tiny {
@@ -246,7 +255,7 @@ div.umb-codeeditor .umb-btn-toolbar {
         margin: 24px 0 0;
         display: flex;
     }
-    
+
     &__input {
         width: 100%;
         &-wrap{

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html

@@ -0,0 +1,14 @@
+<label class="checkbox umb-form-check umb-form-check--checkbox">
+    <input type="checkbox" name="{{name}}"
+           value="{{value}}"
+           ng-model="model"
+           class="umb-form-check__input"
+           ng-required="model.validation.mandatory && !model.value.length" />
+
+    <div class="umb-form-check__state umb-form-check__state" aria-hidden="true">
+        <div class="umb-form-check__check">
+            <i class="umb-form-check__icon icon-check"></i>
+        </div>
+    </div>
+    <span class="umb-form-check__text">{{text}}</span>
+</label>

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -0,0 +1,11 @@
+<label class="radio umb-form-check umb-form-check--radiobutton">
+    <input type="radio" name="radiobuttons-{{name}}"
+        value="{{value}}"
+        ng-model="model"
+        class="umb-form-check__input" />
+
+    <div class="umb-form-check__state umb-form-check__state" aria-hidden="true">
+        <div class="umb-form-check__check"></div>
+    </div>
+    <span class="umb-form-check__text">{{text}}</span>
+</label>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html

@@ -1,14 +1,8 @@
-<div class="umb-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
+<div class="umb-editor umb-editor--list" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
 
     <ul class="unstyled">
-        <li ng-repeat="item in selectedItems">
-            <label class="checkbox">
-                <input type="checkbox" name="checkboxlist"
-                       value="{{item.key}}"
-                       ng-model="item.checked"
-                       ng-required="model.validation.mandatory && !model.value.length" />
-                {{item.val}}
-            </label>
+        <li ng-repeat="item in selectedItems" class="umb-editor__item">
+            <umb-checkbox name="checkboxlist" value="{{item.key}}" model="item.checked" text="{{item.val}}"></umb-checkbox>
         </li>
     </ul>
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html

@@ -1,12 +1,8 @@
-<div class="umb-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
+<div class="umb-editor umb-edtitor--list" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
     <ul class="unstyled">
-        <li ng-repeat="item in model.config.items">
-            <label class="radio">
-                <input type="radio" name="radiobuttons-{{model.alias}}"
-                       value="{{item.id}}"
-                       ng-model="model.value" />
-                {{item.value}}
-            </label>
+
+        <li ng-repeat="item in model.config.items" class="umb-editor__item">
+            <umb-radiobutton name="{{model.alias}}" value="{{item.id}}" model="model.value" text="{{item.value}}"></umb-radiobutton>
         </li>
     </ul>
-</div>
+</div>