[BUGFIX] Restore styling of localization wizard

Updated styling and javascript to restore styling of the
localization wizard after the update to bootstrap 5.

Resolves: #93408
Releases: master
Change-Id: I6f3dc03af943e3eae240c84a218e8b72dcb8d276
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67627


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Riccardo De Contardi <erredeco@gmail.com>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/Sass/component/_modal.scss

@@ -99,6 +99,10 @@ $modal-danger-border: darken($danger, 5%);
             vertical-align: middle;
         }
     }
+
+    .progress {
+        flex-basis: 100%;
+    }
 }
 
 .modal-content {

Build/Sources/Sass/typo3/_wizard_localization.scss

@@ -14,6 +14,7 @@ $option-margin-bottom: $padding-small-horizontal;
         .form-control {
             height: auto;
             font-weight: normal;
+            margin: 0;
         }
     }
 

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Localization.ts

@@ -68,7 +68,7 @@ class Localization {
           if ($triggerButton.data('allowTranslate')) {
             actions.push(
               '<div class="row">'
-              + '<div class="btn-group col-sm-3">'
+              + '<div class="col-sm-3">'
               + '<label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-translate">'
               + localizeIconMarkup
               + '<input type="radio" name="mode" id="mode_translate" value="localize" style="display: none">'
@@ -84,7 +84,7 @@ class Localization {
           if ($triggerButton.data('allowCopy')) {
             actions.push(
               '<div class="row">'
-              + '<div class="col-sm-3 btn-group">'
+              + '<div class="col-sm-3">'
               + '<label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-copy">'
               + copyIconMarkup
               + '<input type="radio" name="mode" id="mode_copy" value="copyFromLanguage" style="display: none">'
@@ -307,7 +307,9 @@ class Localization {
 
               if ($me.data('helptext')) {
                 const $container = $(optionEvt.delegateTarget);
+                $container.find('.t3js-localization-option').removeClass('active');
                 $container.find('.t3js-helptext').addClass('text-muted');
+                $me.addClass('active');
                 $container.find($me.data('helptext')).removeClass('text-muted');
               }
               this.localizationMode = $radio.val();

typo3/sysext/backend/Resources/Public/JavaScript/Localization.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","./Enum/Severity","TYPO3/CMS/Core/Ajax/AjaxRequest","./Icons","./Wizard"],(function(e,t,a,l,s,i,o){"use strict";a=__importDefault(a);return new class{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],a.default(()=>{this.initialize()})}initialize(){const e=this;i.getIcon("actions-localize",i.sizes.large).then(t=>{i.getIcon("actions-edit-copy",i.sizes.large).then(s=>{a.default(e.triggerButton).removeClass("disabled"),a.default(document).on("click",e.triggerButton,e=>{e.preventDefault();const n=a.default(e.currentTarget),d=[];let c="";n.data("allowTranslate")&&d.push('<div class="row"><div class="btn-group col-sm-3"><label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-translate">'+t+'<input type="radio" name="mode" id="mode_translate" value="localize" style="display: none"><br>Translate</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-muted">'+TYPO3.lang["localize.educate.translate"]+"</p></div></div>"),n.data("allowCopy")&&d.push('<div class="row"><div class="col-sm-3 btn-group"><label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-copy">'+s+'<input type="radio" name="mode" id="mode_copy" value="copyFromLanguage" style="display: none"><br>Copy</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-copy text-muted">'+TYPO3.lang["localize.educate.copy"]+"</p></div></div>"),0===n.data("allowTranslate")&&0===n.data("allowCopy")&&d.push('<div class="row"><div class="col-sm-12"><div class="alert alert-warning"><div class="media"><div class="media-left"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-exclamation fa-stack-1x"></i></span></div><div class="media-body"><p class="alert-message">'+TYPO3.lang["localize.educate.noTranslate"]+"</p></div></div></div></div></div>"),c+='<div data-bs-toggle="buttons">'+d.join("<hr>")+"</div>",o.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",n.data("page")).replace("{1}",n.data("languageName")),c,l.SeverityEnum.info),o.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",l.SeverityEnum.info,e=>{i.getIcon("spinner-circle-dark",i.sizes.large).then(t=>{e.html('<div class="text-center">'+t+"</div>"),this.loadAvailableLanguages(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10)).then(async t=>{const l=await t.resolve();if(1===l.length)return this.sourceLanguage=l[0].uid,void o.unlockNextStep().trigger("click");o.getComponent().on("click",".t3js-language-option",e=>{const t=a.default(e.currentTarget).find('input[type="radio"]');this.sourceLanguage=t.val(),console.log("Localization.ts@132",this.sourceLanguage),o.unlockNextStep()});const s=a.default("<div />",{class:"row","data-bs-toggle":"buttons"});for(const e of l)s.append(a.default("<div />",{class:"col-sm-4"}).append(a.default("<label />",{class:"btn btn-default btn-block t3js-language-option option"}).text(" "+e.title).prepend(e.flagIcon).prepend(a.default("<input />",{type:"radio",name:"language",id:"language"+e.uid,value:e.uid,style:"display: none;"}))));e.empty().append(s)})})}),o.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",l.SeverityEnum.info,e=>{i.getIcon("spinner-circle-dark",i.sizes.large).then(t=>{e.html('<div class="text-center">'+t+"</div>")}),this.getSummary(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10)).then(async t=>{const l=await t.resolve();e.empty(),this.records=[];const s=l.columns.columns;l.columns.columnList.forEach(t=>{if(void 0===l.records[t])return;const i=s[t],o=a.default("<div />",{class:"row"});l.records[t].forEach(e=>{const t=" ("+e.uid+") "+e.title;this.records.push(e.uid),o.append(a.default("<div />",{class:"col-sm-6"}).append(a.default("<div />",{class:"input-group"}).append(a.default("<span />",{class:"input-group-addon"}).append(a.default("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":t})),a.default("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(t).prepend(e.icon))))}),e.append(a.default("<fieldset />",{class:"localization-fieldset"}).append(a.default("<label />").text(i).prepend(a.default("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),o))}),o.unlockNextStep(),o.getComponent().on("change",".t3js-localization-toggle-record",e=>{const t=a.default(e.currentTarget),l=t.data("uid"),s=t.closest("fieldset"),i=s.find(".t3js-localization-toggle-column");if(t.is(":checked"))this.records.push(l);else{const e=this.records.indexOf(l);e>-1&&this.records.splice(e,1)}const n=s.find(".t3js-localization-toggle-record"),d=s.find(".t3js-localization-toggle-record:checked");i.prop("checked",d.length>0),i.prop("indeterminate",d.length>0&&d.length<n.length),this.records.length>0?o.unlockNextStep():o.lockNextStep()}).on("change",".t3js-localization-toggle-column",e=>{const t=a.default(e.currentTarget),l=t.closest("fieldset").find(".t3js-localization-toggle-record");l.prop("checked",t.is(":checked")),l.trigger("change")})})}),o.addFinalProcessingSlide(()=>{this.localizeRecords(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10),this.records).then(()=>{o.dismiss(),document.location.reload()})}).then(()=>{o.show(),o.getComponent().on("click",".t3js-localization-option",e=>{const t=a.default(e.currentTarget),l=t.find('input[type="radio"]');if(t.data("helptext")){const l=a.default(e.delegateTarget);l.find(".t3js-helptext").addClass("text-muted"),l.find(t.data("helptext")).removeClass("text-muted")}this.localizationMode=l.val(),o.unlockNextStep()})})})})})}loadAvailableLanguages(e,t){return new s(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:t}).get()}getSummary(e,t){return new s(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:t,languageId:this.sourceLanguage}).get()}localizeRecords(e,t,a){return new s(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:t,action:this.localizationMode,uidList:a}).get()}}}));
\ No newline at end of file
+var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","./Enum/Severity","TYPO3/CMS/Core/Ajax/AjaxRequest","./Icons","./Wizard"],(function(e,t,a,l,s,i,o){"use strict";a=__importDefault(a);return new class{constructor(){this.triggerButton=".t3js-localize",this.localizationMode=null,this.sourceLanguage=null,this.records=[],a.default(()=>{this.initialize()})}initialize(){const e=this;i.getIcon("actions-localize",i.sizes.large).then(t=>{i.getIcon("actions-edit-copy",i.sizes.large).then(s=>{a.default(e.triggerButton).removeClass("disabled"),a.default(document).on("click",e.triggerButton,e=>{e.preventDefault();const n=a.default(e.currentTarget),d=[];let c="";n.data("allowTranslate")&&d.push('<div class="row"><div class="col-sm-3"><label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-translate">'+t+'<input type="radio" name="mode" id="mode_translate" value="localize" style="display: none"><br>Translate</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-translate text-muted">'+TYPO3.lang["localize.educate.translate"]+"</p></div></div>"),n.data("allowCopy")&&d.push('<div class="row"><div class="col-sm-3"><label class="btn btn-block btn-default t3js-localization-option" data-helptext=".t3js-helptext-copy">'+s+'<input type="radio" name="mode" id="mode_copy" value="copyFromLanguage" style="display: none"><br>Copy</label></div><div class="col-sm-9"><p class="t3js-helptext t3js-helptext-copy text-muted">'+TYPO3.lang["localize.educate.copy"]+"</p></div></div>"),0===n.data("allowTranslate")&&0===n.data("allowCopy")&&d.push('<div class="row"><div class="col-sm-12"><div class="alert alert-warning"><div class="media"><div class="media-left"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-exclamation fa-stack-1x"></i></span></div><div class="media-body"><p class="alert-message">'+TYPO3.lang["localize.educate.noTranslate"]+"</p></div></div></div></div></div>"),c+='<div data-bs-toggle="buttons">'+d.join("<hr>")+"</div>",o.addSlide("localize-choose-action",TYPO3.lang["localize.wizard.header_page"].replace("{0}",n.data("page")).replace("{1}",n.data("languageName")),c,l.SeverityEnum.info),o.addSlide("localize-choose-language",TYPO3.lang["localize.view.chooseLanguage"],"",l.SeverityEnum.info,e=>{i.getIcon("spinner-circle-dark",i.sizes.large).then(t=>{e.html('<div class="text-center">'+t+"</div>"),this.loadAvailableLanguages(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10)).then(async t=>{const l=await t.resolve();if(1===l.length)return this.sourceLanguage=l[0].uid,void o.unlockNextStep().trigger("click");o.getComponent().on("click",".t3js-language-option",e=>{const t=a.default(e.currentTarget).find('input[type="radio"]');this.sourceLanguage=t.val(),console.log("Localization.ts@132",this.sourceLanguage),o.unlockNextStep()});const s=a.default("<div />",{class:"row","data-bs-toggle":"buttons"});for(const e of l)s.append(a.default("<div />",{class:"col-sm-4"}).append(a.default("<label />",{class:"btn btn-default btn-block t3js-language-option option"}).text(" "+e.title).prepend(e.flagIcon).prepend(a.default("<input />",{type:"radio",name:"language",id:"language"+e.uid,value:e.uid,style:"display: none;"}))));e.empty().append(s)})})}),o.addSlide("localize-summary",TYPO3.lang["localize.view.summary"],"",l.SeverityEnum.info,e=>{i.getIcon("spinner-circle-dark",i.sizes.large).then(t=>{e.html('<div class="text-center">'+t+"</div>")}),this.getSummary(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10)).then(async t=>{const l=await t.resolve();e.empty(),this.records=[];const s=l.columns.columns;l.columns.columnList.forEach(t=>{if(void 0===l.records[t])return;const i=s[t],o=a.default("<div />",{class:"row"});l.records[t].forEach(e=>{const t=" ("+e.uid+") "+e.title;this.records.push(e.uid),o.append(a.default("<div />",{class:"col-sm-6"}).append(a.default("<div />",{class:"input-group"}).append(a.default("<span />",{class:"input-group-addon"}).append(a.default("<input />",{type:"checkbox",class:"t3js-localization-toggle-record",id:"record-uid-"+e.uid,checked:"checked","data-uid":e.uid,"aria-label":t})),a.default("<label />",{class:"form-control",for:"record-uid-"+e.uid}).text(t).prepend(e.icon))))}),e.append(a.default("<fieldset />",{class:"localization-fieldset"}).append(a.default("<label />").text(i).prepend(a.default("<input />",{class:"t3js-localization-toggle-column",type:"checkbox",checked:"checked"})),o))}),o.unlockNextStep(),o.getComponent().on("change",".t3js-localization-toggle-record",e=>{const t=a.default(e.currentTarget),l=t.data("uid"),s=t.closest("fieldset"),i=s.find(".t3js-localization-toggle-column");if(t.is(":checked"))this.records.push(l);else{const e=this.records.indexOf(l);e>-1&&this.records.splice(e,1)}const n=s.find(".t3js-localization-toggle-record"),d=s.find(".t3js-localization-toggle-record:checked");i.prop("checked",d.length>0),i.prop("indeterminate",d.length>0&&d.length<n.length),this.records.length>0?o.unlockNextStep():o.lockNextStep()}).on("change",".t3js-localization-toggle-column",e=>{const t=a.default(e.currentTarget),l=t.closest("fieldset").find(".t3js-localization-toggle-record");l.prop("checked",t.is(":checked")),l.trigger("change")})})}),o.addFinalProcessingSlide(()=>{this.localizeRecords(parseInt(n.data("pageId"),10),parseInt(n.data("languageId"),10),this.records).then(()=>{o.dismiss(),document.location.reload()})}).then(()=>{o.show(),o.getComponent().on("click",".t3js-localization-option",e=>{const t=a.default(e.currentTarget),l=t.find('input[type="radio"]');if(t.data("helptext")){const l=a.default(e.delegateTarget);l.find(".t3js-localization-option").removeClass("active"),l.find(".t3js-helptext").addClass("text-muted"),t.addClass("active"),l.find(t.data("helptext")).removeClass("text-muted")}this.localizationMode=l.val(),o.unlockNextStep()})})})})})}loadAvailableLanguages(e,t){return new s(TYPO3.settings.ajaxUrls.page_languages).withQueryArguments({pageId:e,languageId:t}).get()}getSummary(e,t){return new s(TYPO3.settings.ajaxUrls.records_localize_summary).withQueryArguments({pageId:e,destLanguageId:t,languageId:this.sourceLanguage}).get()}localizeRecords(e,t,a){return new s(TYPO3.settings.ajaxUrls.records_localize).withQueryArguments({pageId:e,srcLanguageId:this.sourceLanguage,destLanguageId:t,action:this.localizationMode,uidList:a}).get()}}}));
\ No newline at end of file