Entry type colors and icons, but of course

mmikkel · Mar 25, 2024 · bb43544 · bb43544
1 parent ef55504
commit bb43544
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;