[BUGFIX] Show active state for SelectIcons

Highlight the selected icon. This useful feature has been
removed with the FormEngine rewrite.

Resolves: #83781
Releases: master, 8.7
Change-Id: I06376b073585d39d14de6f40bd02172168425944
Reviewed-on: https://review.typo3.org/55568

Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>

Build/Resources/Public/Sass/typo3/_element_tceforms.scss

@@ -285,10 +285,22 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
         float: left;
         padding: 6px;
         max-width: 128px;
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
 
         img {
-            max-width: 128px;
-            max-height: 128px;
+            max-width: 116px;
+            max-height: 116px;
         }
     }
+
+    .active {
+        background-color: $table-bg-active;
+        border-left: 1px solid $table-border-color;
+        border-right: 1px solid $table-border-color;
+    }
+
+    :first-child.active {
+        border-left: 1px solid transparent;
+    }
 }

typo3/sysext/backend/Classes/Form/FieldWizard/SelectIcons.php

@@ -20,7 +20,7 @@ use TYPO3\CMS\Backend\Form\Utility\FormEngineUtility;
 
 /**
  * Render thumbnails of icons,
- * typically used with type=group and internal_type=file and file_reference.
+ * typically used with type=select.
  */
 class SelectIcons extends AbstractNode
 {
@@ -43,8 +43,10 @@ class SelectIcons extends AbstractNode
             }
             $icon = !empty($item[2]) ? FormEngineUtility::getIconHtml($item[2], $item[0], $item[0]) : '';
             if ($icon) {
+                $fieldValue = $this->data['databaseRow'][$this->data['fieldName']];
                 $selectIcons[] = [
                         'title' => $item[0],
+                        'active' => ($fieldValue[0] === (string)$item[1]) ? true : false,
                         'icon' => $icon,
                         'index' => $selectItemCounter,
                     ];
@@ -57,7 +59,8 @@ class SelectIcons extends AbstractNode
             $html[] = '<div class="t3js-forms-select-single-icons icon-list">';
             $html[] =    '<div class="row">';
             foreach ($selectIcons as $i => $selectIcon) {
-                $html[] =   '<div class="item">';
+                $active = ($selectIcon['active']) ?  ' active' : '';
+                $html[] =   '<div class="item' . $active . '">';
                 if (is_array($selectIcon)) {
                     $html[] = '<a href="#" title="' . htmlspecialchars($selectIcon['title'], ENT_COMPAT, 'UTF-8', false) . '" data-select-index="' . htmlspecialchars((string)$selectIcon['index']) . '">';
                     $html[] =   $selectIcon['icon'];

typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/SelectSingleElement.js

@@ -36,9 +36,15 @@ define(['jquery'], function($) {
     var $groupIconContainer = $selectElement.prev('.input-group-icon');
     var options = options || {};
 
-    $selectElement.on('change', function() {
+    $selectElement.on('change', function(e) {
+      var $me = $(e.target);
+
       // Update prepended select icon
       $groupIconContainer.html($selectElement.find(':selected').data('icon'));
+
+      var $selectIcons = $me.closest('.t3js-formengine-field-item').find('.t3js-forms-select-single-icons');
+      $selectIcons.find('.item.active').removeClass('active');
+      $selectIcons.find('[data-select-index="' + $me.prop('selectedIndex') + '"]').closest('.item').addClass('active');
     });
 
     // Append optionally passed additional "change" event callback
@@ -51,13 +57,15 @@ define(['jquery'], function($) {
       $selectElement.on('focus', options.onFocus);
     }
 
-    $selectElement.closest('.form-control-wrap').find('.t3js-forms-select-single-icons').on('click', function(e) {
-      var $selectIcon = $(e.target).closest('[data-select-index]');
+    $selectElement.closest('.form-control-wrap').find('.t3js-forms-select-single-icons a').on('click', function(e) {
+      var $me = $(e.target);
+      var $selectIcon = $me.closest('[data-select-index]');
 
+      $me.closest('.t3js-forms-select-single-icons').find('.item.active').removeClass('active');
       $selectElement
         .prop('selectedIndex', $selectIcon.data('selectIndex'))
         .trigger('change');
-      $selectIcon.trigger('blur');
+      $selectIcon.closest('.item').addClass('active');
 
       return false;
     });