diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/config.json | 5 | ||||
| -rw-r--r-- | src/pages/src/App.svelte | 2 | ||||
| -rw-r--r-- | src/pages/src/Services/FrontendIcon.svelte | 43 | ||||
| -rw-r--r-- | src/pages/src/Services/RedirectType.svelte | 37 | ||||
| -rw-r--r-- | src/pages/src/Services/Services.svelte | 33 |
5 files changed, 98 insertions, 22 deletions
diff --git a/src/config.json b/src/config.json index 3f58ea95..9728cdc3 100644 --- a/src/config.json +++ b/src/config.json @@ -917,14 +917,15 @@ "simplyTranslate": { "name": "SimplyTranslate", "instanceList": true, - "url": "https://git.sr.ht/~metalune/simplytranslate_web", + "url": "https://codeberg.org/ManeraKai/simplytranslate", "localhost": true }, "mozhi": { "name": "Mozhi", "instanceList": true, "url": "https://codeberg.org/aryak/mozhi", - "localhost": false + "localhost": false, + "imageType": "svg" }, "libreTranslate": { "name": "LibreTranslate", diff --git a/src/pages/src/App.svelte b/src/pages/src/App.svelte index f24b43e0..c96d72df 100644 --- a/src/pages/src/App.svelte +++ b/src/pages/src/App.svelte @@ -103,7 +103,7 @@ div { height: 100%; display: grid; - grid-template-columns: min-content 700px; + grid-template-columns: min-content 800px; margin: 0; padding-top: 50px; justify-content: center; diff --git a/src/pages/src/Services/FrontendIcon.svelte b/src/pages/src/Services/FrontendIcon.svelte new file mode 100644 index 00000000..24942fd6 --- /dev/null +++ b/src/pages/src/Services/FrontendIcon.svelte @@ -0,0 +1,43 @@ +<script> + import { onDestroy } from "svelte" + export let details + import { config, options } from "../stores" + let _options + let _config + + const unsubscribeOptions = options.subscribe(val => (_options = val)) + const unsubscribeConfig = config.subscribe(val => (_config = val)) + onDestroy(() => { + unsubscribeOptions() + unsubscribeConfig() + }) + + let theme + $: if (_options) { + if (_options.theme == "dark") { + theme = "dark" + } else if (_options.theme == "light") { + theme = "light" + } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + theme = "dark" + } else { + theme = "light" + } + } + + export let selectedService + + $: imageType = _config.services[selectedService].frontends[details.value].imageType +</script> + +{#if imageType} + {#if imageType == "svgMono"} + {#if theme == "dark"} + <img src={`/assets/images/${details.value}-icon-light.svg`} alt={details.label} /> + {:else} + <img src={`/assets/images/${details.value}-icon.svg`} alt={details.label} /> + {/if} + {:else} + <img src={`/assets/images/${details.value}-icon.${imageType}`} alt={details.label} /> + {/if} +{/if} diff --git a/src/pages/src/Services/RedirectType.svelte b/src/pages/src/Services/RedirectType.svelte index 8cddeafb..16b99083 100644 --- a/src/pages/src/Services/RedirectType.svelte +++ b/src/pages/src/Services/RedirectType.svelte @@ -2,7 +2,11 @@ import { onDestroy } from "svelte" import RowSelect from "../components/RowSelect.svelte" + import SvelteSelect from "svelte-select" import { options, config } from "../stores" + import Row from "../components/Row.svelte" + import Label from "../components/Label.svelte" + import FrontendIcon from "./FrontendIcon.svelte" let _options let _config @@ -52,7 +56,7 @@ if (frontendConf.embeddable && frontendConf.instanceList) { embeddableFrontends.push({ value: frontendId, - name: frontendConf.name, + label: frontendConf.name, }) } } @@ -70,13 +74,26 @@ /> {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"} - <RowSelect - label="Embed Frontend" - value={_options.embedFrontend} - onChange={e => { - serviceOptions.embedFrontend = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - values={embeddableFrontends} - /> + <Row> + <Label>Embed Frontend</Label> + <SvelteSelect + clearable={false} + class="svelte_select" + value={serviceOptions.embedFrontend} + on:change={e => { + serviceOptions.embedFrontend = e.detail.value + options.set(_options) + }} + items={embeddableFrontends} + > + <div class="slot" slot="item" let:item> + <FrontendIcon details={item} {selectedService} /> + {item.label} + </div> + <div class="slot" slot="selection" let:selection> + <FrontendIcon details={selection} {selectedService} /> + {selection.label} + </div> + </SvelteSelect> + </Row> {/if} diff --git a/src/pages/src/Services/Services.svelte b/src/pages/src/Services/Services.svelte index 7ce12ac6..22a82195 100644 --- a/src/pages/src/Services/Services.svelte +++ b/src/pages/src/Services/Services.svelte @@ -10,6 +10,7 @@ import Instances from "./Instances.svelte" import SvelteSelect from "svelte-select" import ServiceIcon from "./ServiceIcon.svelte" + import FrontendIcon from "./FrontendIcon.svelte" let _options let _config @@ -88,19 +89,31 @@ {frontendWebsite} </a> </Label> - <Select + + <SvelteSelect + clearable={false} + class="svelte_select" value={serviceOptions.frontend} - values={[ + on:change={e => { + serviceOptions.frontend = e.detail.value + options.set(_options) + }} + items={[ ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ value: frontendId, - name: frontend.name, + label: frontend.name, })), ]} - onChange={e => { - serviceOptions.frontend = e.target.options[e.target.options.selectedIndex].value - options.set(_options) - }} - /> + > + <div class="slot" slot="item" let:item> + <FrontendIcon details={item} {selectedService} /> + {item.label} + </div> + <div class="slot" slot="selection" let:selection> + <FrontendIcon details={selection} {selectedService} /> + {selection.label} + </div> + </SvelteSelect> </Row> <RedirectType {selectedService} /> @@ -156,7 +169,9 @@ --item-active-background: red; --item-is-active-bg: grey; --item-hover-bg: grey; - --item-color: var(--text); /*text color*/ + --item-is-active-color: var(--text); + --padding: 0 0 0 10px; + --item-color: var(--text); } :global(.svelte_select .slot) { display: flex; |