charlieanstey
11/22/2017 - 4:25 PM

ColorPicker for Umbraco Grid DataType Settings/Style sections

ColorPicker for Umbraco Grid DataType Settings/Style sections

[{
    "label": "Row Background Color",
    "description": "Set a background color for the row",
    "key": "class",
    "view": "colorpicker",
    "applyTo": "row",
    "modifier": "bg-{0}",
    "value": "",
    "prevalues": [{
        "key": "None",
        "value": "",
        "color": ""
    }, {
        "key": "Dark Blue",
        "value": "primary",
        "color": "116b8c"
    }, {
        "key": "Light Grey",
        "value": "lighter",
        "color": "f1f1f1"
    }],
    "validation": []
}]
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
    <ul class="thumbnails color-picker">
        <li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval.value}">
            <a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval.color}}">

            </a>
            <span class="color-label" ng-bind="preval.key"></span>
        </li>
    </ul>
    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
</div>