71 lines
1.6 KiB
Svelte
71 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import LanguageSelection from "./LanguageSelection.svelte";
|
|
import { FrontendMessenger } from "../../background_frontend_commands";
|
|
|
|
const conn = new FrontendMessenger();
|
|
conn.runCommand("getEnabled", undefined).then((v) => (enabled = v));
|
|
|
|
const languages = conn.runCommand("getLanguages", undefined);
|
|
|
|
let enabled: boolean;
|
|
$: if (enabled !== undefined) conn.runCommand("setEnabled", enabled);
|
|
|
|
let selected: LanguagePair;
|
|
conn.runCommand("getCurrentLanguages", undefined).then((l) => (selected = l));
|
|
$: if (selected) conn.runCommand("setCurrentLanguages", selected);
|
|
</script>
|
|
|
|
<div id="container">
|
|
<label class:enabled>
|
|
<input type="checkbox" bind:checked={enabled} />
|
|
{enabled ? "Disable Extension" : "Enable Extension"}
|
|
</label>
|
|
|
|
{#if selected}
|
|
{#await languages then langs}
|
|
Translate from
|
|
<LanguageSelection {langs} bind:selectedValue={selected.srcLang} />
|
|
To
|
|
<LanguageSelection {langs} bind:selectedValue={selected.dstLang} />
|
|
{/await}
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "../color_scheme";
|
|
@use "../common";
|
|
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 600px;
|
|
width: 387px;
|
|
background-color: var(--background-color-1);
|
|
padding: 3vh 3vh;
|
|
|
|
color: var(--text-color-1);
|
|
}
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
label {
|
|
@include common.button;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
align-self: center;
|
|
width: 70%;
|
|
height: 8vh;
|
|
border-radius: 10vw;
|
|
|
|
font-weight: 500;
|
|
|
|
@include common.button_green;
|
|
&.enabled {
|
|
@include common.button_red;
|
|
}
|
|
}
|
|
</style>
|