Commit e162e46a authored by Oliver Bartsch's avatar Oliver Bartsch Committed by Benjamin Franzke
Browse files

[BUGFIX] Add nav-* classes to nav tab items

See: https://getbootstrap.com/docs/5.0/components/navs-tabs/
for reference.

Resolves: #93124
Releases: master
Change-Id: Ifacfe27b269cb09fb002a37e9d809192708f13da
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67213

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Tested-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Benjamin Franzke's avatarBenjamin Franzke <bfr@qbus.de>
parent 335389a6
......@@ -75,10 +75,11 @@ class DebugConsole {
if ($tab.length === 0) {
// create new tab
$tab =
$('<li />', {role: 'presentation', 'data-identifier': tabIdentifier}).append(
$('<li />', {role: 'presentation', class: 'nav-item', 'data-identifier': tabIdentifier}).append(
$('<a />', {
'aria-controls': tabIdentifier,
'data-toggle': 'tab',
class: 'nav-link',
href: '#' + tabIdentifier,
role: 'tab',
}).text(group + ' ').append(
......
......@@ -780,8 +780,9 @@ class Backend extends Workspaces {
if (item.diff.length > 0) {
$tabsNav.append(
$('<li />', {role: 'presentation'}).append(
$('<li />', {role: 'presentation', class: 'nav-item'}).append(
$('<a />', {
class: 'nav-link',
href: '#workspace-changes',
'aria-controls': 'workspace-changes',
role: 'tab',
......@@ -800,8 +801,9 @@ class Backend extends Workspaces {
if (item.comments.length > 0) {
$tabsNav.append(
$('<li />', {role: 'presentation'}).append(
$('<li />', {role: 'presentation', class: 'nav-item'}).append(
$('<a />', {
class: 'nav-link',
href: '#workspace-comments',
'aria-controls': 'workspace-comments',
role: 'tab',
......@@ -822,8 +824,9 @@ class Backend extends Workspaces {
if (item.history.total > 0) {
$tabsNav.append(
$('<li />', {role: 'presentation'}).append(
$('<li />', {role: 'presentation', class: 'nav-item'}).append(
$('<a />', {
class: 'nav-link',
href: '#workspace-history',
'aria-controls': 'workspace-history',
role: 'tab',
......
......@@ -12,8 +12,8 @@
<div class="element-browser-panel element-browser-tabs">
<ul class="nav nav-tabs" role="tablist">
<f:for each="{menuItems}" as="menuItem" key="menuId">
<li{f:if(condition: '{menuItem.isActive}', then: ' class="active"')}>
<a href="{menuItem.url}" {menuItem.addParams -> f:format.raw()}>{menuItem.label}</a>
<li class="nav-item {f:if(condition: '{menuItem.isActive}', then: 'active')}">
<a href="{menuItem.url}" class="nav-link" {menuItem.addParams -> f:format.raw()}>{menuItem.label}</a>
</li>
</f:for>
</ul>
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};define(["require","exports","jquery"],(function(t,e,s){"use strict";s=__importDefault(s);class a{constructor(){this.settings={autoscroll:!0},s.default(()=>{this.createDom()})}static incrementInactiveTabCounter(t){if(!t.hasClass("active")){const e=t.find(".badge");let s=parseInt(e.text(),10);isNaN(s)&&(s=0),e.text(++s)}}add(t,e,n){this.attachToViewport();const o=s.default("<p />").html(t);void 0!==e&&e.length>0&&o.prepend(s.default("<strong />").text(e)),void 0!==n&&0!==n.length||(n="Debug");const l="debugtab-"+n.toLowerCase().replace(/\W+/g,"-"),d=this.$consoleDom.find(".t3js-debuggroups"),i=this.$consoleDom.find(".t3js-debugcontent");let c=this.$consoleDom.find(".t3js-debuggroups li[data-identifier="+l+"]");0===c.length&&(c=s.default("<li />",{role:"presentation","data-identifier":l}).append(s.default("<a />",{"aria-controls":l,"data-toggle":"tab",href:"#"+l,role:"tab"}).text(n+" ").append(s.default("<span />",{class:"badge"}))).on("shown.bs.tab",t=>{s.default(t.currentTarget).find(".badge").text("")}),d.append(c),i.append(s.default("<div />",{role:"tabpanel",class:"tab-pane",id:l}).append(s.default("<div />",{class:"t3js-messages messages"})))),0===d.find(".active").length&&d.find("a:first").tab("show"),a.incrementInactiveTabCounter(c),this.incrementUnreadMessagesIfCollapsed();const r=s.default("#"+l+" .t3js-messages"),u=r.parent().hasClass("active");r.append(o),this.settings.autoscroll&&u&&r.scrollTop(r.prop("scrollHeight"))}createDom(){void 0===this.$consoleDom&&(this.$consoleDom=s.default("<div />",{id:"typo3-debug-console"}).append(s.default("<div />",{class:"t3js-topbar topbar"}).append(s.default("<p />",{class:"pull-left"}).text(" TYPO3 Debug Console").prepend(s.default("<span />",{class:"fa fa-terminal topbar-icon"})).append(s.default("<span />",{class:"badge"})),s.default("<div />",{class:"t3js-buttons btn-group pull-right"})),s.default("<div />").append(s.default("<div />",{role:"tabpanel"}).append(s.default("<ul />",{class:"nav nav-tabs t3js-debuggroups",role:"tablist"})),s.default("<div />",{class:"tab-content t3js-debugcontent"}))),this.addButton(s.default("<button />",{class:"btn btn-default btn-sm "+(this.settings.autoscroll?"active":""),title:TYPO3.lang["debuggerconsole.autoscroll"]}).append(s.default("<span />",{class:"t3-icon fa fa-magnet"})),()=>{s.default(this).button("toggle"),this.settings.autoscroll=!this.settings.autoscroll}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.toggle.collapse"]}).append(s.default("<span />",{class:"t3-icon fa fa-chevron-down"})),t=>{let e=s.default(t.currentTarget),a=e.find(".t3-icon"),n=this.$consoleDom.find(".t3js-topbar").next();n.toggle(),n.is(":visible")?(e.attr("title",TYPO3.lang["debuggerconsole.toggle.collapse"]),a.toggleClass("fa-chevron-down",!0).toggleClass("fa-chevron-up",!1),this.resetGlobalUnreadCounter()):(e.attr("title",TYPO3.lang["debuggerconsole.toggle.expand"]),a.toggleClass("fa-chevron-down",!1).toggleClass("fa-chevron-up",!0))}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.clear"]}).append(s.default("<span />",{class:"t3-icon fa fa-undo"})),()=>{this.flush()}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.close"]}).append(s.default("<span />",{class:"t3-icon fa fa-times"})),()=>{this.destroy(),this.createDom()}))}addButton(t,e){return t.on("click",e),this.$consoleDom.find(".t3js-buttons").append(t),this}attachToViewport(){const t=s.default(".t3js-scaffold-content");0===t.has(this.$consoleDom).length&&t.append(this.$consoleDom)}incrementUnreadMessagesIfCollapsed(){const t=this.$consoleDom.find(".t3js-topbar");if(t.next().is(":hidden")){const e=t.find(".badge");let s=parseInt(e.text(),10);isNaN(s)&&(s=0),e.text(++s)}}resetGlobalUnreadCounter(){this.$consoleDom.find(".t3js-topbar").find(".badge").text("")}flush(){const t=this.$consoleDom.find(".t3js-debuggroups"),e=this.$consoleDom.find(".t3js-debugcontent");t.children().remove(),e.children().remove()}destroy(){this.$consoleDom.remove(),this.$consoleDom=void 0}}const n=new a;return TYPO3.DebugConsole=n,n}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};define(["require","exports","jquery"],(function(t,e,s){"use strict";s=__importDefault(s);class a{constructor(){this.settings={autoscroll:!0},s.default(()=>{this.createDom()})}static incrementInactiveTabCounter(t){if(!t.hasClass("active")){const e=t.find(".badge");let s=parseInt(e.text(),10);isNaN(s)&&(s=0),e.text(++s)}}add(t,e,n){this.attachToViewport();const o=s.default("<p />").html(t);void 0!==e&&e.length>0&&o.prepend(s.default("<strong />").text(e)),void 0!==n&&0!==n.length||(n="Debug");const l="debugtab-"+n.toLowerCase().replace(/\W+/g,"-"),d=this.$consoleDom.find(".t3js-debuggroups"),i=this.$consoleDom.find(".t3js-debugcontent");let c=this.$consoleDom.find(".t3js-debuggroups li[data-identifier="+l+"]");0===c.length&&(c=s.default("<li />",{role:"presentation",class:"nav-item","data-identifier":l}).append(s.default("<a />",{"aria-controls":l,"data-toggle":"tab",class:"nav-link",href:"#"+l,role:"tab"}).text(n+" ").append(s.default("<span />",{class:"badge"}))).on("shown.bs.tab",t=>{s.default(t.currentTarget).find(".badge").text("")}),d.append(c),i.append(s.default("<div />",{role:"tabpanel",class:"tab-pane",id:l}).append(s.default("<div />",{class:"t3js-messages messages"})))),0===d.find(".active").length&&d.find("a:first").tab("show"),a.incrementInactiveTabCounter(c),this.incrementUnreadMessagesIfCollapsed();const r=s.default("#"+l+" .t3js-messages"),u=r.parent().hasClass("active");r.append(o),this.settings.autoscroll&&u&&r.scrollTop(r.prop("scrollHeight"))}createDom(){void 0===this.$consoleDom&&(this.$consoleDom=s.default("<div />",{id:"typo3-debug-console"}).append(s.default("<div />",{class:"t3js-topbar topbar"}).append(s.default("<p />",{class:"pull-left"}).text(" TYPO3 Debug Console").prepend(s.default("<span />",{class:"fa fa-terminal topbar-icon"})).append(s.default("<span />",{class:"badge"})),s.default("<div />",{class:"t3js-buttons btn-group pull-right"})),s.default("<div />").append(s.default("<div />",{role:"tabpanel"}).append(s.default("<ul />",{class:"nav nav-tabs t3js-debuggroups",role:"tablist"})),s.default("<div />",{class:"tab-content t3js-debugcontent"}))),this.addButton(s.default("<button />",{class:"btn btn-default btn-sm "+(this.settings.autoscroll?"active":""),title:TYPO3.lang["debuggerconsole.autoscroll"]}).append(s.default("<span />",{class:"t3-icon fa fa-magnet"})),()=>{s.default(this).button("toggle"),this.settings.autoscroll=!this.settings.autoscroll}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.toggle.collapse"]}).append(s.default("<span />",{class:"t3-icon fa fa-chevron-down"})),t=>{let e=s.default(t.currentTarget),a=e.find(".t3-icon"),n=this.$consoleDom.find(".t3js-topbar").next();n.toggle(),n.is(":visible")?(e.attr("title",TYPO3.lang["debuggerconsole.toggle.collapse"]),a.toggleClass("fa-chevron-down",!0).toggleClass("fa-chevron-up",!1),this.resetGlobalUnreadCounter()):(e.attr("title",TYPO3.lang["debuggerconsole.toggle.expand"]),a.toggleClass("fa-chevron-down",!1).toggleClass("fa-chevron-up",!0))}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.clear"]}).append(s.default("<span />",{class:"t3-icon fa fa-undo"})),()=>{this.flush()}).addButton(s.default("<button />",{class:"btn btn-default btn-sm",title:TYPO3.lang["debuggerconsole.close"]}).append(s.default("<span />",{class:"t3-icon fa fa-times"})),()=>{this.destroy(),this.createDom()}))}addButton(t,e){return t.on("click",e),this.$consoleDom.find(".t3js-buttons").append(t),this}attachToViewport(){const t=s.default(".t3js-scaffold-content");0===t.has(this.$consoleDom).length&&t.append(this.$consoleDom)}incrementUnreadMessagesIfCollapsed(){const t=this.$consoleDom.find(".t3js-topbar");if(t.next().is(":hidden")){const e=t.find(".badge");let s=parseInt(e.text(),10);isNaN(s)&&(s=0),e.text(++s)}}resetGlobalUnreadCounter(){this.$consoleDom.find(".t3js-topbar").find(".badge").text("")}flush(){const t=this.$consoleDom.find(".t3js-debuggroups"),e=this.$consoleDom.find(".t3js-debugcontent");t.children().remove(),e.children().remove()}destroy(){this.$consoleDom.remove(),this.$consoleDom=void 0}}const n=new a;return TYPO3.DebugConsole=n,n}));
\ No newline at end of file
......@@ -6,24 +6,24 @@
<h1><f:translate key="title_export" /></h1>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a class="text-capitalize" href="#export-configuration" aria-controls="export-configuration" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item active">
<a class="nav-link text-capitalize" href="#export-configuration" aria-controls="export-configuration" role="tab" data-toggle="tab">
<f:translate key="tableselec_configuration" />
</a>
</li>
<li role="presentation">
<a class="text-capitalize" href="#export-filepreset" aria-controls="export-filepreset" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#export-filepreset" aria-controls="export-filepreset" role="tab" data-toggle="tab">
<f:translate key="exportdata_filePreset" />
</a>
</li>
<li role="presentation">
<a class="text-capitalize" href="#export-advancedoptions" aria-controls="export-advancedoptions" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#export-advancedoptions" aria-controls="export-advancedoptions" role="tab" data-toggle="tab">
<f:translate key="exportdata_advancedOptions" />
</a>
</li>
<f:if condition="{errors -> f:count()} > 0">
<li role="presentation">
<a class="text-capitalize" href="#export-errors" aria-controls="export-errors" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#export-errors" aria-controls="export-errors" role="tab" data-toggle="tab">
<f:translate key="exportdata_messages" />
<core:icon identifier="status-dialog-warning" />
</a>
......
......@@ -7,28 +7,28 @@
<f:flashMessages queueIdentifier="impexp.errors" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a class="text-capitalize" href="#import-import" aria-controls="import-import" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item active">
<a class="nav-link text-capitalize" href="#import-import" aria-controls="import-import" role="tab" data-toggle="tab">
<f:translate key="importdata_import" />
</a>
</li>
<f:if condition="{hasTempUploadFolder}">
<li role="presentation">
<a class="text-capitalize" href="#import-upload" aria-controls="import-upload" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#import-upload" aria-controls="import-upload" role="tab" data-toggle="tab">
<f:translate key="importdata_upload" />
</a>
</li>
</f:if>
<f:if condition="{metaDataInFileExists}">
<li role="presentation">
<a class="text-capitalize" href="#import-metadata" aria-controls="import-metadata" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#import-metadata" aria-controls="import-metadata" role="tab" data-toggle="tab">
<f:translate key="importdata_metaData_1387" />
</a>
</li>
</f:if>
<f:if condition="{errors -> f:count()} > 0">
<li role="presentation">
<a class="text-capitalize" href="#import-errors" aria-controls="import-errors" role="tab" data-toggle="tab">
<li role="presentation" class="nav-item">
<a class="nav-link text-capitalize" href="#import-errors" aria-controls="import-errors" role="tab" data-toggle="tab">
<f:translate key="importdata_messages" />
<core:icon identifier="status-dialog-warning" />
</a>
......
......@@ -18,8 +18,8 @@
<ul class="nav nav-tabs" role="tablist">
<f:for each="{extensionData.configuration}" as="category" key="categoryName" iteration="iteration">
<f:if condition="{categoryName}">
<li role="presentation" class="{f:if(condition:'{iteration.isFirst}', then:'active')}">
<a class="text-capitalize" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-toggle="tab">{categoryName}</a>
<li role="presentation" class="nav-item {f:if(condition:'{iteration.isFirst}', then:'active')}">
<a class="nav-link text-capitalize" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-toggle="tab">{categoryName}</a>
</li>
</f:if>
</f:for>
......
......@@ -3,7 +3,9 @@
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<f:for each="{workspaceList}" as="workspace">
<li role="presentation" {f:if(condition: '{activeWorkspaceUid} == {workspace.workspaceId}', then: 'class="active"')}><a href="{workspace.triggerUrl}" aria-controls="{workspace.itemId}" role="tab">{workspace.title}</a></li>
<li role="presentation" class="nav-item {f:if(condition: '{activeWorkspaceUid} == {workspace.workspaceId}', then: 'active')}">
<a href="{workspace.triggerUrl}" class="nav-link" aria-controls="{workspace.itemId}" role="tab">{workspace.title}</a>
</li>
</f:for>
</ul>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment