Made Select Frontend searchable and with icons
This commit is contained in:
ManeraKai
parent
f6ff653cf4
commit
e6a58409ff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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={[
|
||||
...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
|
||||
value: frontendId,
|
||||
name: frontend.name,
|
||||
})),
|
||||
]}
|
||||
onChange={e => {
|
||||
serviceOptions.frontend = e.target.options[e.target.options.selectedIndex].value
|
||||
on:change={e => {
|
||||
serviceOptions.frontend = e.detail.value
|
||||
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>
|
||||
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue