[BUGFIX] Fix rendering of select icons 83/51983/4
authorGeorg Ringer <georg.ringer@gmail.com>
Wed, 8 Mar 2017 19:48:46 +0000 (20:48 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Mon, 13 Mar 2017 08:11:07 +0000 (09:11 +0100)
Use floating divs for the select icons instead of
a table with a fixed column count of 12.

Resolves: #79508
Releases: master
Change-Id: I4b4f485753ca33aa71d5c533b437e518da2096ed
Reviewed-on: https://review.typo3.org/51983
Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Thomas Hohn <thomas@hohn.dk>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Build/Resources/Public/Less/TYPO3/_element_tceforms.less
typo3/sysext/backend/Classes/Form/FieldWizard/SelectIcons.php
typo3/sysext/backend/Resources/Public/Css/backend.css

index 49bd3a7..fad6c16 100644 (file)
@@ -273,9 +273,22 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
        color: #004fb0;
 }
 
-.table-icons {
-       td img {
+.icon-list {
+       background: #fff;
+       margin-top: 9px;
+       border: 1px solid @table-border-color;
+
+       .row {
+               margin:0;
+       }
+
+       .item {
+               &:extend(.pull-left);
+               padding:6px;
                max-width: 128px;
-               max-height: 128px;
+               img {
+                       max-width: 128px;
+                       max-height: 128px;
+               }
        }
 }
index 5dd2912..263c33b 100644 (file)
@@ -55,26 +55,18 @@ class SelectIcons extends AbstractNode
 
         $html = [];
         if (!empty($selectIcons)) {
-            $html[] = '<div class="t3js-forms-select-single-icons table-icons table-fit table-fit-inline-block">';
-            $html[] =    '<table class="table table-condensed table-white table-center">';
-            $html[] =        '<tbody>';
-            $html[] =            '<tr>';
+            $html[] = '<div class="t3js-forms-select-single-icons icon-list">';
+            $html[] =    '<div class="row">';
             foreach ($selectIcons as $i => $selectIcon) {
-                if ($i % 12 === 0 && $i !== 0) {
-                    $html[] =    '</tr>';
-                    $html[] =    '<tr>';
-                }
-                $html[] =            '<td>';
+                $html[] =   '<div class="item">';
                 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'];
                     $html[] = '</a>';
                 }
-                $html[] =            '</td>';
+                $html[] =   '</div>';
             }
-            $html[] =            '</tr>';
-            $html[] =        '</tbody>';
-            $html[] =    '</table>';
+            $html[] =    '</div>';
             $html[] = '</div>';
         }
 
index f6af97e..5e91819 100644 (file)
@@ -272,7 +272,8 @@ th {
   float: right;
 }
 .pull-left,
-#typo3-docheader .left {
+#typo3-docheader .left,
+.icon-list .item {
   float: left;
 }
 .fa.pull-left {
@@ -8470,7 +8471,8 @@ div.dropdown-menu {
   float: right !important;
 }
 .pull-left,
-#typo3-docheader .left {
+#typo3-docheader .left,
+.icon-list .item {
   float: left !important;
 }
 .hide {
@@ -11844,7 +11846,19 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 .t3-form-field-label.t3-form-field-state-changed {
   color: #004fb0;
 }
-.table-icons td img {
+.icon-list {
+  background: #fff;
+  margin-top: 9px;
+  border: 1px solid #ccc;
+}
+.icon-list .row {
+  margin: 0;
+}
+.icon-list .item {
+  padding: 6px;
+  max-width: 128px;
+}
+.icon-list .item img {
   max-width: 128px;
   max-height: 128px;
 }