Made Select Frontend searchable and with icons
This commit is contained in:
parent
f6ff653cf4
commit
e6a58409ff
|
@ -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",
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 { 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}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue