[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>
TYPO3 · Feb 9, 2018 · 6625430 · 6625430
1 parent b615b0a
commit 6625430
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/Build/Resources/Public/Sass/typo3/_element_tceforms.scss b/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;
+    }
 }
diff --git a/typo3/sysext/backend/Classes/Form/FieldWizard/SelectIcons.php b/typo3/sysext/backend/Classes/Form/FieldWizard/SelectIcons.php
@@ -20,7 +20,7 @@
 
 /**
  * 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 @@ public function render(): array
             }
             $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 @@ public function render(): array
             $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'];

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/SelectSingleElement.js b/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;
     });