Added translation support to Svelte

3 files changed, 63 insertions, 46 deletions

diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
index cf88234d..df37d55d 100644
--- a/src/pages/popup_src/App.svelte
+++ b/src/pages/popup_src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import utils from "../../assets/javascripts/utils.js"
   import { onDestroy } from "svelte"
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
index 449404ba..bfa162f8 100644
--- a/src/pages/popup_src/Buttons.svelte
+++ b/src/pages/popup_src/Buttons.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Row from "./components/Row.svelte"
   import Label from "../components/Label.svelte"
@@ -39,55 +39,57 @@
   })
 </script>
 
-{#if redirect}
-  <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}>
-    <Label>Redirect</Label>
-    <RedirectIcon />
-  </Row>
-{/if}
-
-{#if switchInstance}
-  <Row
-    class="interactive"
-    on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}
-  >
-    <Label>Switch Instance</Label>
-    <SwitchInstanceIcon />
-  </Row>
-{/if}
+<div class={document.body.dir}>
+  {#if redirect}
+    <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}>
+      <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
+      <RedirectIcon />
+    </Row>
+  {/if}
 
-{#if redirectToOriginal}
-  <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
-    <Label>Copy Original</Label>
-    <CopyIcon />
-  </Row>
-  <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}>
-    <Label>Redirect To Original</Label>
-    <RedirectToOriginalIcon />
-  </Row>
-{/if}
+  {#if switchInstance}
+    <Row
+      class="interactive"
+      on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}
+    >
+      <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
+      <SwitchInstanceIcon />
+    </Row>
+  {/if}
 
-{#if redirect || switchInstance || redirectToOriginal}
-  <hr />
-{/if}
+  {#if redirectToOriginal}
+    <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
+      <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
+      <CopyIcon />
+    </Row>
+    <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}>
+      <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
+      <RedirectToOriginalIcon />
+    </Row>
+  {/if}
 
-{#if currentService}
-  <Switch serviceKey={currentService} {url} />
-  <hr />
-{/if}
+  {#if redirect || switchInstance || redirectToOriginal}
+    <hr />
+  {/if}
 
-{#each _options.popupServices as serviceKey}
-  {#if currentService !== serviceKey}
-    <Switch {serviceKey} {url} />
+  {#if currentService}
+    <Switch serviceKey={currentService} {url} />
+    <hr />
   {/if}
-{/each}
 
-<hr />
+  {#each _options.popupServices as serviceKey}
+    {#if currentService !== serviceKey}
+      <Switch {serviceKey} {url} />
+    {/if}
+  {/each}
+
+  <hr />
 
-<Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
-  <Label>Settings</Label>
-  <SettingsIcon />
-</Row>
+  <Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
+    <Label>{browser.i18n.getMessage("settings")}</Label>
+    <SettingsIcon />
+  </Row>
+</div>
 
 <style>
   :global(.interactive) {
@@ -103,8 +105,14 @@
 
   :global(img, svg) {
     margin-right: 10px;
+    margin-left: 0;
     height: 26px;
     width: 26px;
     color: var(--text);
   }
+
+  :global(.rtl img, .rtl svg) {
+    margin-right: 0;
+    margin-left: 10px;
+  }
 </style>
diff --git a/src/pages/popup_src/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte
index f420caa1..e581e5f4 100644
--- a/src/pages/popup_src/components/Switch.svelte
+++ b/src/pages/popup_src/components/Switch.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Checkbox from "../../components/Checkbox.svelte"
   import Label from "../../components/Label.svelte"
@@ -35,7 +35,7 @@
   </div>
   <div>
     <Checkbox
-      style="margin-right:5px"
+      class="margin margin_{document.body.dir}"
       label="Enable"
       checked={_options[serviceKey].enabled}
       onChange={e => {
@@ -55,4 +55,13 @@
     display: flex;
     align-items: center;
   }
+
+  :global(.margin) {
+    margin-right: 5px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 5px;
+  }
 </style>