Improve the backend widget

Author: qzminski

assets/tags-widget.scss

@@ -20,16 +20,25 @@ $select-padding-y: 5px;
     margin-bottom: 3px;
 
     &__all {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 3px;
-        margin-bottom: 3px;
+        margin-top: 3px;
+
+        &-headline {
+            margin-bottom: 5px;
+            margin-top: 5px;
+            font-size: .75rem;
+        }
+
+        &-items {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 3px;
+        }
     }
 
     &__tag {
         display: block;
         padding: 5px 10px 5px 25px;
-        background: var(--form-button) url('./add.svg') no-repeat 6px center;
+        background: transparent url('./add.svg') no-repeat 6px center;
         border: 1px solid var(--form-border);
         border-radius: var(--border-radius);
         box-sizing: border-box;

contao/languages/de/default.php

@@ -2,4 +2,6 @@
 
 declare(strict_types=1);
 
-$GLOBALS['TL_LANG']['MSC']['cfg_tags.add'] = 'Hinzufügen';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_add'] = 'Hinzufügen';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_search'] = 'Zum Suchen eingeben …';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_suggestions'] = 'Vorschläge:';

contao/languages/en/default.php

@@ -2,4 +2,6 @@
 
 declare(strict_types=1);
 
-$GLOBALS['TL_LANG']['MSC']['cfg_tags.add'] = 'Add';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_add'] = 'Add';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_search'] = 'Type to search …';
+$GLOBALS['TL_LANG']['MSC']['cfg_tags_suggestions'] = 'Suggestions:';

contao/templates/backend/widget/tags.html.twig

@@ -1,3 +1,5 @@
+{% trans_default_domain 'contao_default' %}
+
 {% set widget_attributes = attrs()
     .addClass(['cfg-tags-widget', css_class])
     .set('data-controller', 'codefog--tags-widget')
@@ -7,15 +9,18 @@
 {% block widget %}
     <div{{ widget_attributes }}>
         {% block widget_inner %}
+            <input type="text" name="{{ name }}" id="ctrl_{{ id }}" placeholder="{{ 'MSC.cfg_tags_search'|trans }}" data-codefog--tags-widget-target="input">
+
             {% if all_tags and not hide_list %}
                 <div class="cfg-tags-widget__all">
-                    {% for tag in all_tags %}
-                        <button type="button" value="{{ tag.value }}" class="cfg-tags-widget__tag" data-action="click->codefog--tags-widget#add:prevent">{{ tag.text }}</button>
-                    {% endfor %}
+                    <div class="cfg-tags-widget__all-headline">{{ 'MSC.cfg_tags_suggestions'|trans }}</div>
+                    <div class="cfg-tags-widget__all-items">
+                        {% for tag in all_tags %}
+                            <button type="button" value="{{ tag.value }}" class="cfg-tags-widget__tag" title="{{ 'MSC.cfg_tags_add'|trans }}" data-action="click->codefog--tags-widget#add:prevent">{{ tag.text }}</button>
+                        {% endfor %}
+                    </div>
                 </div>
             {% endif %}
-
-            <input type="text" name="{{ name }}" id="ctrl_{{ id }}" data-codefog--tags-widget-target="input">
         {% endblock %}
     </div>
 {% endblock %}

docs/images/preview.png

@@ -2,7 +2,7 @@
   "entrypoints": {
     "tags-widget": {
       "css": [
-        "/bundles/codefogtags/tags-widget.c2ea0e46.css"
+        "/bundles/codefogtags/tags-widget.f1a58ca1.css"
       ],
       "js": [
         "/bundles/codefogtags/tags-widget.92015867.js"

public/entrypoints.json

@@ -1,8 +1,8 @@
 {
-  "tags-widget.css": "/bundles/codefogtags/tags-widget.c2ea0e46.css",
+  "tags-widget.css": "/bundles/codefogtags/tags-widget.f1a58ca1.css",
   "tags-widget.js": "/bundles/codefogtags/tags-widget.92015867.js",
   "images/add--dark.svg": "/bundles/codefogtags/images/add--dark.642bad3d.svg",
   "images/add.svg": "/bundles/codefogtags/images/add.a31d1889.svg",
-  "tags-widget.c2ea0e46.css.map": "/bundles/codefogtags/tags-widget.c2ea0e46.css.map",
+  "tags-widget.f1a58ca1.css.map": "/bundles/codefogtags/tags-widget.f1a58ca1.css.map",
   "tags-widget.92015867.js.map": "/bundles/codefogtags/tags-widget.92015867.js.map"
 }