[TASK] Streamline UI of PageTS config > View TSconfig fields content

Instead of tables, the TSconfig is now rendered into panels. Additionally,
the edit links are now styled as buttons.

Resolves: #81094
Releases: master
Change-Id: Id7cc6382644901334d7aa1ff2e36c48ef81352de
Reviewed-on: https://review.typo3.org/52668


Reviewed-by: Henrik Elsner <helsner@dfau.de>
Tested-by: Henrik Elsner <helsner@dfau.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mona Muzaffar <mona.muzaffar@gmx.de>
Tested-by: Mona Muzaffar <mona.muzaffar@gmx.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>

typo3/sysext/info_pagetsconfig/Resources/Private/Partials/EditIcon.html

 <f:if condition="{editIcon}">
-    <a href="{editIcon -> f:format.raw()}" title="{f:translate(key: 'LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:{editTitle}')}">
+    <a href="{editIcon -> f:format.raw()}" title="{f:translate(key: 'LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:{editTitle}')}" class="btn btn-default">
         <span class="t3js-icon icon icon-size-small icon-state-default icon-actions-document-open" data-identifier="actions-document-open">
             <span class="icon-markup">
                 <img width="16" height="16" src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-document-open.svg">
             </span>
         </span>
         <f:if condition="{editAll}">
-            <strong>{f:translate(key: 'LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:editTSconfig_all')}</strong>
+            <f:translate key="LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:editTSconfig_all" />
         </f:if>
     </a>
 </f:if>

typo3/sysext/info_pagetsconfig/Resources/Private/Partials/Page.html

@@ -5,23 +5,27 @@
 <f:render partial="Menu" arguments="{_all}" />
 <f:if condition="{tsconfParts99}">
     <f:then>
-        <div>
-            <table class="table table-striped table-hover">
-                <f:for each="{lines}" as="line">
-                    <tr><td nowrap="nowrap">
-                        <f:if condition="{line.defaultPageTSconfig}">
-                            <f:then>
-                                <strong>{f:translate(key: 'LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:editTSconfig_default')}</strong>
-                            </f:then>
-                            <f:else>
-                                <f:format.raw>{line.title}</f:format.raw>
-                            </f:else>
-                        </f:if></td></tr>
-                    <tr><td nowrap="nowrap"><f:format.raw>{line.content}</f:format.raw><f:render partial="EditIcon" arguments="{editIcon: line.editIcon, editTitle: line.editTitle}" /></td></tr>
-                </f:for>
-            </table><br />
-            <f:render partial="EditIcon" arguments="{editIcon: editIcon, editTitle: editTitle, editAll: 1}" />
-        </div>
+        <f:for each="{lines}" as="line">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <f:if condition="{line.defaultPageTSconfig}">
+                        <f:then>
+                          <f:translate key="LLL:EXT:info_pagetsconfig/Resources/Private/Language/locallang.xlf:editTSconfig_default" />
+                        </f:then>
+                        <f:else>
+                            <f:format.raw>{line.title}</f:format.raw>
+                        </f:else>
+                    </f:if>
+                </div>
+                <div class="panel-body">
+                    <f:if condition="{line.content -> f:format.stripTags() -> f:spaceless()}">
+                        <f:format.raw>{line.content}</f:format.raw>
+                    </f:if>
+                    <f:render partial="EditIcon" arguments="{editIcon: line.editIcon, editTitle: line.editTitle}" />
+                </div>
+            </div>
+        </f:for>
+        <f:render partial="EditIcon" arguments="{editIcon: editIcon, editTitle: editTitle, editAll: 1}" />
     </f:then>
     <f:else>
         <div class="nowrap">