Use the same task form layout everywhere

assets/js/src/Task.js

@@ -33,12 +33,7 @@ Kanboard.Task.prototype.onPopoverOpened = function() {
     var self = this;
     var reloadingProjectId = 0;
 
-    // Change color
-    $(document).on("click", ".color-square", function() {
-        $(".color-square-selected").removeClass("color-square-selected");
-        $(this).addClass("color-square-selected");
-        $("#form-color_id").val($(this).data("color-id"));
-    });
+    self.renderColorPicker();
 
     // Assign to me
     $(document).on("click", ".assign-me", function(e) {
@@ -75,3 +70,20 @@ Kanboard.Task.prototype.onPopoverOpened = function() {
         }
     });
 };
+
+Kanboard.Task.prototype.renderColorPicker = function() {
+    function renderColorOption(color) {
+        return $(
+            '<div class="color-picker-option">' +
+            '<div class="color-picker-square color-' + color.id + '"></div>' +
+            '<div class="color-picker-label">' + color.text + '</div>' +
+            '</div>'
+        );
+    }
+
+    $(".color-picker").select2({
+        minimumResultsForSearch: Infinity,
+        templateResult: renderColorOption,
+        templateSelection: renderColorOption
+    });
+};