From bb43544a44db4bff76f25407d53fe8ffc5fc9a77 Mon Sep 17 00:00:00 2001
From: Mats Mikkel Rummelhoff <mail@mmikkel.no>
Date: Mon, 25 Mar 2024 01:03:11 +0100
Subject: [PATCH] Entry type colors and icons, but of course

---
 CHANGELOG.md                      |  4 ++++
 composer.json                     |  2 +-
 src/ChildMe.php                   |  4 ++++
 src/templates/childme-button.twig | 28 +++++++++++++++++++++++-----
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2425f00..fc9680d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 2.0.0-beta.3 - 2024-03-25
+### Improved
+- Adds support for entry type icons and colors in Child Me! entry type disclosure menus  
+
 ## 2.0.0-beta.2 - 2024-03-25
 ### Fixed 
 - Fixes an issue where clicking Child Me! disclosure menu buttons would select the element row
diff --git a/composer.json b/composer.json
index 3b5f9a1..a91c30a 100644
--- a/composer.json
+++ b/composer.json
@@ -2,7 +2,7 @@
     "name": "mmikkel/child-me",
     "description": "Easily create child elements",
     "type": "craft-plugin",
-    "version": "2.0.0-beta.2",
+    "version": "2.0.0-beta.3",
     "keywords": [
         "craft",
         "cms",
diff --git a/src/ChildMe.php b/src/ChildMe.php
index 9185c31..d8eae97 100644
--- a/src/ChildMe.php
+++ b/src/ChildMe.php
@@ -18,6 +18,8 @@
 use craft\events\DefineAttributeHtmlEvent;
 use craft\events\RegisterElementTableAttributesEvent;
 use craft\events\TemplateEvent;
+use craft\helpers\Cp;
+use craft\helpers\Html;
 use craft\helpers\UrlHelper;
 use craft\models\EntryType;
 use craft\models\Section;
@@ -193,6 +195,8 @@ private function _renderChildMeButtonForEntry(Entry $entry): string
                     'typeId' => $entryType->id,
                 ]),
                 'label' => $entryType->name,
+                'icon' => !empty($entryType->icon) ? Cp::iconSvg($entryType->icon) : null,
+                'color' => !empty($entryType->color) ? $entryType->color : null,
             ];
         }, $entryTypes);
 
diff --git a/src/templates/childme-button.twig b/src/templates/childme-button.twig
index dcd3af2..d873fec 100644
--- a/src/templates/childme-button.twig
+++ b/src/templates/childme-button.twig
@@ -22,13 +22,24 @@
         >
             <craft-tooltip>{{ 'New child'|t('app') }}</craft-tooltip>
         </button>
-        <div id="childme-menu-{{ element.id }}" class="menu menu--disclosure">
+        <div id="childme-menu-{{ element.id }}" class="childme-menu menu menu--disclosure">
             <ul>
                 {% for link in links %}
                     <li>
-                        <a href="{{ link.url }}"
-                           data-icon="plus"
-                        >{{ link.label }}</a>
+                        {% tag 'a' with {
+                            href: link.url,
+                            class: 'flex',
+                            style: link.color|default ? {
+                                '--custom-bg-color': link.color.cssVar(50)|default(false),
+                                '--custom-text-color': link.color.cssVar(900)|default(false),
+                                '--custom-sel-bg-color': link.color.cssVar(100)|default(false)
+                            } : false
+                        } %}
+                            {% if link.icon %}
+                                <span class="cp-icon small{{ link.color is defined ? " #{link.color.value}" }}">{{ link.icon|raw }}</span>
+                            {% endif %}
+                            {{ link.label }}
+                        {% endtag %}
                     </li>
                 {% endfor %}
             </ul>
@@ -39,11 +50,18 @@
             color: var(--link-color);
             background-color: transparent;
             height: auto;
-            padding: 0;
+            padding: 6px;
         }
         .childme-button::before {
             margin: 0 !important;
         }
+        .childme-menu li a {
+            background-color: var(--custom-bg-color) !important;
+            color: var(--custom-text-color, var(--link-color)) !important;
+        }
+        .childme-menu li a:hover {
+            background-color: var(--custom-sel-bg-color, var(--custom-bg-color)) !important;
+        }
         .modal .elements .tableview th[data-attribute="_childme_addChild"],
         .modal .elements .tableview td[data-attr="_childme_addChild"] {
             display: none !important;