Add noColor checkbox to ColorPickerField

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerField.java

@@ -1,16 +1,31 @@
 package com.merkle.oss.magnolia.definition.custom.colorpicker;
 
+import java.util.Optional;
+import java.util.stream.Stream;
+
+import javax.annotation.Nullable;
+
 import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.ColorPicker;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.CustomField;
+import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Window;
 import com.vaadin.ui.components.colorpicker.ColorPickerPopup;
 
 public class ColorPickerField extends CustomField<Integer> {
 	private final ColorPicker colorPicker;
+	@Nullable
+	private final CheckBox noColorCheckbox;
 
-	public ColorPickerField(final ColorPickerFieldDefinition definition) {
+	public ColorPickerField(final ColorPickerFieldDefinition definition, final String noColorCheckboxLabel) {
+		if(!definition.isRequired()) {
+			noColorCheckbox = new CheckBox();
+			noColorCheckbox.setCaption(noColorCheckboxLabel);
+		} else {
+			noColorCheckbox = null;
+		}
 		colorPicker = new ColorPicker() {
 			@Override
 			protected void showPopup(final boolean open) {
@@ -38,19 +53,24 @@ private void addPopupStyles(final Window window) {
 	}
 
 	@Override
-	protected void doSetValue(final Integer color) {
-		if(color != null) {
-			colorPicker.setValue(new Color(color));
-		}
+	protected void doSetValue(@Nullable final Integer color) {
+		Optional.ofNullable(color).map(Color::new).ifPresent(colorPicker::setValue);
+		Optional.ofNullable(noColorCheckbox).ifPresent(checkbox -> checkbox.setValue(color == null));
 	}
 
 	@Override
 	protected Component initContent() {
-		return colorPicker;
+		return new HorizontalLayout(Stream.concat(
+				Stream.of(colorPicker),
+				Stream.ofNullable(noColorCheckbox)
+		).toArray(Component[]::new));
 	}
 
 	@Override
 	public Integer getValue() {
+		if(Optional.ofNullable(noColorCheckbox).map(CheckBox::getValue).orElse(false)) {
+			return null;
+		}
 		return this.colorPicker.getValue().getRGB();
 	}
 }

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldDefinition.java

@@ -3,13 +3,16 @@
 import info.magnolia.ui.field.ConfiguredFieldDefinition;
 import info.magnolia.ui.field.FieldType;
 
+import javax.annotation.Nullable;
+
 @FieldType("colorPickerField")
 public class ColorPickerFieldDefinition extends ConfiguredFieldDefinition<Integer> {
 	private boolean rgb = false;
 	private boolean hsvv = false;
 	private boolean swatches = true;
 	private boolean history = false;
 	private boolean textField = true;
+	private String noColorCheckboxLabelKey;
 
 	public ColorPickerFieldDefinition() {
 		setType(Integer.class);
@@ -55,4 +58,13 @@ public boolean isTextField() {
 	public void setTextField(final boolean textField) {
 		this.textField = textField;
 	}
+
+	@Nullable
+	public String getNoColorCheckboxLabelKey() {
+		return noColorCheckboxLabelKey;
+	}
+
+	public void setNoColorCheckboxLabelKey(@Nullable final String disableCheckboxLabelKey) {
+		this.noColorCheckboxLabelKey = disableCheckboxLabelKey;
+	}
 }

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldDefinitionBuilder.java

@@ -21,6 +21,8 @@ public class ColorPickerFieldDefinitionBuilder extends AbstractConfiguredFieldDe
 	private Boolean history;
 	@Nullable
 	private Boolean textField;
+	@Nullable
+	private String noColorCheckboxLabelKey;
 
 	public ColorPickerFieldDefinitionBuilder() {}
 	public ColorPickerFieldDefinitionBuilder(final ColorPickerFieldDefinition definition) {
@@ -30,6 +32,7 @@ public ColorPickerFieldDefinitionBuilder(final ColorPickerFieldDefinition defini
 		swatches(definition.isSwatches());
 		history(definition.isHistory());
 		textField(definition.isTextField());
+		noColorCheckboxLabelKey(definition.getNoColorCheckboxLabelKey());
 	}
 
 	public ColorPickerFieldDefinitionBuilder rgb(final boolean rgb) {
@@ -77,6 +80,11 @@ public ColorPickerFieldDefinitionBuilder textField() {
 		return textField(true);
 	}
 
+	public ColorPickerFieldDefinitionBuilder noColorCheckboxLabelKey(@Nullable final String noColorCheckboxLabelKey) {
+		this.noColorCheckboxLabelKey = noColorCheckboxLabelKey;
+		return self();
+	}
+
 	public ColorPickerFieldDefinition build(final String name) {
 		final ColorPickerFieldDefinition definition = new ColorPickerFieldDefinition();
 		super.populate(definition, name);
@@ -85,6 +93,7 @@ public ColorPickerFieldDefinition build(final String name) {
 		Optional.ofNullable(swatches).ifPresent(definition::setSwatches);
 		Optional.ofNullable(history).ifPresent(definition::setHistory);
 		Optional.ofNullable(textField).ifPresent(definition::setTextField);
+		Optional.ofNullable(noColorCheckboxLabelKey).ifPresent(definition::setNoColorCheckboxLabelKey);
 		return definition;
 	}
-}
+}

custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/colorpicker/ColorPickerFieldFactory.java

@@ -1,19 +1,44 @@
 package com.merkle.oss.magnolia.definition.custom.colorpicker;
 
 import com.vaadin.ui.Component;
+
+import info.magnolia.i18nsystem.FixedLocaleProvider;
+import info.magnolia.i18nsystem.TranslationService;
 import info.magnolia.objectfactory.ComponentProvider;
+import info.magnolia.ui.editor.LocaleContext;
 import info.magnolia.ui.field.factory.AbstractFieldFactory;
 
+import java.util.Optional;
+
+import javax.inject.Inject;
+
 public class ColorPickerFieldFactory extends AbstractFieldFactory<Integer, ColorPickerFieldDefinition> {
 	final ColorPickerFieldDefinition definition;
+	private final LocaleContext localeContext;
+	private final TranslationService translationService;
 
-	public ColorPickerFieldFactory(final ColorPickerFieldDefinition definition, final ComponentProvider componentProvider) {
+	@Inject
+	public ColorPickerFieldFactory(
+			final ColorPickerFieldDefinition definition,
+			final ComponentProvider componentProvider,
+			final LocaleContext localeContext,
+			final TranslationService translationService
+	) {
 		super(definition, componentProvider);
 		this.definition = definition;
+		this.localeContext = localeContext;
+		this.translationService = translationService;
 	}
 
 	@Override
 	protected Component createFieldComponent() {
-		return new ColorPickerField(definition);
+		return new ColorPickerField(definition, getLabel());
+	}
+
+	private String getLabel() {
+		final String key =  Optional
+				.ofNullable(definition.getNoColorCheckboxLabelKey())
+				.orElse("merkle.customDefinitions.colorpicker.noColorCheckbox.fallbackLabel");
+		return translationService.translate(new FixedLocaleProvider(localeContext.getCurrent()), new String[] { key });
 	}
 }

custom-definitions/src/main/resources/mgnl-i18n/magnolia-custom-definitions-messages_en.properties

@@ -24,6 +24,8 @@ merkle.customDefinitions.videoSet.field.videoType.vimeo.label=Vimeo ID
 merkle.customDefinitions.videoSet.video.label=Video source
 merkle.customDefinitions.videoSet.previewImage.label=Preview image
 
+merkle.customDefinitions.colorpicker.noColorCheckbox.fallbackLabel=No color
+
 validators.mimeTypeValidator.errorMessage=Invalid mime type! Must be one of [{0}].
 validators.nodeTypeValidator.errorMessage=Invalid nodeType! Must be of type {0}.
 validators.templateValidator.errorMessage=Invalid template! Must be of template {0}.