[WIP] HTML Markup

Author: achimfritz

Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html

@@ -1,45 +1,47 @@
+{columnHeaderLevel -> f:or(alternative: 2) -> f:variable(name: 'columnHeaderLevel')}
+
 <div class="t3-page-column-header">
     <f:if condition="{column.active}">
         <f:then>
             <div class="t3-page-column-header-icons">
                 <f:if condition="{allowEditContent} && {column.editUrl}">
-                    <a href="{column.editUrl}" title="{column.editLinkTitle}"><core:icon identifier="actions-document-open" /></a>
+                    <a
+                        class="btn btn-link"
+                        href="{column.editUrl}"
+                        title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:editColumn')}"
+                    >
+                        <core:icon identifier="actions-document-open" />
+                        <span class="visually-hidden">{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:editColumn')}</span>
+                    </a>
                 </f:if>
             </div>
-            {column.title}
+            <h{columnHeaderLevel} id="{columnIdentifier}" class="t3-page-column-title">{column.title}</h{columnHeaderLevel}>
         </f:then>
         <f:else if="{column.unused}">
-            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/>
+            <span id="{columnIdentifier}"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/></span>
         </f:else>
         <f:else if="{column.unassigned}">
-            {column.titleUnassigned}
+            <span id="{columnIdentifier}">{column.titleUnassigned}</span>
         </f:else>
         <f:else>
-            {column.titleInaccessible}
+            <span id="{columnIdentifier}">{column.titleInaccessible}</span>
         </f:else>
     </f:if>
 </div>
 <f:format.raw>{column.beforeSectionMarkup}</f:format.raw>
 <f:if condition="{allowEditContent} && {column.contentEditable} && {column.allowNewContent} && {column.active}">
-    <div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}" id="{column.uniqueId}">
-        <div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{column.columnNumber}-page-{column.context.pageId}-{column.uniqueId}">
-            <f:if condition="{column.newContentElementWizardShouldBeSkipped}">
-                <f:then>
-                    <a href="{column.newContentUrl}" title="{newContentTitle}" class="btn btn-default btn-sm">
-                        <core:icon identifier="actions-add" />
-                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
-                    </a>
-                </f:then>
-                <f:else>
-                    <typo3-backend-new-content-element-wizard-button url="{column.newContentUrl}" subject="{newContentTitle}">
-                        <button type="button" class="btn btn-default btn-sm">
-                            <core:icon identifier="actions-add" />
-                            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
-                        </button>
-                    </typo3-backend-new-content-element-wizard-button>
-                </f:else>
-            </f:if>
-        </div>
+    <div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}" >
+		<f:if condition="{column.newContentElementWizardShouldBeSkipped}">
+			<f:then>
+				<a href="{column.newContentUrl}" title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:newContentElement')}" class="btn btn-default btn-sm">
+					<core:icon identifier="actions-add" />
+					<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
+				</a>
+			</f:then>
+			<f:else>
+				<f:render partial="PageLayout/ActionControls" arguments="{url: column.newContentUrl}" />
+			</f:else>
+		</f:if>
         <div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available" hidden></div>
     </div>
 </f:if>