Skip to content

Commit 758b7be

Browse files
brianteemandgrammatikoQuyTon
authored
[5.3] Installer rtl logical css (#45420)
Signed-off-by: BrianTeeman <[email protected]> Co-authored-by: Dimitris Grammatikogiannis <[email protected]> Co-authored-by: Quy Ton <[email protected]>
1 parent ba5d40a commit 758b7be

File tree

5 files changed

+34
-117
lines changed

5 files changed

+34
-117
lines changed

‎build/build-modules-js/stylesheets/handle-scss.mjs‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,21 @@ import { dirname, sep } from 'node:path';
44
import rtlcss from 'rtlcss';
55
import { ensureDir } from 'fs-extra';
66
import { transform as transformCss, Features } from 'lightningcss';
7-
import * as Sass from 'sass-embedded';
7+
import { compileAsync } from 'sass-embedded';
8+
9+
const getOutputFile = (file) => file.replace(`${sep}scss${sep}`, `${sep}css${sep}`).replace('.scss', '.css').replace(`${sep}build${sep}media_source${sep}`, `${sep}media${sep}`);
810

911
export const handleScssFile = async (file) => {
10-
const cssFile = file
11-
.replace(`${sep}scss${sep}`, `${sep}css${sep}`)
12-
.replace(`${sep}build${sep}media_source${sep}`, `${sep}media${sep}`)
13-
.replace('.scss', '.css');
12+
let contents;
13+
const cssFile = getOutputFile(file);
1414

15-
let compiled;
1615
try {
17-
compiled = Sass.compile(file);
16+
const { css } = await compileAsync(file);
17+
contents = css.toString();
1818
} catch (error) {
19-
// eslint-disable-next-line no-console
20-
console.error(error.formatted);
21-
process.exitCode = 1;
19+
throw new Error(error.formatted);
2220
}
2321

24-
let contents = transformCss({
25-
code: Buffer.from(compiled.css.toString()),
26-
minify: false,
27-
}).code;
28-
2922
if (cssFile.endsWith('-rtl.css')) {
3023
contents = rtlcss.process(contents);
3124
}
@@ -39,15 +32,15 @@ ${contents}`,
3932
{ encoding: 'utf8', mode: 0o644 },
4033
);
4134

42-
const cssMin = transformCss({
35+
const { code: cssMin } = transformCss({
4336
code: Buffer.from(contents),
4437
minify: true,
4538
exclude: Features.VendorPrefixes,
4639
});
4740

4841
// Ensure the folder exists or create it
4942
await ensureDir(dirname(cssFile.replace('.css', '.min.css')), {});
50-
await writeFile(cssFile.replace('.css', '.min.css'), `@charset "UTF-8";${cssMin.code}`, { encoding: 'utf8', mode: 0o644 });
43+
await writeFile(cssFile.replace('.css', '.min.css'), `@charset "UTF-8";${cssMin}`, { encoding: 'utf8', mode: 0o644 });
5144

5245
// eslint-disable-next-line no-console
5346
console.log(`✅ SCSS File compiled: ${cssFile}`);

‎installation/template/scss/template-rtl.scss‎

Lines changed: 1 addition & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,2 @@
1+
// This file is a placeholder for the rtl template. That means it is required and should not be deleted.
12
@import "template";
2-
3-
body {
4-
direction: rtl;
5-
}
6-
7-
// Javascript Warning
8-
#javascript-warning {
9-
font-size: 16px;
10-
text-align: center;
11-
}
12-
13-
textarea {
14-
resize: both;
15-
}
16-
17-
textarea.vert {
18-
resize: vertical;
19-
}
20-
21-
textarea.noResize {
22-
resize: none;
23-
}
24-
25-
.j-install-step {
26-
select {
27-
width: 100%;
28-
margin-right: 0 !important;
29-
}
30-
}
31-
32-
.j-install-step-header {
33-
span {
34-
margin-right: auto;
35-
margin-left: 5px;
36-
}
37-
}
38-
39-
.lang-select {
40-
left: 0;
41-
}
42-
43-
.control-group {
44-
.control-label {
45-
padding-top: 5px;
46-
padding-right: 5px;
47-
text-align: right;
48-
}
49-
}
50-
51-
.checkboxes {
52-
.checkbox input {
53-
margin-right: 0;
54-
}
55-
}
56-
57-
.form-group {
58-
text-align: right;
59-
}
60-
61-
.container-installation {
62-
text-align: right;
63-
}
64-
65-
.j-header-help {
66-
margin: 20px auto 20px 20px;
67-
}
68-
69-
.j-footer {
70-
text-align: left;
71-
}
72-
73-
.#{$jicon-css-prefix}-chevron-right::before,
74-
.#{$fa-css-prefix}-chevron-right::before {
75-
content: "";
76-
}
77-
78-
.j-install-last-step [class^="icon-"],
79-
.j-install-last-step [class*=" icon-"] {
80-
display: inline;
81-
}
82-
83-
#jform_db_prefix {
84-
text-align: right;
85-
direction: ltr;
86-
}
87-
88-
// Language Table
89-
caption {
90-
text-align: right;
91-
}

‎installation/template/scss/template.scss‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ body {
260260

261261
select {
262262
width: 100%;
263-
margin-left: 0 !important;
263+
margin-inline-start: 0 !important;
264264
}
265265
}
266266

@@ -275,7 +275,7 @@ body {
275275

276276
span {
277277
position: relative;
278-
margin-right: 5px;
278+
margin-inline-end: 5px;
279279
font-size: 1.2rem;
280280
}
281281
}
@@ -380,8 +380,8 @@ label {
380380

381381
.control-label {
382382
padding-top: 5px;
383-
padding-right: 5px;
384-
text-align: left;
383+
padding-inline-end: 5px;
384+
text-align: start;
385385
}
386386
}
387387

@@ -407,7 +407,7 @@ legend {
407407

408408
.checkbox input {
409409
position: static;
410-
margin-left: 0;
410+
margin-inline-start: 0;
411411
}
412412

413413
}
@@ -417,6 +417,13 @@ legend {
417417
margin-bottom: 0;
418418
}
419419

420+
/* rtl:begin:ignore */
421+
#jform_db_prefix {
422+
text-align: start;
423+
direction: ltr;
424+
}
425+
/* rtl:end:ignore */
426+
420427
// Possibly temporary until Bootstrap support it themselves
421428
.form-select[multiple] {
422429
height: auto;

‎installation/tmpl/remove/default.php‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99

1010
defined('_JEXEC') or die;
1111

12+
use Joomla\CMS\Factory;
1213
use Joomla\CMS\HTML\HTMLHelper;
1314
use Joomla\CMS\Language\Text;
1415
use Joomla\CMS\Uri\Uri;
1516

1617
HTMLHelper::_('behavior.formvalidator');
1718

19+
$direction = Factory::getLanguage()->isRtl() ? 'left' : 'right';
20+
1821
/** @var \Joomla\CMS\Installation\View\Remove\HtmlView $this */
1922
?>
2023
<div id="installer-view" data-page-name="remove">
@@ -27,7 +30,7 @@
2730
<h2><?php echo Text::_('INSTL_COMPLETE_TITLE'); ?></h2>
2831
<div class="mt-4 mb-3">
2932
<button id="installAddFeatures" class="btn btn-primary w-100">
30-
<?php echo Text::_('INSTL_COMPLETE_ADD_EXTRA_LANGUAGE'); ?> <span class="icon-chevron-right" aria-hidden="true"></span>
33+
<?php echo Text::_('INSTL_COMPLETE_ADD_EXTRA_LANGUAGE'); ?> <span class="icon-chevron-<?php echo $direction; ?>" aria-hidden="true"></span>
3134
</button>
3235
</div>
3336
</div>
@@ -130,7 +133,7 @@ class="form-check-input"
130133
</tbody>
131134
</table>
132135
<button id="defaultLanguagesButton" class="btn btn-primary mt-2 mb-3 w-100">
133-
<?php echo Text::_('INSTL_DEFAULTLANGUAGE_SET_DEFAULT_LANGUAGE'); ?> <span class="icon-chevron-right" aria-hidden="true"></span>
136+
<?php echo Text::_('INSTL_DEFAULTLANGUAGE_SET_DEFAULT_LANGUAGE'); ?> <span class="icon-chevron-<?php echo $direction; ?>" aria-hidden="true"></span>
134137
</button>
135138
<?php echo HTMLHelper::_('form.token'); ?>
136139
</div>

‎installation/tmpl/setup/default.php‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@
1010

1111
defined('_JEXEC') or die;
1212

13+
use Joomla\CMS\Factory;
1314
use Joomla\CMS\HTML\HTMLHelper;
1415
use Joomla\CMS\Language\Text;
1516

1617
HTMLHelper::_('behavior.formvalidator');
1718

19+
$direction = Factory::getLanguage()->isRtl() ? 'left' : 'right';
20+
1821
/** @var \Joomla\CMS\Installation\View\Setup\HtmlView $this */
1922
?>
2023

@@ -44,7 +47,7 @@
4447
<?php echo $this->form->renderField('site_name'); ?>
4548
</div>
4649
<div class="mt-4 mb-3">
47-
<button id="step1" class="btn btn-primary w-100"><?php echo Text::_('INSTL_SETUP_LOGIN_DATA'); ?> <span class="icon-chevron-right" aria-hidden="true"></span></button>
50+
<button id="step1" class="btn btn-primary w-100"><?php echo Text::_('INSTL_SETUP_LOGIN_DATA'); ?> <span class="icon-chevron-<?php echo $direction; ?>" aria-hidden="true"></span></button>
4851
</div>
4952
</div>
5053
</fieldset>
@@ -66,7 +69,7 @@
6669
<?php echo $this->form->renderField('admin_email'); ?>
6770
</div>
6871
<div class="mt-4 mb-3">
69-
<button id="step2" class="btn btn-primary w-100"><?php echo Text::_('INSTL_CONNECT_DB'); ?> <span class="icon-chevron-right" aria-hidden="true"></span></button>
72+
<button id="step2" class="btn btn-primary w-100"><?php echo Text::_('INSTL_CONNECT_DB'); ?> <span class="icon-chevron-<?php echo $direction; ?>" aria-hidden="true"></span></button>
7073
</div>
7174
</div>
7275
</fieldset>
@@ -116,7 +119,7 @@
116119
<?php echo $this->form->getInput('db_old'); ?>
117120
</div>
118121
<div class="mt-4 mb-3">
119-
<button id="setupButton" class="btn btn-primary w-100"><?php echo Text::_('INSTL_INSTALL_JOOMLA'); ?> <span class="icon-chevron-right" aria-hidden="true"></span></button>
122+
<button id="setupButton" class="btn btn-primary w-100"><?php echo Text::_('INSTL_INSTALL_JOOMLA'); ?> <span class="icon-chevron-<?php echo $direction; ?>" aria-hidden="true"></span></button>
120123
</div>
121124
</div>
122125
</fieldset>

0 commit comments

Comments
 (0)