Skip to content

Commit e97b618

Browse files
ManeraKaiManeraKai
committed
Added translation support to Svelte
1 parent 2cb60e9 commit e97b618

File tree

19 files changed

+251
-206
lines changed

19 files changed

+251
-206
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"scripts": {
1010
"start": "web-ext run",
1111
"nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
12+
"start_ar": "web-ext run --firefox=/home/esmail/software/firefox_ar/firefox",
1213
"android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
1314
"build": "web-ext build",
1415
"test": "web-ext lint",

‎src/assets/javascripts/localise.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/pages/components/Checkbox.svelte

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script>
22
export let checked
33
export let onChange
4+
console.log(document.body.dir)
45
</script>
56

6-
<input {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
7+
<input class={document.body.dir} {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
78

89
<style>
910
input[type="checkbox"] {
@@ -40,13 +41,13 @@
4041
left: 24px;
4142
}
4243
43-
/* body.rtl div.block input[type="checkbox"]::before {
44-
left: auto;
45-
right: 4px;
46-
} */
44+
input[type="checkbox"].rtl::before {
45+
left: auto;
46+
right: 3.5px;
47+
}
4748
48-
/* body.rtl div.block input[type="checkbox"]:checked::before {
49-
left: auto;
50-
right: 24px;
51-
} */
49+
input[type="checkbox"].rtl:checked::before {
50+
left: auto;
51+
right: 24px;
52+
}
5253
</style>

‎src/pages/icons/ExportIcon.svelte

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
1+
<svg
2+
{...$$restProps}
3+
xmlns="http://www.w3.org/2000/svg"
4+
height="24px"
5+
viewBox="0 0 24 24"
6+
width="24px"
7+
fill="currentColor"
8+
>
29
<path
310
d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
411
/>

‎src/pages/icons/ImportIcon.svelte

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
2-
<path
3-
d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
4-
/>
5-
</svg>
1+
<svg
2+
{...$$restProps}
3+
xmlns="http://www.w3.org/2000/svg"
4+
height="24px"
5+
viewBox="0 0 24 24"
6+
width="24px"
7+
fill="currentColor"
8+
>
9+
<path
10+
d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
11+
/>
12+
</svg>

‎src/pages/icons/PingIcon.svelte

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
1+
<svg
2+
{...$$restProps}
3+
xmlns="http://www.w3.org/2000/svg"
4+
height="20px"
5+
viewBox="0 0 24 24"
6+
width="20px"
7+
fill="currentColor"
8+
>
29
<path
310
d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z"
411
/></svg

‎src/pages/icons/ResetIcon.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
viewBox="0 0 24 24"
66
width="24px"
77
fill="currentColor"
8+
{...$$restProps}
89
>
910
<path
1011
d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"

‎src/pages/options/init.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/pages/options_src/App.svelte

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
let browser = window.browser || window.chrome
2+
const browser = window.browser || window.chrome
33
44
import General from "./General/General.svelte"
55
import utils from "../../assets/javascripts/utils.js"
@@ -67,12 +67,15 @@
6767
cssVariables = light
6868
}
6969
}
70+
71+
const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr"
72+
document.body.dir = dir
7073
</script>
7174

7275
{#if _options && _config}
7376
<div
74-
class="main"
75-
dir="auto"
77+
class={dir}
78+
{dir}
7679
style="
7780
--text: {cssVariables.text};
7881
--bg-main: {cssVariables.bgMain};

‎src/pages/options_src/General/Exceptions.svelte

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script>
2+
const browser = window.browser || window.chrome
3+
24
import Row from "../../components/Row.svelte"
35
import Select from "../../components/Select.svelte"
46
import AddIcon from "../../icons/AddIcon.svelte"
@@ -54,10 +56,10 @@
5456
}
5557
</script>
5658

57-
<div class="block block-option">
58-
<Row>
59-
<Label>Excluded from redirecting</Label>
60-
</Row>
59+
<Row>
60+
<Label>{browser.i18n.getMessage("excludeFromRedirecting") || "Excluded from redirecting"}</Label>
61+
</Row>
62+
<div dir="ltr">
6163
<Row>
6264
<div>
6365
<Input

‎src/pages/options_src/General/General.svelte

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
let browser = window.browser || window.chrome
2+
const browser = window.browser || window.chrome
33
44
import Exceptions from "./Exceptions.svelte"
55
import SettingsButtons from "./SettingsButtons.svelte"
@@ -26,12 +26,12 @@
2626

2727
<div>
2828
<Row>
29-
<Label>Theme</Label>
29+
<Label>{browser.i18n.getMessage("theme") || "Theme"}</Label>
3030
<Select
3131
values={[
32-
{ value: "detect", name: "Auto" },
33-
{ value: "light", name: "Light" },
34-
{ value: "dark", name: "Dark" },
32+
{ value: "detect", name: browser.i18n.getMessage("auto") || "Auto" },
33+
{ value: "light", name: browser.i18n.getMessage("light") || "Light" },
34+
{ value: "dark", name: browser.i18n.getMessage("dark") || "Dark" },
3535
]}
3636
value={_options.theme}
3737
onChange={e => {
@@ -43,13 +43,13 @@
4343
</Row>
4444

4545
<Row>
46-
<Label>Fetch public instances</Label>
46+
<Label>{browser.i18n.getMessage("fetchPublicInstances") || "Fetch public instances"}</Label>
4747
<Select
4848
value={_options.fetchInstances}
4949
values={[
5050
{ value: "github", name: "GitHub" },
5151
{ value: "codeberg", name: "Codeberg" },
52-
{ value: "disable", name: "Disable" },
52+
{ value: "disable", name: browser.i18n.getMessage("disable") || "Disable" },
5353
]}
5454
onChange={e => {
5555
_options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
@@ -60,7 +60,7 @@
6060
</Row>
6161

6262
<Row>
63-
<Label>Redirect Only in Incognito</Label>
63+
<Label>{browser.i18n.getMessage("redirectOnlyInIncognito") || "Redirect Only in Incognito"}</Label>
6464
<Checkbox
6565
checked={_options.redirectOnlyInIncognito}
6666
onChange={e => {
@@ -71,7 +71,7 @@
7171
</Row>
7272

7373
<Row>
74-
<Label>Bookmarks menu</Label>
74+
<Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
7575
<Checkbox bind:checked={bookmarksPermission} />
7676
</Row>
7777

‎src/pages/options_src/General/SettingsButtons.svelte

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
let browser = window.browser || window.chrome
2+
const browser = window.browser || window.chrome
33
44
import { onDestroy } from "svelte"
55
import Button from "../../components/Button.svelte"
@@ -85,8 +85,8 @@
8585

8686
<div class="buttons">
8787
<Button on:click={() => importSettingsInput.click()} disabled={disableButtons}>
88-
<ImportIcon />
89-
<x data-localise="__MSG_importSettings__">Import Settings</x>
88+
<ImportIcon class="margin margin_{document.body.dir}" />
89+
<x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x>
9090
</Button>
9191
<input
9292
type="file"
@@ -97,22 +97,33 @@
9797
/>
9898

9999
<Button on:click={exportSettings} disabled={disableButtons}>
100-
<ExportIcon />
101-
<x data-localise="__MSG_exportSettings__">Export Settings</x>
100+
<ExportIcon class="margin margin_{document.body.dir}" />
101+
<x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x>
102102
</Button>
103103

104104
<Button on:click={exportSettingsSync} disabled={disableButtons}>
105-
<ExportIcon />
105+
<ExportIcon class="margin margin_{document.body.dir}" />
106106
<x>Export Settings to Sync</x>
107107
</Button>
108108

109109
<Button on:click={importSettingsSync} disabled={disableButtons}>
110-
<ImportIcon />
111-
<x>Import Settings from Sync</x>
110+
<ImportIcon class="margin margin_{document.body.dir}" />
111+
<x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x>
112112
</Button>
113113

114114
<Button on:click={resetSettings} disabled={disableButtons}>
115-
<ResetIcon />
116-
<x>Reset Settings</x>
115+
<ResetIcon class="margin margin_{document.body.dir}" />
116+
<x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x>
117117
</Button>
118118
</div>
119+
120+
<style>
121+
:global(.margin) {
122+
margin-right: 10px;
123+
margin-left: 0;
124+
}
125+
:global(.margin_rtl) {
126+
margin-right: 0;
127+
margin-left: 10px;
128+
}
129+
</style>

‎src/pages/options_src/Services/Instances.svelte

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
let browser = window.browser || window.chrome
2+
const browser = window.browser || window.chrome
33
44
import Button from "../../components/Button.svelte"
55
import AddIcon from "../../icons/AddIcon.svelte"
@@ -28,7 +28,6 @@
2828
let blacklist
2929
let redirects
3030
31-
$: serviceOptions = _options[selectedService]
3231
$: serviceConf = _config.services[selectedService]
3332
3433
let allInstances = []
@@ -103,18 +102,18 @@
103102

104103
{#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist}
105104
<hr />
106-
<div dir="ltr">
107-
<div class="ping">
108-
<Button on:click={pingInstances}>
109-
<PingIcon />
110-
Ping Instances
111-
</Button>
112-
</div>
113105

114-
<Row>
115-
<Label>Add your favorite instances</Label>
116-
</Row>
106+
<div class="ping">
107+
<Button on:click={pingInstances}>
108+
<PingIcon class="margin margin_{document.body.dir}" />
109+
{browser.i18n.getMessage("pingInstances") || "Ping Instances"}
110+
</Button>
111+
</div>
117112

113+
<Row>
114+
<Label>{browser.i18n.getMessage("addYourFavoriteInstances") || "Add your favorite instances"}</Label>
115+
</Row>
116+
<div dir="ltr">
118117
<Row>
119118
<Input
120119
bind:value={addInstanceValue}
@@ -231,4 +230,13 @@
231230
a:hover {
232231
text-decoration: underline;
233232
}
233+
234+
:global(.margin) {
235+
margin-right: 10px;
236+
margin-left: 0;
237+
}
238+
:global(.margin_rtl) {
239+
margin-right: 0;
240+
margin-left: 10px;
241+
}
234242
</style>

‎src/pages/options_src/Services/RedirectType.svelte

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script>
2+
const browser = window.browser || window.chrome
3+
24
import { onDestroy } from "svelte"
35
import SvelteSelect from "svelte-select"
46
import { options, config } from "../stores"
@@ -26,9 +28,9 @@
2628
let values
2729
$: if (serviceConf.frontends[frontendName].embeddable) {
2830
values = [
29-
{ value: "both", name: "Both" },
30-
{ value: "sub_frame", name: "Only Embedded" },
31-
{ value: "main_frame", name: "Only Not Embedded" },
31+
{ value: "both", name: browser.i18n.getMessage("both") || "Both" },
32+
{ value: "sub_frame", name: browser.i18n.getMessage("onlyEmbedded") || "Only Embedded" },
33+
{ value: "main_frame", name: browser.i18n.getMessage("onlyNotEmbedded") || "Only Not Embedded" },
3234
]
3335
} else if (
3436
serviceConf.frontends[frontendName].desktopApp &&
@@ -63,7 +65,7 @@
6365
</script>
6466

6567
<Row>
66-
<Label>Redirect Type</Label>
68+
<Label>{browser.i18n.getMessage("redirectType") || "Redirect Type"}</Label>
6769
<Select
6870
value={serviceOptions.redirectType}
6971
onChange={e => {
@@ -76,7 +78,7 @@
7678

7779
{#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
7880
<Row>
79-
<Label>Embed Frontend</Label>
81+
<Label>{browser.i18n.getMessage("embedFrontend") || "Embed Frontend"}</Label>
8082
<SvelteSelect
8183
clearable={false}
8284
class="svelte_select"

0 commit comments

Comments
 (0)