Add colors for event types in pickers

.github/workflows/php-cs-fixer.yml

@@ -3,5 +3,5 @@ name: PHP CS Fixer
 on: push
 
 jobs:
-  tests:
+  fixers:
     uses: humhub/actions/.github/workflows/module-php-cs-fixer.yml@main

docs/CHANGELOG.md

@@ -1,9 +1,10 @@
 Changelog
 =========
 
-1.5.13 (Unreleased)
+1.6.0 (Unreleased)
 ----------------------
 - Enh #489: Use PHP CS Fixer
+- Enh #492: Add colors for event types in pickers
 
 1.5.12 (June 25, 2024)
 ----------------------

module.json

@@ -3,9 +3,9 @@
     "name": "Calendar",
     "description": "Create one-time or recurring events, invite and manage attendees, and keep track of all your events with the Calendar module.",
     "keywords": ["calendar"],
-    "version": "1.5.13",
+    "version": "1.6.0",
     "humhub": {
-        "minVersion": "1.14"
+        "minVersion": "1.16.1"
     },
     "homepage": "https://github.com/humhub/calendar",
     "authors": [

resources/css/calendar.css

@@ -834,3 +834,26 @@ tbody,
         float: left;
     }
 }
+
+/* Calendar type legend */
+.calendar-type-legend .calendar-type-item {
+    display: inline-block;
+    background: var(--background-color-secondary);
+    color: var(--text-color-main);
+    border-radius: 4px;
+    padding: 4px 16px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+}
+.calendar-type-legend .calendar-type-color {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--text-color-soft3);
+    border-radius: 4px;
+    margin-right: 6px;
+    position: relative;
+    top: 2px;
+}

resources/js/humhub.calendar.js

@@ -231,8 +231,8 @@ humhub.module('calendar', function (module, require, $) {
 
         Form.prototype.changeEventType = function (evt) {
             var $selected = evt.$trigger.find(':selected');
-            if ($selected.data('type-color')) {
-                $('.colorpicker-element').data('colorpicker').color.setColor($selected.data('type-color'));
+            if ($selected.data('color')) {
+                $('.colorpicker-element').data('colorpicker').color.setColor($selected.data('color'));
                 $('.colorpicker-element').data('colorpicker').update();
             }
         };