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

Use color picker component in block list editor configuration (#9056)

Browse Source 
* Use color picker component in block list editor configuration

* Remove set color property

* Allow empty color

* Assign color value to properties

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
Bjarne Fyrstenborg
2020-12-05 00:28:58 +01:00
committed by GitHub
parent f8cff2722d
commit 2d785af821
2 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
View File

@@ -10,13 +10,19 @@
(function () {
"use strict";
function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService) {
function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService, angularHelper) {
var unsubscribe = [];
var vm = this;
vm.block = $scope.model.block;
vm.colorPickerOptions = {
type: "color",
allowEmpty: true,
showAlpha: true
};
loadElementTypes();
function loadElementTypes() {
@@ -285,6 +291,18 @@
entry.thumbnail = null;
};
vm.changeIconColor = function (color) {
angularHelper.safeApply($scope, function () {
vm.block.iconColor = color ? color.toString() : null;
});
};
vm.changeBackgroundColor = function (color) {
angularHelper.safeApply($scope, function () {
vm.block.backgroundColor = color ? color.toString() : null;
});
};
vm.submit = function() {
if ($scope.model && $scope.model.submit) {
$scope.model.submit($scope.model);

12
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
View File

@@ -157,7 +157,11 @@
<div class="umb-el-wrap">
<label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
<div class="controls">
<input type="text" name="backgroundColor" ng-model="vm.block.backgroundColor"/>
<umb-color-picker
ng-model="vm.block.backgroundColor"
options="vm.colorPickerOptions"
on-change="vm.changeBackgroundColor(color)">
</umb-color-picker>
</div>
</div>
</div>
@@ -167,7 +171,11 @@
<div class="umb-el-wrap">
<label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
<div class="controls">
<input type="text" name="iconColor" ng-model="vm.block.iconColor"/>
<umb-color-picker
ng-model="vm.block.iconColor"
options="vm.colorPickerOptions"
on-change="vm.changeIconColor(color)">
</umb-color-picker>
</div>
</div>
</div>