From 27d243c0bbee1756bb1e548a3a4520ae0b749185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20B=C3=BCrk?= <stefan@buerk.tech>
Date: Wed, 21 Jan 2026 18:53:43 +0100
Subject: [PATCH] [TASK] Ensure some spacing below translation mode icons

The translation model used in the PageLayoutModule get
the available translation modes over an AJAX request
and rendering the mode rows in JavaScript.

To prepare the reduction of the mode description in
`EXT:deepltranslate_core` this change now adds

```html
style="margin-bottom: 20px;"
```

to the left mode select column for each mode to ensure
some spacing if the description text is to small.

Used command(s):

```shell
Build/Scripts/runTests.sh -t 12 \
  -s buildCoreOverrideJavaScriptFiles \
&& Build/Scripts/runTests.sh -t 13 \
  -s buildCoreOverrideJavaScriptFiles
```

[1] https://github.com/web-vision/deepltranslate-core/pull/512
---
 .../Overrides/Core12/Sources/TypeScript/backend/localization.ts | 2 +-
 .../Sources/TypeScript/backend/localization/provider-list.ts    | 2 +-
 Build/Scripts/runTests.sh                                       | 1 +
 Resources/Public/JavaScript/Core12/localization.js              | 2 +-
 .../Public/JavaScript/Core13/localization/provider-list.js      | 2 +-
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/Build/Overrides/Core12/Sources/TypeScript/backend/localization.ts b/Build/Overrides/Core12/Sources/TypeScript/backend/localization.ts
index 5911624..47a0eab 100644
--- a/Build/Overrides/Core12/Sources/TypeScript/backend/localization.ts
+++ b/Build/Overrides/Core12/Sources/TypeScript/backend/localization.ts
@@ -367,7 +367,7 @@ class Localization {
     const iconMarkup: string = await Icons.getIcon(provider.icon, Icons.sizes.large, null, null, MarkupIdentifiers.inline);
     return Promise.resolve(
       '<div class="row">'
-      + '<div class="col-sm-3">'
+      + '<div class="col-sm-3" style="margin-bottom: 20px;">'
       + '<label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-translate">'
       + iconMarkup
       + '<input type="radio" name="mode" id="' + provider.identifier + '" value="' + provider.identifier + '" style="display: none">'
diff --git a/Build/Overrides/Core13/Sources/TypeScript/backend/localization/provider-list.ts b/Build/Overrides/Core13/Sources/TypeScript/backend/localization/provider-list.ts
index d768b15..7dc3e13 100644
--- a/Build/Overrides/Core13/Sources/TypeScript/backend/localization/provider-list.ts
+++ b/Build/Overrides/Core13/Sources/TypeScript/backend/localization/provider-list.ts
@@ -23,7 +23,7 @@ class LocalizationProviders extends LitElement {
   public override render(): TemplateResult {
     return html`${this.providers.map((provider) =>
       html`<div class="row">
-        <div class="col-sm-3">
+        <div class="col-sm-3" style="margin-bottom: 20px;">
           <input class="btn-check t3js-localization-option" type="radio" name="mode" id="${provider.identifier}" value=${provider.identifier}>
           <label class="btn btn-default btn-block-vertical" for="${provider.identifier}" data-action="${provider.identifier}">
             <typo3-backend-icon identifier=${provider.icon} size="large"></typo3-backend-icon>
diff --git a/Build/Scripts/runTests.sh b/Build/Scripts/runTests.sh
index af14a1a..4039e5b 100755
--- a/Build/Scripts/runTests.sh
+++ b/Build/Scripts/runTests.sh
@@ -38,6 +38,7 @@ prepareCoreOverrideJavaScriptFilesBuildPath() {
     fi
     git reset --hard
     git clean -xdf
+    git status
     git fetch --all --tags --prune
     git checkout main
     git reset --hard origin/main
diff --git a/Resources/Public/JavaScript/Core12/localization.js b/Resources/Public/JavaScript/Core12/localization.js
index d453dc5..96c73d7 100644
--- a/Resources/Public/JavaScript/Core12/localization.js
+++ b/Resources/Public/JavaScript/Core12/localization.js
@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Icons from"@typo3/backend/icons.js";import Wizard from"@typo3/backend/wizard.js";import"@typo3/backend/element/icon-element.js";import{MarkupIdentifiers}from"@typo3/backend/enum/icon-types.js";import Modal from"@typo3/backend/modal.js";class Localization{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],DocumentService.ready().then((()=>{this.initialize()}))}initialize(){$(this.triggerButton).removeClass("disabled"),$(document).on("click",this.triggerButton,(async e=>{e.preventDefault();const t=$(e.currentTarget),a=parseInt(t.data("pageId"),10),i=parseInt(t.data("languageId"),10),o=await(await this.getLocalizationProviders(a,i)).resolve();if(0===o.length)return void Modal.confirm(TYPO3.lang["window.localization.mixed_mode.title"],TYPO3.lang["window.localization.mixed_mode.message"],SeverityEnum.warning,[{text:TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-warning",name:"ok",trigger:(e,t)=>t.hideModal()}]);const n='<div data-bs-toggle="buttons">'+(await Promise.all(o.map((async e=>this.createProviderMarkup(e))))).join("")+"</div>";Wizard.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",t.data("page")).replace("{1}",t.data("languageName")),n,SeverityEnum.info,(()=>{1===o.length&&(this.localizationMode=o[0].identifier,Wizard.unlockNextStep().trigger("click"))})),Wizard.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",SeverityEnum.info,(e=>{Icons.getIcon("spinner-circle-dark",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>"),this.loadAvailableLanguages(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10)).then((async t=>{const a=await t.resolve();if(1===a.length)return this.sourceLanguage=a[0].uid,void Wizard.unlockNextStep().trigger("click");Wizard.getComponent().on("click",".t3js-language-option",(e=>{const t=$(e.currentTarget).prev();this.sourceLanguage=t.val(),Wizard.unlockNextStep()}));const i=$("<div />",{class:"row"});for(const e of a){const t="language"+e.uid,a=$("<input />",{type:"radio",name:"language",id:t,value:e.uid,style:"display: none;",class:"btn-check"}),o=$("<label />",{class:"btn btn-default d-block t3js-language-option option",for:t}).text(" "+e.title).prepend(e.flagIcon);i.append($("<div />",{class:"col-sm-4"}).append(a).append(o))}e.empty().append(i)}))}))})),Wizard.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",SeverityEnum.info,(e=>{Icons.getIcon("spinner-circle-dark",Icons.sizes.large).then((t=>{e.html('<div class="text-center">'+t+"</div>")})),this.getSummary(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10)).then((async t=>{const a=await t.resolve();e.empty(),this.records=[];const i=a.columns.columns;a.columns.columnList.forEach((t=>{if(void 0===a.records[t])return;const o=i[t],n=$("<div />",{class:"row"});a.records[t].forEach((e=>{const t=" ("+e.uid+") "+e.title;this.records.push(e.uid),n.append($("<div />",{class:"col-sm-6"}).append($("<div />",{class:"input-group"}).append($("<span />",{class:"input-group-addon"}).append($("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":t})),$("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(t).prepend(e.icon))))})),e.append($("<fieldset />",{class:"localization-fieldset"}).append($("<label />").text(o).prepend($("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),n))})),Wizard.unlockNextStep(),Wizard.getComponent().on("change",".t3js-localization-toggle-record",(e=>{const t=$(e.currentTarget),a=t.data("uid"),i=t.closest("fieldset"),o=i.find(".t3js-localization-toggle-column");if(t.is(":checked"))this.records.push(a);else{const e=this.records.indexOf(a);e>-1&&this.records.splice(e,1)}const n=i.find(".t3js-localization-toggle-record"),s=i.find(".t3js-localization-toggle-record:checked");o.prop("checked",s.length>0),o.prop("indeterminate",s.length>0&&s.length<n.length),this.records.length>0?Wizard.unlockNextStep():Wizard.lockNextStep()})).on("change",".t3js-localization-toggle-column",(e=>{const t=$(e.currentTarget),a=t.closest("fieldset").find(".t3js-localization-toggle-record");a.prop("checked",t.is(":checked")),a.trigger("change")}))}))})),Wizard.addFinalProcessingSlide((()=>{this.localizeRecords(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10),this.records).then((()=>{Wizard.dismiss(),document.location.reload()}))})).then((()=>{Wizard.show(),Wizard.getComponent().on("click",".t3js-localization-option",(e=>{const t=$(e.currentTarget),a=t.find('input[type="radio"]');if(t.data("helptext")){const a=$(e.delegateTarget);a.find(".t3js-localization-option").removeClass("active"),a.find(".t3js-helptext").addClass("text-body-secondary"),t.addClass("active"),a.find(t.data("helptext")).removeClass("text-body-secondary")}this.localizationMode=a.val(),Wizard.unlockNextStep()}))}))}))}loadAvailableLanguages(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:t}).get()}getSummary(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:t,languageId:this.sourceLanguage,localizationMode:this.localizationMode}).get()}localizeRecords(e,t,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:t,action:this.localizationMode,uidList:a}).get()}getLocalizationProviders(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_providers).withQueryArguments({uid:e,languageId:t}).get()}async createProviderMarkup(e){const t=await Icons.getIcon(e.icon,Icons.sizes.large,null,null,MarkupIdentifiers.inline);return Promise.resolve('<div class="row"><div class="col-sm-3"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-translate">'+t+'<input type="radio" name="mode" id="'+e.identifier+'" value="'+e.identifier+'" style="display: none"><br>'+e.title+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-body-secondary">'+e.description+"</p></div></div>")}}export default new Localization;
\ No newline at end of file
+import DocumentService from"@typo3/core/document-service.js";import $ from"jquery";import{SeverityEnum}from"@typo3/backend/enum/severity.js";import AjaxRequest from"@typo3/core/ajax/ajax-request.js";import Icons from"@typo3/backend/icons.js";import Wizard from"@typo3/backend/wizard.js";import"@typo3/backend/element/icon-element.js";import{MarkupIdentifiers}from"@typo3/backend/enum/icon-types.js";import Modal from"@typo3/backend/modal.js";class Localization{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],DocumentService.ready().then((()=>{this.initialize()}))}initialize(){$(this.triggerButton).removeClass("disabled"),$(document).on("click",this.triggerButton,(async e=>{e.preventDefault();const t=$(e.currentTarget),a=parseInt(t.data("pageId"),10),i=parseInt(t.data("languageId"),10),o=await(await this.getLocalizationProviders(a,i)).resolve();if(0===o.length)return void Modal.confirm(TYPO3.lang["window.localization.mixed_mode.title"],TYPO3.lang["window.localization.mixed_mode.message"],SeverityEnum.warning,[{text:TYPO3?.lang?.["button.ok"]||"OK",btnClass:"btn-warning",name:"ok",trigger:(e,t)=>t.hideModal()}]);const n='<div data-bs-toggle="buttons">'+(await Promise.all(o.map((async e=>this.createProviderMarkup(e))))).join("")+"</div>";Wizard.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",t.data("page")).replace("{1}",t.data("languageName")),n,SeverityEnum.info,(()=>{1===o.length&&(this.localizationMode=o[0].identifier,Wizard.unlockNextStep().trigger("click"))})),Wizard.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",SeverityEnum.info,(e=>{Icons.getIcon("spinner-circle-dark",Icons.sizes.large).then((a=>{e.html('<div class="text-center">'+a+"</div>"),this.loadAvailableLanguages(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10)).then((async t=>{const a=await t.resolve();if(1===a.length)return this.sourceLanguage=a[0].uid,void Wizard.unlockNextStep().trigger("click");Wizard.getComponent().on("click",".t3js-language-option",(e=>{const t=$(e.currentTarget).prev();this.sourceLanguage=t.val(),Wizard.unlockNextStep()}));const i=$("<div />",{class:"row"});for(const e of a){const t="language"+e.uid,a=$("<input />",{type:"radio",name:"language",id:t,value:e.uid,style:"display: none;",class:"btn-check"}),o=$("<label />",{class:"btn btn-default d-block t3js-language-option option",for:t}).text(" "+e.title).prepend(e.flagIcon);i.append($("<div />",{class:"col-sm-4"}).append(a).append(o))}e.empty().append(i)}))}))})),Wizard.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",SeverityEnum.info,(e=>{Icons.getIcon("spinner-circle-dark",Icons.sizes.large).then((t=>{e.html('<div class="text-center">'+t+"</div>")})),this.getSummary(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10)).then((async t=>{const a=await t.resolve();e.empty(),this.records=[];const i=a.columns.columns;a.columns.columnList.forEach((t=>{if(void 0===a.records[t])return;const o=i[t],n=$("<div />",{class:"row"});a.records[t].forEach((e=>{const t=" ("+e.uid+") "+e.title;this.records.push(e.uid),n.append($("<div />",{class:"col-sm-6"}).append($("<div />",{class:"input-group"}).append($("<span />",{class:"input-group-addon"}).append($("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":t})),$("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(t).prepend(e.icon))))})),e.append($("<fieldset />",{class:"localization-fieldset"}).append($("<label />").text(o).prepend($("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),n))})),Wizard.unlockNextStep(),Wizard.getComponent().on("change",".t3js-localization-toggle-record",(e=>{const t=$(e.currentTarget),a=t.data("uid"),i=t.closest("fieldset"),o=i.find(".t3js-localization-toggle-column");if(t.is(":checked"))this.records.push(a);else{const e=this.records.indexOf(a);e>-1&&this.records.splice(e,1)}const n=i.find(".t3js-localization-toggle-record"),s=i.find(".t3js-localization-toggle-record:checked");o.prop("checked",s.length>0),o.prop("indeterminate",s.length>0&&s.length<n.length),this.records.length>0?Wizard.unlockNextStep():Wizard.lockNextStep()})).on("change",".t3js-localization-toggle-column",(e=>{const t=$(e.currentTarget),a=t.closest("fieldset").find(".t3js-localization-toggle-record");a.prop("checked",t.is(":checked")),a.trigger("change")}))}))})),Wizard.addFinalProcessingSlide((()=>{this.localizeRecords(parseInt(t.data("pageId"),10),parseInt(t.data("languageId"),10),this.records).then((()=>{Wizard.dismiss(),document.location.reload()}))})).then((()=>{Wizard.show(),Wizard.getComponent().on("click",".t3js-localization-option",(e=>{const t=$(e.currentTarget),a=t.find('input[type="radio"]');if(t.data("helptext")){const a=$(e.delegateTarget);a.find(".t3js-localization-option").removeClass("active"),a.find(".t3js-helptext").addClass("text-body-secondary"),t.addClass("active"),a.find(t.data("helptext")).removeClass("text-body-secondary")}this.localizationMode=a.val(),Wizard.unlockNextStep()}))}))}))}loadAvailableLanguages(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:t}).get()}getSummary(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:t,languageId:this.sourceLanguage,localizationMode:this.localizationMode}).get()}localizeRecords(e,t,a){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:t,action:this.localizationMode,uidList:a}).get()}getLocalizationProviders(e,t){return new AjaxRequest(TYPO3.settings.ajaxUrls.records_localize_providers).withQueryArguments({uid:e,languageId:t}).get()}async createProviderMarkup(e){const t=await Icons.getIcon(e.icon,Icons.sizes.large,null,null,MarkupIdentifiers.inline);return Promise.resolve('<div class="row"><div class="col-sm-3" style="margin-bottom: 20px;"><label class="btn btn-default d-block t3js-localization-option" data-helptext=".t3js-helptext-translate">'+t+'<input type="radio" name="mode" id="'+e.identifier+'" value="'+e.identifier+'" style="display: none"><br>'+e.title+'</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-body-secondary">'+e.description+"</p></div></div>")}}export default new Localization;
\ No newline at end of file
diff --git a/Resources/Public/JavaScript/Core13/localization/provider-list.js b/Resources/Public/JavaScript/Core13/localization/provider-list.js
index 2b98564..f698f3a 100644
--- a/Resources/Public/JavaScript/Core13/localization/provider-list.js
+++ b/Resources/Public/JavaScript/Core13/localization/provider-list.js
@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 var __decorate=function(e,t,i,o){var r,l=arguments.length,a=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(a=(l<3?r(a):l>3?r(t,i,a):r(t,i))||a);return l>3&&a&&Object.defineProperty(t,i,a),a};import{customElement,property}from"lit/decorators.js";import{html,LitElement}from"lit";import{unsafeHTML}from"lit/directives/unsafe-html.js";let LocalizationProviders=class extends LitElement{render(){return html`${this.providers.map((e=>html`<div class="row">
-        <div class="col-sm-3">
+        <div class="col-sm-3" style="margin-bottom: 20px;">
           <input class="btn-check t3js-localization-option" type="radio" name="mode" id="${e.identifier}" value=${e.identifier}>
           <label class="btn btn-default btn-block-vertical" for="${e.identifier}" data-action="${e.identifier}">
             <typo3-backend-icon identifier=${e.icon} size="large"></typo3-backend-icon>