Allow color boxes in picker (#7094)

* Allow color boxes in picker

* Display color box for select2 options if it is provided

* Update CHANGELOG.md

* Update data color attribute name for content tag selector

CHANGELOG.md

@@ -7,6 +7,7 @@ HumHub Changelog
 - Fix #7088: Improve handling of legacy configuration for "search" component
 - Fix #7089: Fix markdown sub list style
 - Fix #7092: Missing closing `div` HTML tag in the registration by link view
+- Enh #7094: Allow color boxes in select2 picker
 
 1.16.0 (June 19, 2024)
 ----------------------

protected/humhub/modules/content/widgets/ContentTagDropDown.php

@@ -97,13 +97,14 @@ class ContentTagDropDown extends JsInputWidget
             }
         }
 
+        /* @var ContentTag[] $tags */
         $tags = $this->items = $this->query->all();
 
         $result = [];
         foreach ($tags as $tag) {
             $result[$tag->id] = $tag->name;
             $this->itemOptions[$tag->id] = [
-                'data-type-color' => $tag->color,
+                'data-color' => $tag->color,
             ];
         }
 

static/css/select2Theme/select2-humhub.less

@@ -83,6 +83,15 @@
             #COMMON STYLES
     \*------------------------------------*/
 
+    .picker-color {
+        display: inline-block;
+        width:16px;
+        height:16px;
+        border-radius: 4px;
+        position: relative;
+        top: 3px;
+    }
+
     .select2-selection {
         .humhub-input-defaults;
         outline: 0;
@@ -370,6 +379,11 @@
         min-height: @input-height-base;
         padding:2px;
 
+        .picker-color {
+            top: 4px;
+            margin-left: 3px;
+        }
+
 
         .select2-selection__rendered {
             box-sizing: border-box;

static/js/humhub/humhub.ui.additions.js

@@ -185,6 +185,13 @@ humhub.module('ui.additions', function (module, require, $) {
         });
 
         module.register('select2', '[data-ui-select2]', function ($match) {
+            const templateItem = function (item) {
+                const element = $(item.element);
+                return element.data('color')
+                    ? $('<span><span class="picker-color" style="background:' + element.data('color') + '"></span> ' + item.text + '</span>')
+                    : item.text;
+            };
+
             $match.select2({
                 theme: 'humhub',
                 tags: typeof $match.data('ui-select2-allow-new') !== 'undefined',
@@ -193,7 +200,9 @@ humhub.module('ui.additions', function (module, require, $) {
                         tag.text += ' ' + $match.data('ui-select2-new-sign');
                     }
                     data.unshift(tag);
-                }
+                },
+                templateResult: templateItem,
+                templateSelection: templateItem,
             });
         });
 

static/js/humhub/humhub.ui.picker.js

@@ -216,6 +216,7 @@ humhub.module('ui.picker', function (module, require, $) {
         resultDisabled: '<a href="#" title="{disabledText}" data-placement="right" tabindex="-1" style="margin-right:5px;opacity: 0.4;cursor:not-allowed">{imageNode} <span class="picker-text"></span></a>',
         imageNode: '<img class="img-rounded" src="{image}" alt="" style="width:24px;height:24px;"  height="24" width="24">',
         imageIcon: '<i class="fa {image}"></i> ',
+        imageColor: '<span class="picker-color" style="background:{image}"></span> ',
         option: '<option value="{id}" data-image=\'{image}\' selected></option>',
     };
 
@@ -343,16 +344,17 @@ humhub.module('ui.picker', function (module, require, $) {
             return '';
         }
 
-        if(image.indexOf('<') >= 0) {
+        if (image.indexOf('<') >= 0) {
             return image;
-        } else if(image.indexOf('fa-') === 0) {
+        }
+        if (image.indexOf('fa-') === 0) {
             return string.template(Picker.template.imageIcon, item);
-        } else {
+        }
-            return string.template(Picker.template.imageNode, item);
+        if(image.indexOf('#') === 0) {
+            return string.template(Picker.template.imageColor, item);
         }
 
-        // The image is either an html node itself or just an url
+        return string.template(Picker.template.imageNode, item);
-        return (image.indexOf('<') >= 0) ? image : string.template(Picker.template.imageNode, item);
     };