Update omorphia, start a global settings page

This commit is contained in:
Prospector
2022-04-16 17:23:32 -07:00
parent 8935d0e56c
commit 179dcdcd04
7 changed files with 154 additions and 51 deletions

View File

@@ -0,0 +1,59 @@
<script lang="ts">
import { FormField, Slider, TextInput, Button } from "omorphia"
import TitledSection from "$components/TitledSection.svelte"
import WindowSettings from "$components/WindowSettings.svelte"
export let maxConcurrentDownloads: number = 20;
</script>
<div class="section">
<TitledSection title="Downloads">
<FormField label="Max concurrent downloads">
<Slider min=1 max=64 bind:value={maxConcurrentDownloads} />
</FormField>
</TitledSection>
<TitledSection title="Override game resolution" toggleable=true>
<WindowSettings />
</TitledSection>
<TitledSection title="Profile hooks">
<FormField label="Pre-launch">
<TextInput />
</FormField>
<FormField label="Wrapper">
<TextInput />
</FormField>
<FormField label="Post-exit">
<TextInput />
</FormField>
</TitledSection>
<TitledSection title="Java">
<FormField label="Java 8 installation">
<TextInput placeholder="/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home" />
<div class="button-group">
<Button>Auto-detect</Button>
<Button>Browse installations</Button>
<Button>Test</Button>
</div>
</FormField>
<FormField label="Java 17 installation">
<TextInput placeholder="/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home" />
<div class="button-group">
<Button>Auto-detect</Button>
<Button>Browse installations</Button>
<Button>Test</Button>
</div>
</FormField>
<FormField label="Minimum memory allocatted (in MB)">
<TextInput />
</FormField>
<FormField label="Maximum memory allocatted (in MB)">
<TextInput value="2048" />
</FormField>
<FormField label="Arguments">
<TextInput/>
</FormField>
</TitledSection>
</div>
<style lang="postcss">
</style>

View File

@@ -0,0 +1,49 @@
<script lang="ts">
import { Checkbox } from "omorphia"
export let title: string
export let toggleable: boolean = false
export let enabled: boolean = false
</script>
<div class="section">
<div class="section__title">
{#if toggleable}<Checkbox bind:checked={enabled}>{title}</Checkbox>
{:else}{title}
{/if}
</div>
<div class="section__items">
{#if !toggleable || enabled}<slot />{/if}
</div>
</div>
<style lang="postcss">
.section {
display: flex;
flex-direction: column;
padding: 1rem;
grid-gap: 1rem;
&__title {
display: flex;
grid-gap: 1rem;
align-items: center;
&::after {
flex: 1 1;
content: " ";
background-color: hsla(0, 0%, 100%, 0.2);
height: 0.2rem;
border-radius: var(--rounded-max);
}
}
&__items {
display: flex;
flex-direction: column;
grid-gap: 1rem;
padding: 0 8px;
}
}
</style>

View File

@@ -0,0 +1,15 @@
<script lang="ts">
import { FormField, TextInput } from "omorphia"
</script>
<div class="section">
<FormField label="Window width">
<TextInput />
</FormField>
<FormField label="Window height">
<TextInput />
</FormField>
</div>
<style lang="postcss">
</style>

View File

@@ -3,53 +3,18 @@
</script>
<script lang="ts">
import { FormField, TextInput, Button } from "omorphia"
import { Checkbox, FormField, TextInput, Button } from "omorphia"
import GlobalSettings from "$components/GlobalSettings.svelte"
import TitledSection from "$components/TitledSection.svelte"
export let overrideGlobalSettings = false
</script>
<div class="section">
<div class="section__title">Java</div>
<div class="section__items">
<FormField label="Installation">
<TextInput placeholder="/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home" />
</FormField>
<div class="button-group">
<Button>Auto-detect</Button>
<Button>Browse installations</Button>
<Button>Test</Button>
</div>
<FormField label="Arguments">
<TextInput/>
</FormField>
</div>
<TitledSection title="Override global settings" toggleable=true>
<GlobalSettings />
</TitledSection>
</div>
<style lang="postcss">
.section {
display: flex;
flex-direction: column;
padding: 1rem;
grid-gap: 1rem;
&__title {
display: flex;
grid-gap: 1rem;
align-items: center;
&::after {
flex: 1 1;
content: " ";
background-color: hsla(0, 0%, 100%, 0.2);
height: 0.2rem;
border-radius: var(--rounded-max);
}
}
&__items {
display: flex;
flex-direction: column;
grid-gap: 1rem;
padding: 0 8px;
}
}
</style>

View File

@@ -0,0 +1,15 @@
<script context="module" lang="ts">
</script>
<script lang="ts">
import { Checkbox, FormField, TextInput, Button } from "omorphia"
import GlobalSettings from "$components/GlobalSettings.svelte"
</script>
<div class="section">
<GlobalSettings />
</div>
<style lang="postcss">
</style>