Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ColorPicker for Umbraco Grid DataType Settings/Style sections
<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
<ul class="thumbnails color-picker">
<li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval}">
<a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval}}">
</a>
</li>
</ul>
<input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
</div>
@pbres

This comment has been minimized.

Copy link
Owner Author

@pbres pbres commented Sep 15, 2016

  1. Copy colorpicker.html to Umbraco\Views\prevalueeditors
  2. Place editor config in Settings\Style section of Grid Data Type, eg:
    { "label": "Color", "description": "Choose main color theme", "key": "class", "view": "colorpicker", "applyTo": "cell", "modifier": "color-theme-{0}", "prevalues": [ "1041cd", "ab8fbf", "f1e300", "" ] }
@charlieanstey

This comment has been minimized.

Copy link

@charlieanstey charlieanstey commented Nov 22, 2017

This appears to have stopped working, for me at least. I'm running 7.7.6. When selecting a color in the backoffice, I get TypeError: Cannot read property 'hasOwnProperty' of undefined.

Had a quick look, since U4-5322 was implemented a change was made to the ColorPickerController which does a hasOwnProperty check on the existing model.value when toggling: https://github.com/umbraco/Umbraco-CMS/blob/529ae961ffa31b4d768f0792901cd10db729d69c/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js#L18

Not sure about a fix. It's almost as though a value should be set by default, otherwise I'd expect one to always get the undefined error when initially selecting a color.

@charlieanstey

This comment has been minimized.

Copy link

@charlieanstey charlieanstey commented Nov 22, 2017

I made a tweak to this earlier to get it working based on the updated colorpicker.html (using Umbraco 7.7.6). I have forked and updated to provide an example: https://gist.github.com/charlieanstey/ab9c4987b7540082c5d934d8dc90ea14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment