form->getInput('core'); ?>
diff --git a/administrator/language/en-GB/en-GB.com_templates.ini b/administrator/language/en-GB/en-GB.com_templates.ini
index df5c64bdfe3d8..9ad2a1ee79ddb 100644
--- a/administrator/language/en-GB/en-GB.com_templates.ini
+++ b/administrator/language/en-GB/en-GB.com_templates.ini
@@ -80,6 +80,8 @@ COM_TEMPLATES_ERROR_WARNFILETYPE="File format not supported."
COM_TEMPLATES_ERROR_WARNIEXSS="Can't be uploaded. Has XSS."
COM_TEMPLATES_FIELD_CLIENT_LABEL="Location"
COM_TEMPLATES_FIELD_HOME_LABEL="Default"
+COM_TEMPLATES_FIELD_SHOW_CORE="Original File"
+COM_TEMPLATES_FIELD_SHOW_DIFF="Differences"
COM_TEMPLATES_FIELD_SOURCE_LABEL="Source Code"
COM_TEMPLATES_FIELD_TEMPLATE_LABEL="Template"
COM_TEMPLATES_FIELD_TITLE_LABEL="Style Name"
@@ -146,10 +148,6 @@ COM_TEMPLATES_IMAGE_WIDTH="Width"
COM_TEMPLATES_INVALID_FILE_NAME="Invalid file name. Please choose a file name with a-z, A-Z, 0-9, - and _."
COM_TEMPLATES_INVALID_FILE_TYPE="File type not selected."
COM_TEMPLATES_INVALID_FOLDER_NAME="Invalid folder name. Please choose a folder name with a-z, A-Z, 0-9, - and _."
-COM_TEMPLATES_LAYOUTS_DIFFVIEW_HIDE_CORE="Hide Original"
-COM_TEMPLATES_LAYOUTS_DIFFVIEW_HIDE_DIFF="Hide Diff"
-COM_TEMPLATES_LAYOUTS_DIFFVIEW_SHOW_CORE="Show Original"
-COM_TEMPLATES_LAYOUTS_DIFFVIEW_SHOW_DIFF="Show Diff"
COM_TEMPLATES_MANAGER_ADD_STYLE="Templates: Add Style"
COM_TEMPLATES_MANAGER_EDIT_STYLE="Templates: Edit Style"
COM_TEMPLATES_MANAGE_FOLDERS="Manage Folders"
diff --git a/build/media_source/com_templates/js/admin-template-toggle-switch.es6.js b/build/media_source/com_templates/js/admin-template-toggle-switch.es6.js
index d7593f5a1ca44..500809157b4ed 100644
--- a/build/media_source/com_templates/js/admin-template-toggle-switch.es6.js
+++ b/build/media_source/com_templates/js/admin-template-toggle-switch.es6.js
@@ -32,10 +32,15 @@
const showCoreChangedOff = () => {
const override = document.getElementById('override-pane');
const corePane = document.getElementById('core-pane');
+ const fieldset = override.parentElement.parentElement;
if (corePane && override) {
corePane.classList.remove('active');
- override.className = 'col-md-12';
+
+ if (fieldset.classList.contains('options-grid-form-half')) {
+ fieldset.classList.remove('options-grid-form-half');
+ fieldset.classList.add('options-grid-form-full');
+ }
if (typeof Storage !== 'undefined') {
localStorage.removeItem('coreSwitchState');
@@ -46,10 +51,15 @@
const showCoreChangedOn = () => {
const override = document.getElementById('override-pane');
const corePane = document.getElementById('core-pane');
+ const fieldset = override.parentElement.parentElement;
if (corePane && override) {
corePane.classList.add('active');
- override.className = 'col-md-6';
+
+ if (fieldset.classList.contains('options-grid-form-full')) {
+ fieldset.classList.remove('options-grid-form-full');
+ fieldset.classList.add('options-grid-form-half');
+ }
if (Joomla.editors.instances.jform_core) {
Joomla.editors.instances.jform_core.refresh();
@@ -62,63 +72,31 @@
};
document.addEventListener('DOMContentLoaded', () => {
- const JformShowDiff = document.getElementById('jform_show_diff');
- const JformShowCore = document.getElementById('jform_show_core');
-
- if (JformShowDiff) {
- JformShowDiff.addEventListener('joomla.switcher.on', showDiffChangedOn);
- JformShowDiff.addEventListener('joomla.switcher.off', showDiffChangedOff);
+ const JformShowDiffOn = document.getElementById('jform_show_diff1');
+ const JformShowDiffOff = document.getElementById('jform_show_diff0');
+ const JformShowCoreOn = document.getElementById('jform_show_core1');
+ const JformShowCoreOff = document.getElementById('jform_show_core0');
+
+ if (JformShowDiffOn && JformShowDiffOff) {
+ JformShowDiffOn.addEventListener('click', showDiffChangedOn);
+ JformShowDiffOff.addEventListener('click', showDiffChangedOff);
}
- if (JformShowCore) {
- JformShowCore.addEventListener('joomla.switcher.on', showCoreChangedOn);
- JformShowCore.addEventListener('joomla.switcher.off', showCoreChangedOff);
+ if (JformShowCoreOn && JformShowCoreOff) {
+ JformShowCoreOn.addEventListener('click', showCoreChangedOn);
+ JformShowCoreOff.addEventListener('click', showCoreChangedOff);
}
- // Callback executed when JformShowCore was found
- function handleJformShowCore() {
- JformShowCore.newActive = 1;
- JformShowCore.switch();
- }
-
- if (typeof Storage !== 'undefined' && localStorage.getItem('coreSwitchState') && JformShowCore) {
- // Set up the mutation observer
- const observerJformShowCore = new MutationObserver(((mutations, me) => {
- if (JformShowDiff) {
- handleJformShowCore();
- me.disconnect();
- }
- }));
-
- // Start observing
- observerJformShowCore.observe(JformShowCore, {
- childList: true,
- subtree: true,
- });
+ if (typeof Storage !== 'undefined' && localStorage.getItem('coreSwitchState') && JformShowCoreOn) {
+ JformShowCoreOn.checked = true;
+ JformShowCoreOff.checked = false;
showCoreChangedOn();
}
- // Callback executed when JformShowDiff was found
- function handleJformShowDiff() {
- JformShowDiff.newActive = 1;
- JformShowDiff.switch();
- }
-
- if (typeof Storage !== 'undefined' && localStorage.getItem('diffSwitchState') && JformShowDiff) {
- // Set up the mutation observer
- const observerJformShowDiff = new MutationObserver(((mutations, me) => {
- if (JformShowDiff) {
- handleJformShowDiff();
- me.disconnect();
- }
- }));
-
- // Start observing
- observerJformShowDiff.observe(JformShowDiff, {
- childList: true,
- subtree: true,
- });
+ if (typeof Storage !== 'undefined' && localStorage.getItem('diffSwitchState') && JformShowDiffOn) {
+ JformShowDiffOn.checked = true;
+ JformShowDiffOff.checked = false;
showDiffChangedOn();
}
diff --git a/build/media_source/system/scss/fields/switcher.scss b/build/media_source/system/scss/fields/switcher.scss
index 24ad3ace384b2..066d99f887276 100644
--- a/build/media_source/system/scss/fields/switcher.scss
+++ b/build/media_source/system/scss/fields/switcher.scss
@@ -19,6 +19,12 @@ $switcher-height: 28px;
height: $switcher-height;
width: $switcher-width;
margin: 0;
+ left: 0;
+
+ [dir=rtl] & {
+ left: auto;
+ right: 0;
+ }
}
.switcher input:checked {
@@ -44,6 +50,15 @@ $switcher-height: 28px;
position: absolute;
transition: opacity 0.25s ease;
margin-bottom: 0;
+ left: 0;
+
+ [dir=rtl] & {
+ left: auto;
+ right: 0;
+ margin-left: 0;
+ margin-right: 70px;
+ text-align: right;
+ }
}
.switcher .toggle-outside {
@@ -55,6 +70,12 @@ $switcher-height: 28px;
width: 58px;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,.18);
+ left: 0;
+
+ [dir=rtl] & {
+ left: auto;
+ right: 0;
+ }
}
.switcher input ~ input:checked ~ .toggle-outside{
@@ -82,10 +103,17 @@ $switcher-height: 28px;
padding-top: 5px;
padding-right: 5px;
text-align: left;
+
+ [dir=rtl] & {
+ padding-left: 5px;
+ padding-right: 0;
+ float: right;
+ text-align: right;
+ }
}
-.col-md-9 .switcher__legend,
-.col-md-12 .switcher__legend {
+.col-md-9 .control-group .switcher__legend,
+.col-md-12 .control-group .switcher__legend {
margin-left: -220px;
[dir=rtl] & {