From 58ce52832425e34a7c4bebb1e88ed08497ae9f70 Mon Sep 17 00:00:00 2001 From: Sebastiaan Janssen Date: Mon, 4 Mar 2019 13:43:31 +0100 Subject: [PATCH 1/7] Merge branch 'dev-v7' into dev-v8 # Conflicts: # src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html # src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html # src/umbraco.cms/businesslogic/translation/Translation.cs --- .../components/forms/umbcheckbox.directive.js | 59 +++++++++ .../forms/umbradiobutton.directive.js | 54 ++++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../less/components/umb-checkbox-list.less | 3 + .../src/less/components/umb-form-check.less | 125 ++++++++++++++++++ .../src/less/property-editors.less | 13 +- .../views/components/forms/umb-checkbox.html | 15 +++ .../components/forms/umb-radiobutton.html | 11 ++ .../checkboxlist/checkboxlist.controller.js | 1 + .../checkboxlist/checkboxlist.html | 9 +- .../radiobuttons/radiobuttons.html | 7 +- 11 files changed, 282 insertions(+), 16 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html 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..92b51c068b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js @@ -0,0 +1,59 @@ +/** +@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: "@", + 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..f3f46918fd --- /dev/null +++ b/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 +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: "@" + } + }; + + 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..6e3da0c98f --- /dev/null +++ b/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; + } + } +} 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..e7f438b627 --- /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..f09fcf9156 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html @@ -0,0 +1,11 @@ + 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..0523457bd6 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 @@ -64,6 +64,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro } function changed(item) { + debugger; var index = _.findIndex($scope.model.value, function (v) { return v === item.val; 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..546a2781ec 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 @@ -2,14 +2,7 @@ diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html index 96367b641a..962a3aa42f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html @@ -1,12 +1,7 @@ 
From d3904086f093caeb9a38378537ff297d130169f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 4 Mar 2019 14:39:49 +0100 Subject: [PATCH 2/7] adjusted PR 3464 for V8 --- .../directives/components/forms/umbcheckbox.directive.js | 3 --- .../propertyeditors/checkboxlist/checkboxlist.controller.js | 2 +- .../src/views/propertyeditors/checkboxlist/checkboxlist.html | 2 +- 3 files changed, 2 insertions(+), 5 deletions(-) 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 index 92b51c068b..25c2226b10 100644 --- 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 @@ -54,6 +54,3 @@ angular.module('umbraco.directives').directive('umbCheckbox', CheckboxDirective); })(); - - - 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 0523457bd6..d21b29be35 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 @@ -64,7 +64,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro } function changed(item) { - debugger; + var index = _.findIndex($scope.model.value, function (v) { return v === item.val; 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 546a2781ec..ad2f3e7d26 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 @@ -2,7 +2,7 @@ From a4d25dc5946b5b86e8e3b8606f24453884122173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 5 Mar 2019 11:38:04 +0100 Subject: [PATCH 3/7] design corrections --- .../src/less/components/umb-form-check.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) 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 index 6e3da0c98f..131fb632bd 100644 --- 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 @@ -8,11 +8,13 @@ position: relative; padding: 0; margin: 0; + min-height: 22px; + cursor: pointer !important; &__text{ margin: 0 0 0 26px; position: relative; - top: 2px; + top: -1px; } &__input{ @@ -22,12 +24,12 @@ opacity: 0; &:checked ~ .umb-form-check__state .umb-form-check__check{ - border-color: @green; + 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: @gray-5; + border-color: @inputBorderFocus; } &:checked ~ .umb-form-check__state{ @@ -67,13 +69,13 @@ &__check{ position: relative; - border: 1px solid @gray-7; + border: 1px solid @inputBorder; width: @checkboxWidth; height: @checkboxHeight; &:before{ content: ""; - background: @green; + background: @ui-option-type; position: absolute; left: 0; right: 0; From 21405266ef0498d64ee18fc7d116b125c747f257 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 5 Mar 2019 11:38:43 +0100 Subject: [PATCH 4/7] align the use of input name attribute for checkboxes and radiobuttons --- .../src/views/components/forms/umb-radiobutton.html | 2 +- .../checkboxlist/checkboxlist.controller.js | 9 ++++++--- .../views/propertyeditors/checkboxlist/checkboxlist.html | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) 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 index f09fcf9156..4bd8574459 100644 --- 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 @@ -1,5 +1,5 @@