mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/CustomInstanceInput: proper style
This commit is contained in:
wukko
parent
ebb5deb43c
commit
063f5d1806
3 changed files with 153 additions and 54 deletions
|
|
@ -111,11 +111,13 @@
|
|||
"advanced.export": "export",
|
||||
|
||||
"processing.override": "default instance override",
|
||||
"processing.override.title": "use instance-provided processing server",
|
||||
"processing.override.title": "use the instance-provided processing server",
|
||||
"processing.override.description": "if web instance provides its own default processing server, you can choose to use it over the main processing server. make sure it's a server by someone you trust.",
|
||||
|
||||
"processing.community": "community instances",
|
||||
|
||||
"processing.enable_custom.title": "use a custom processing server",
|
||||
"processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust."
|
||||
"processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damage done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
|
||||
|
||||
"processing.custom.placeholder": "custom instance domain"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,18 @@
|
|||
import settings, { updateSetting } from "$lib/state/settings";
|
||||
import { customInstanceWarning } from "$lib/api/safety-warning";
|
||||
|
||||
import IconX from "@tabler/icons-svelte/IconX.svelte";
|
||||
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
|
||||
|
||||
let inputValue = get(settings).processing.customInstanceURL;
|
||||
let inputFocused = false;
|
||||
|
||||
let url: string;
|
||||
let validUrl: boolean;
|
||||
|
||||
const checkUrl = () => {
|
||||
try {
|
||||
let test = /^https:/i.test(new URL(inputValue).protocol);
|
||||
if (test) url = new URL(inputValue).origin.toString();
|
||||
url = new URL(inputValue).origin.toString();
|
||||
validUrl = true;
|
||||
} catch {
|
||||
validUrl = false;
|
||||
|
|
@ -36,50 +39,128 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<input
|
||||
id="link-area"
|
||||
bind:value={inputValue}
|
||||
on:input={() => {
|
||||
checkUrl();
|
||||
}}
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
autocapitalize="off"
|
||||
maxlength="128"
|
||||
placeholder="instance url"
|
||||
/>
|
||||
<div id="custom-instance-holder">
|
||||
<div id="input-container" class:focused={inputFocused}>
|
||||
<input
|
||||
id="custom-instance-input"
|
||||
bind:value={inputValue}
|
||||
on:input={() => {
|
||||
checkUrl();
|
||||
inputFocused = true;
|
||||
}}
|
||||
on:input={() => (inputFocused = true)}
|
||||
on:focus={() => (inputFocused = true)}
|
||||
on:blur={() => (inputFocused = false)}
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
autocapitalize="off"
|
||||
maxlength="64"
|
||||
placeholder={$t("settings.processing.custom.placeholder")}
|
||||
/>
|
||||
</div>
|
||||
<div id="custom-instance-buttons">
|
||||
<button
|
||||
id="instance-save"
|
||||
class="custom-instance-button"
|
||||
aria-label={$t("button.save")}
|
||||
disabled={inputValue == $settings.processing.customInstanceURL ||
|
||||
!validUrl}
|
||||
on:click={async () => {
|
||||
await customInstanceWarning();
|
||||
if ($settings.processing.seenCustomWarning) {
|
||||
if (inputValue) writeInput();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconCheck />
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="instance-save"
|
||||
disabled={inputValue == $settings.processing.customInstanceURL || !validUrl}
|
||||
on:click={async () => {
|
||||
await customInstanceWarning();
|
||||
if ($settings.processing.seenCustomWarning) {
|
||||
if (inputValue) writeInput();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{$t("button.save")}
|
||||
</button>
|
||||
|
||||
{#if $settings.processing.customInstanceURL.length > 0}
|
||||
<button
|
||||
id="instance-reset"
|
||||
on:click={() => {
|
||||
updateSetting({
|
||||
processing: {
|
||||
customInstanceURL: "",
|
||||
},
|
||||
});
|
||||
inputValue = get(settings).processing.customInstanceURL;
|
||||
}}
|
||||
>
|
||||
{$t("button.reset")}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
id="instance-reset"
|
||||
class="custom-instance-button"
|
||||
aria-label={$t("button.reset")}
|
||||
disabled={$settings.processing.customInstanceURL.length <= 0}
|
||||
on:click={() => {
|
||||
updateSetting({
|
||||
processing: {
|
||||
customInstanceURL: "",
|
||||
},
|
||||
});
|
||||
inputValue = get(settings).processing.customInstanceURL;
|
||||
}}
|
||||
>
|
||||
<IconX />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#instance-save[disabled] {
|
||||
#custom-instance-holder {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#input-container {
|
||||
padding: 0 18px;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--white);
|
||||
background-color: var(--button);
|
||||
box-shadow: var(--button-box-shadow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#input-container,
|
||||
#custom-instance-input {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#custom-instance-input {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding-block: 0;
|
||||
padding-inline: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
#custom-instance-input::placeholder {
|
||||
color: var(--white);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#custom-instance-input:focus-visible {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
#input-container.focused {
|
||||
box-shadow: 0 0 0 2px var(--white) inset;
|
||||
}
|
||||
|
||||
#custom-instance-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.custom-instance-button {
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
.custom-instance-button :global(svg) {
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.custom-instance-button[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,13 +31,29 @@
|
|||
sectionId="community"
|
||||
title={$t("settings.processing.community")}
|
||||
>
|
||||
<SettingsToggle
|
||||
settingContext="processing"
|
||||
settingId="enableCustomInstances"
|
||||
title={$t("settings.processing.enable_custom.title")}
|
||||
description={$t("settings.processing.enable_custom.description")}
|
||||
/>
|
||||
{#if $settings.processing.enableCustomInstances}
|
||||
<CustomInstanceInput />
|
||||
{/if}
|
||||
<div class="category-inside-group">
|
||||
<SettingsToggle
|
||||
settingContext="processing"
|
||||
settingId="enableCustomInstances"
|
||||
title={$t("settings.processing.enable_custom.title")}
|
||||
/>
|
||||
{#if $settings.processing.enableCustomInstances}
|
||||
<CustomInstanceInput />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="subtext">
|
||||
{$t("settings.processing.enable_custom.description")}
|
||||
</div>
|
||||
</SettingsCategory>
|
||||
|
||||
<style>
|
||||
.category-inside-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
margin-top: -3px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue