TCDICORE-175 fix color selection

Author: dynamodenis

forms/src/main/java/org/devgateway/toolkit/forms/wicket/page/BasePage.java

@@ -23,6 +23,8 @@
 //import de.agilecoders.wicket.core.markup.html.references.RespondJavaScriptReference;
 import de.agilecoders.wicket.core.markup.html.themes.bootstrap.BootstrapCssReference;
 import de.agilecoders.wicket.core.util.CssClassNames;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.form.ColorPickerTextField;
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.form.ColorPickerTextFieldCssReference;
 import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesome5CssReference;
 import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesome5IconType;
 import org.apache.wicket.Application;
@@ -43,6 +45,7 @@
 import org.apache.wicket.protocol.http.WebApplication;
 import org.apache.wicket.protocol.http.WebSession;
 import org.apache.wicket.request.mapper.parameter.PageParameters;
+import org.apache.wicket.request.resource.CssResourceReference;
 import org.apache.wicket.request.resource.JavaScriptResourceReference;
 import org.apache.wicket.request.resource.PackageResourceReference;
 import org.apache.wicket.resource.JQueryResourceReference;
@@ -333,6 +336,13 @@ public void renderHead(final IHeaderResponse response) {
         response.render(getFavicon());
 
         // Load Styles.
+        // Add the color picker CSS
+        response.render(CssHeaderItem.forReference(
+                new CssResourceReference(
+                        ColorPickerTextFieldCssReference.class,
+                        "css/bootstrap-colorpicker.css"
+                )
+        ));
         response.render(CssHeaderItem.forReference(BootstrapCssReference.instance()));
         response.render(CssHeaderItem.forReference(FontAwesome5CssReference.instance()));
         response.render(CssHeaderItem.forReference(BaseStyles.INSTANCE));
@@ -342,6 +352,14 @@ public void renderHead(final IHeaderResponse response) {
 
         response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(BaseStyles.class,
                 "assets/js/fileupload.js")));
+
+        // Add the color picker JavaScript
+        response.render(JavaScriptHeaderItem.forReference(
+                new JavaScriptResourceReference(
+                        ColorPickerTextFieldCssReference.class,
+                        "js/bootstrap-colorpicker.js"
+                )
+        ));
     }
 
     protected BreadCrumbPanel createBreadcrumbPanel(final String markupId) {

forms/src/main/java/org/devgateway/toolkit/forms/wicket/styles/BaseStyles.css

@@ -397,6 +397,18 @@ button .btn-home-label {
     font-weight: 700;
 }
 
+/*-----------------Color picker --------------------*/
+.colorpicker-saturation {
+    background:
+            linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)),
+            linear-gradient(to top right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+}
+
+.colorpicker-hue {
+    background: linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
+
+}
+
 /*Media Queries*/
 @media (min-width: 768px) {
     .navbar-default{