yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4842 from umbraco/temp8-merge-3464

Browse Source 
Merge branch 'dev-v7' into dev-v8
This commit is contained in:
Sebastiaan Janssen
2019-03-06 11:45:09 +01:00
committed by GitHub
parent b86a1aa687 b65f60af78
commit d1c9b7a060
12 changed files with 294 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js Normal file
View File

@@ -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.
@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);
})();

55
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js Normal file
View File

@@ -0,0 +1,55 @@
/**
@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="radiobuttonlist"
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: "@",
required: "="
}
};
return directive;
}
angular.module('umbraco.directives').directive('umbRadiobutton', RadiobuttonDirective);
})();

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -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";

3
src/Umbraco.Web.UI.Client/src/less/components/umb-checkbox-list.less
View File

@@ -1,3 +1,6 @@
@checkboxWidth: 15px;
@checkboxHeight: 15px;
.umb-checkbox-list {
list-style: none;
margin-left: 0;

127
src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less Normal file
View File

@@ -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;
}
}
}

13
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -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{

15
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html Normal file
View File

@@ -0,0 +1,15 @@
<label class="checkbox umb-form-check umb-form-check--checkbox">
<input type="checkbox" name="{{name}}"
value="{{value}}"
ng-model="model.checked"
class="umb-form-check__input"
ng-required="required"
ng-change="onChange(model)"/>
<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>

12
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html Normal file
View File

@@ -0,0 +1,12 @@
<label class="radio umb-form-check umb-form-check--radiobutton">
<input type="radio" name="{{name}}"
value="{{value}}"
ng-model="model"
class="umb-form-check__input"
ng-required="required" />
<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>

16
src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js
View File

@@ -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);

11
src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html
View File

@@ -1,16 +1,7 @@
<div class="umb-property-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
<ul class="unstyled">
<li ng-repeat="item in selectedItems track by item.key">
<label class="checkbox">
<input type="checkbox" name="checkboxlist"
value="{{item.value}}"
ng-model="item.checked"
ng-change="changed(item)"
ng-required="model.validation.mandatory && !model.value.length" />
{{item.val}}
</label>
<umb-checkbox name="{{model.alias}}" value="{{item.key}}" model="item" text="{{item.val}}" on-change="changed(item)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
</li>
</ul>
</div>

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js
View File

@@ -19,9 +19,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.RadioButtonsContro
$scope.configItems = configItems;
}
$scope.htmlId = "radiobuttons-" + $scope.model.alias + String.CreateGuid();
}
init();

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
View File

@@ -1,12 +1,7 @@
<div class="umb-property-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
<ul class="unstyled">
<li ng-repeat="item in configItems track by item.id">
<label class="radio">
<input type="radio" name="{{htmlId}}"
value="{{item.value}}"
ng-model="model.value" />
{{item.value}}
</label>
<umb-radiobutton name="{{model.alias}}" value="{{item.id}}" model="model.value" text="{{item.value}}" required="model.validation.mandatory && model.value == ''"></umb-radiobutton>
</li>
</ul>
</div>