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

Adjustments of colorpicker prevalue and property editor (#8885)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-09-30 20:35:09 +02:00
committed by GitHub
parent 76c5a69e60
commit 9feb6e6085
3 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/colorpicker.html
View File

@@ -4,10 +4,11 @@
<localize key="colorpicker_noColors">You haven't defined any colors</localize>
</div>
<umb-color-swatches colors="model.items"
selected-color="model.value"
size="s"
use-label="model.config.useLabel">
<umb-color-swatches
colors="model.items"
selected-color="model.value"
size="s"
use-label="model.config.useLabel">
</umb-color-swatches>
<input type="hidden" name="modelValue" ng-model="model.value" />

21
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
View File

@@ -1,5 +1,7 @@
function ColorPickerController($scope, $timeout) {
var vm = this;
//setup the default config
var config = {
items: [],
@@ -18,10 +20,13 @@ function ColorPickerController($scope, $timeout) {
for (var key in $scope.model.config.items) {
if (!$scope.model.config.items[key].hasOwnProperty("value"))
$scope.model.config.items[key] = { value: $scope.model.config.items[key], label: $scope.model.config.items[key] };
$scope.model.config.items[key] = {
value: $scope.model.config.items[key],
label: $scope.model.config.items[key]
};
}
$scope.model.useLabel = isTrue($scope.model.config.useLabel);
$scope.model.useLabel = Object.toBoolean($scope.model.config.useLabel);
initActiveColor();
}
@@ -54,13 +59,13 @@ function ColorPickerController($scope, $timeout) {
$scope.model.config.items = items;
}
$scope.selectColor = function (color) {
vm.selectColor = function (color) {
// this is required to re-validate
$timeout(function () {
var newColor = color ? color.value : null;
$scope.propertyForm.selectedColor.$setViewValue(newColor);
});
}
};
// Method required by the valPropertyValidator directive (returns true if the property editor has at least one color selected)
$scope.validateMandatory = function () {
@@ -74,8 +79,7 @@ function ColorPickerController($scope, $timeout) {
errorMsg: $scope.model.validation.mandatoryMessage || "Value cannot be empty",
errorKey: "required"
};
}
$scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;
};
// Finds the color best matching the model's color,
// and sets the model color to that one. This is useful when
@@ -138,11 +142,6 @@ function ColorPickerController($scope, $timeout) {
$scope.model.value.label = foundItem.label;
}
}
// figures out if a value is trueish enough
function isTrue(bool) {
return !!bool && bool !== "0" && bool.toString().toLowerCase() !== "false";
}
}
angular.module("umbraco").controller("Umbraco.PropertyEditors.ColorPickerController", ColorPickerController);

5
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.html
View File

@@ -1,5 +1,4 @@
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController as vm">
<div ng-if="!isConfigured">
<localize key="colorpicker_noColors">You haven't defined any colors</localize>
@@ -10,7 +9,7 @@
selected-color="model.value"
size="m"
use-label="model.useLabel"
on-select="selectColor(color)">
on-select="vm.selectColor(color)">
</umb-color-swatches>
<input type="hidden" name="selectedColor" ng-model="model.selectedColor" val-property-validator="validateMandatory" />