Made Select Frontend searchable and with icons

This commit is contained in:
ManeraKai 2024-07-25 12:37:41 +03:00
parent f6ff653cf4
commit e6a58409ff
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
5 changed files with 100 additions and 24 deletions

View File

@ -917,14 +917,15 @@
"simplyTranslate": { "simplyTranslate": {
"name": "SimplyTranslate", "name": "SimplyTranslate",
"instanceList": true, "instanceList": true,
"url": "https://git.sr.ht/~metalune/simplytranslate_web", "url": "https://codeberg.org/ManeraKai/simplytranslate",
"localhost": true "localhost": true
}, },
"mozhi": { "mozhi": {
"name": "Mozhi", "name": "Mozhi",
"instanceList": true, "instanceList": true,
"url": "https://codeberg.org/aryak/mozhi", "url": "https://codeberg.org/aryak/mozhi",
"localhost": false "localhost": false,
"imageType": "svg"
}, },
"libreTranslate": { "libreTranslate": {
"name": "LibreTranslate", "name": "LibreTranslate",

View File

@ -103,7 +103,7 @@
div { div {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: min-content 700px; grid-template-columns: min-content 800px;
margin: 0; margin: 0;
padding-top: 50px; padding-top: 50px;
justify-content: center; justify-content: center;

View File

@ -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}

View File

@ -2,7 +2,11 @@
import { onDestroy } from "svelte" import { onDestroy } from "svelte"
import RowSelect from "../components/RowSelect.svelte" import RowSelect from "../components/RowSelect.svelte"
import SvelteSelect from "svelte-select"
import { options, config } from "../stores" 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 _options
let _config let _config
@ -52,7 +56,7 @@
if (frontendConf.embeddable && frontendConf.instanceList) { if (frontendConf.embeddable && frontendConf.instanceList) {
embeddableFrontends.push({ embeddableFrontends.push({
value: frontendId, value: frontendId,
name: frontendConf.name, label: frontendConf.name,
}) })
} }
} }
@ -70,13 +74,26 @@
/> />
{#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"} {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
<RowSelect <Row>
label="Embed Frontend" <Label>Embed Frontend</Label>
value={_options.embedFrontend} <SvelteSelect
onChange={e => { clearable={false}
serviceOptions.embedFrontend = e.target.options[e.target.options.selectedIndex].value class="svelte_select"
options.set(_options) value={serviceOptions.embedFrontend}
}} on:change={e => {
values={embeddableFrontends} 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} {/if}

View File

@ -10,6 +10,7 @@
import Instances from "./Instances.svelte" import Instances from "./Instances.svelte"
import SvelteSelect from "svelte-select" import SvelteSelect from "svelte-select"
import ServiceIcon from "./ServiceIcon.svelte" import ServiceIcon from "./ServiceIcon.svelte"
import FrontendIcon from "./FrontendIcon.svelte"
let _options let _options
let _config let _config
@ -88,19 +89,31 @@
{frontendWebsite} {frontendWebsite}
</a> </a>
</Label> </Label>
<Select
<SvelteSelect
clearable={false}
class="svelte_select"
value={serviceOptions.frontend} value={serviceOptions.frontend}
values={[ on:change={e => {
...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({ serviceOptions.frontend = e.detail.value
value: frontendId,
name: frontend.name,
})),
]}
onChange={e => {
serviceOptions.frontend = e.target.options[e.target.options.selectedIndex].value
options.set(_options) options.set(_options)
}} }}
/> items={[
...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
value: frontendId,
label: frontend.name,
})),
]}
>
<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> </Row>
<RedirectType {selectedService} /> <RedirectType {selectedService} />
@ -156,7 +169,9 @@
--item-active-background: red; --item-active-background: red;
--item-is-active-bg: grey; --item-is-active-bg: grey;
--item-hover-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) { :global(.svelte_select .slot) {
display: flex; display: flex;