Skip to content

Commit

Permalink
Translation so far ... (#5163)
Browse files Browse the repository at this point in the history
  • Loading branch information
julianjelfs authored Jan 11, 2024
1 parent 9ce72c9 commit 21a2b32
Show file tree
Hide file tree
Showing 87 changed files with 1,789 additions and 375 deletions.
27 changes: 20 additions & 7 deletions frontend/app/src/components/AreYouSure.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
import { _ } from "svelte-i18n";
import Input from "./Input.svelte";
import Markdown from "./home/Markdown.svelte";
import { i18nKey, type ResourceKey } from "../i18n/i18n";
import Translatable from "./Translatable.svelte";
export let message: string | undefined = undefined;
export let action: (yes: boolean) => Promise<void>;
export let doubleCheck: { challenge: string; response: string } | undefined = undefined;
export let title: string | undefined = undefined;
export let yesLabel: string | undefined = undefined;
export let noLabel: string | undefined = undefined;
export let title: ResourceKey | undefined = i18nKey("areYouSure");
export let yesLabel: ResourceKey | undefined = i18nKey("yesPlease");
export let noLabel: ResourceKey | undefined = i18nKey("noThanks");
let inProgress = false;
let response = "";
Expand All @@ -32,7 +34,11 @@

<Overlay>
<ModalContent hideBody={message === undefined}>
<span slot="header">{title ?? $_("areYouSure")}</span>
<span slot="header">
{#if title !== undefined}
<Translatable resourceKey={title} />
{/if}
</span>
<span slot="body">
{#if message !== undefined}
<Markdown inline={false} text={message} />
Expand All @@ -54,13 +60,20 @@
</span>
<span slot="footer">
<ButtonGroup>
<Button disabled={inProgress} small on:click={() => onClick(false)} secondary
>{noLabel ?? $_("noThanks")}</Button>
<Button disabled={inProgress} small on:click={() => onClick(false)} secondary>
{#if noLabel !== undefined}
<Translatable resourceKey={noLabel} />
{/if}
</Button>
<Button
loading={inProgress}
disabled={!canConfirm}
small
on:click={() => onClick(true)}>{yesLabel ?? $_("yesPlease")}</Button>
on:click={() => onClick(true)}>
{#if yesLabel !== undefined}
<Translatable resourceKey={yesLabel} />
{/if}
</Button>
</ButtonGroup>
</span>
</ModalContent>
Expand Down
8 changes: 6 additions & 2 deletions frontend/app/src/components/Checkbox.svelte
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<script lang="ts">
import type { ResourceKey } from "../i18n/i18n";
import { rtlStore } from "../stores/rtl";
import Translatable from "./Translatable.svelte";
export let checked: boolean = false;
export let disabled: boolean = false;
export let waiting: boolean = false;
export let id: string;
export let label: string | undefined;
export let label: ResourceKey | undefined;
export let toggle: boolean = false;
export let small: boolean = false; // only applies to toggles
export let align: "center" | "start" = "center";
Expand All @@ -20,7 +22,9 @@
<input {id} type="checkbox" bind:checked {disabled} on:change />
<label class:small for={id}>
<slot>
{label}
{#if label !== undefined}
<Translatable resourceKey={label} />
{/if}
</slot>
</label>
</div>
Expand Down
10 changes: 8 additions & 2 deletions frontend/app/src/components/CollapsibleCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
import { createEventDispatcher } from "svelte";
import Arrow from "./Arrow.svelte";
import type { ResourceKey } from "../i18n/i18n";
import Translatable from "./Translatable.svelte";
const dispatch = createEventDispatcher();
export let headerText: string = "";
export let headerText: ResourceKey | undefined = undefined;
export let open = true;
export let first = false;
export let transition = true;
Expand All @@ -23,7 +25,11 @@
<div class="card" class:first class:open>
<div class="header" class:open on:click={toggle} class:fill>
<slot name="titleSlot">
<div>{headerText}</div>
{#if headerText !== undefined}
<div>
<Translatable resourceKey={headerText} />
</div>
{/if}
</slot>

<div class="arrow" class:rtl={$rtlStore}>
Expand Down
95 changes: 95 additions & 0 deletions frontend/app/src/components/EditLabel.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<script lang="ts">
import { locale, _ } from "svelte-i18n";
import { editingLabel, i18nKey, supportedLanguages } from "../i18n/i18n";
import Button from "./Button.svelte";
import ButtonGroup from "./ButtonGroup.svelte";
import ModalContent from "./ModalContent.svelte";
import Overlay from "./Overlay.svelte";
import Legend from "./Legend.svelte";
import TextArea from "./TextArea.svelte";
import { getContext } from "svelte";
import { OpenChat } from "openchat-client";
const client = getContext<OpenChat>("client");
let busy = false;
let suggestion = "";
$: yourLanguage = supportedLanguages.find((l) => l.code === $locale)?.name ?? "English";
$: corrections = client.translationCorrectionsStore;
$: userStore = client.userStore;
$: console.log("Corrections: ", $corrections);
$: existingCorrection =
$locale && $editingLabel && $corrections[$locale]
? $corrections[$locale][$editingLabel.key]
: undefined;
$: correctedBy =
existingCorrection !== undefined ? $userStore[existingCorrection?.proposedBy].username : "";
function close() {
editingLabel.set(undefined);
}
function save() {
if ($locale && $editingLabel) {
busy = true;
client
.setTranslationCorrection($locale, $editingLabel.key, suggestion)
.then(() => {
editingLabel.set(undefined);
})
.finally(() => (busy = false));
}
}
</script>

{#if $editingLabel !== undefined}
<Overlay dismissible on:close={close}>
<ModalContent on:close>
<div class="header" slot="header">Suggest a translation correction</div>
<div slot="body">
<p>
The language you wish to submit a correction for is <span class="value"
>{yourLanguage}</span>
</p>
<p>
The English value is <span class="value"
>{$_($editingLabel.key, { locale: "en" })}</span>
</p>
<p>The current translation is <span class="value">{$_($editingLabel.key)}</span></p>
{#if existingCorrection !== undefined}
<p>
The current translation was provided by <span class="value"
>{correctedBy}</span>
</p>
{/if}
<Legend label={i18nKey("Your proposed translation is")}></Legend>
<TextArea
minlength={1}
maxlength={1000}
disabled={busy}
bind:value={suggestion}
placeholder={"Enter your suggestion"} />
</div>
<div slot="footer">
<ButtonGroup>
<Button secondary on:click={close}>{"Cancel"}</Button>
<Button on:click={save}>{"Save"}</Button>
</ButtonGroup>
</div>
</ModalContent>
</Overlay>
{/if}

<style lang="scss">
p {
margin-bottom: $sp3;
}
.value {
color: var(--accent);
font-weight: 500;
}
</style>
11 changes: 7 additions & 4 deletions frontend/app/src/components/Legend.svelte
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<script lang="ts">
export let label: string;
export let rules: string | undefined = undefined;
import type { ResourceKey } from "../i18n/i18n";
import Translatable from "./Translatable.svelte";
export let label: ResourceKey;
export let rules: ResourceKey | undefined = undefined;
export let required = false;
</script>

<div class="legend">
<span class="label">{label}</span>
<span class="label"><Translatable resourceKey={label} /></span>
{#if rules}
<span class="rules">({rules})</span>
<span class="rules">(<Translatable resourceKey={rules} />)</span>
{/if}
{#if required}
<span class="required">*</span>
Expand Down
6 changes: 4 additions & 2 deletions frontend/app/src/components/ProgressStep.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
import DoneIcon from "svelte-material-icons/CheckCircle.svelte";
import FailedIcon from "svelte-material-icons/CloseCircle.svelte";
import { currentTheme } from "../theme/themes";
import type { ResourceKey } from "../i18n/i18n";
import Translatable from "./Translatable.svelte";
export let label: string;
export let label: ResourceKey;
export let status: string;
export let step = 0;
</script>
Expand Down Expand Up @@ -33,7 +35,7 @@
</div>
{/if}
<div class={`label ${status}`}>
{label}
<Translatable resourceKey={label} />
</div>
</div>

Expand Down
5 changes: 3 additions & 2 deletions frontend/app/src/components/ProgressSteps.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import Progress from "./Progress.svelte";
import ProgressStep from "./ProgressStep.svelte";
import type { InterpolationValues } from "openchat-client";
import { i18nKey } from "../i18n/i18n";
export let stepLabels: string[];
export let labelValues: InterpolationValues | undefined = undefined;
Expand Down Expand Up @@ -64,12 +65,12 @@
<div>
{#each toShow as status, i (stepLabels[i])}
<div in:fade={{ duration: 500 }} animate:flip={{ duration: 500 }}>
<ProgressStep label={$_(stepLabels[i], { values: labelValues })} step={i} {status} />
<ProgressStep label={i18nKey(stepLabels[i], labelValues)} step={i} {status} />
</div>
{/each}
{#if finalStatus !== undefined && finalLabel !== undefined}
<div>
<ProgressStep label={$_(finalLabel, { values: labelValues })} status={finalStatus} />
<ProgressStep label={i18nKey(finalLabel, labelValues)} status={finalStatus} />
</div>
{/if}
</div>
Expand Down
9 changes: 7 additions & 2 deletions frontend/app/src/components/Radio.svelte
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<script lang="ts">
import type { ResourceKey } from "../i18n/i18n";
import Translatable from "./Translatable.svelte";
export let group: string = "radio-group";
export let value: string = "radio-value";
export let checked: boolean = false;
export let id: string;
export let label: string = "radio-label";
export let label: ResourceKey | undefined = undefined;
export let align: "center" | "start" = "center";
export let disabled: boolean = false;
export let compact: boolean = false;
Expand All @@ -13,7 +16,9 @@
<input {disabled} {id} type="radio" name={group} {checked} {value} on:change />
<label class:disabled for={id}>
<slot>
{label}
{#if label}
<Translatable resourceKey={label} />
{/if}
</slot>
</label>
</div>
Expand Down
Loading

0 comments on commit 21a2b32

Please sign in to comment.