Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-05-25 19:12:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/SettingsInput: make input box fully clickable, fix radius of buttons

Browse Source 
radius & inner padding on right were 1px off >:(
This commit is contained in:
wukko 2025-05-19 20:05:35 +06:00
parent 12d6f33197
commit 46942a36b3
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/settings/SettingsInput.svelte
View File

@ -62,7 +62,7 @@
} else { } else {
validInput = new RegExp(regex[type]).test(inputValue); validInput = new RegExp(regex[type]).test(inputValue);
} }
} };
const writeToSettings = (value: string, type: SettingsInputType) => { const writeToSettings = (value: string, type: SettingsInputType) => {
// we assume that the url is valid and error can't be thrown here // we assume that the url is valid and error can't be thrown here
@ -93,11 +93,7 @@
</script> </script>
<div id="settings-input-holder"> <div id="settings-input-holder">
<div <div id="input-container" class:focused={inputFocused} aria-hidden="false">
id="input-container"
class:focused={inputFocused}
aria-hidden="false"
>
<input <input
class="input-box" class="input-box"
bind:this={input} bind:this={input}
@ -135,7 +131,9 @@
class="button input-inner-button" class="button input-inner-button"
on:click={() => (inputHidden = !inputHidden)} on:click={() => (inputHidden = !inputHidden)}
aria-label={$t( aria-label={$t(
inputHidden ? "button.show_input" : "button.hide_input" inputHidden
? "button.show_input"
: "button.hide_input"
)} )}
> >
{#if inputHidden} {#if inputHidden}
@ -156,7 +154,9 @@
<button <button
class="button input-inner-button" class="button input-inner-button"
on:click={() => { on:click={() => {
inputValue = String($settings[settingContext][settingId]); inputValue = String(
$settings[settingContext][settingId]
);
checkInput(); checkInput();
}} }}
aria-label={$t("button.restore_input")} aria-label={$t("button.restore_input")}
@ -167,11 +167,12 @@
{/if} {/if}
</div> </div>
<div id="settings-input-buttons"> <div class="input-outer-buttons">
<button <button
class="button settings-input-button" class="button settings-input-button"
aria-label={$t("button.save")} aria-label={$t("button.save")}
disabled={inputValue === $settings[settingContext][settingId] || !validInput} disabled={inputValue === $settings[settingContext][settingId] ||
!validInput}
on:click={save} on:click={save}
> >
<IconCheck /> <IconCheck />
@ -186,8 +187,6 @@
} }
#input-container { #input-container {
padding: 0 16px;
padding-right: 4px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--secondary); color: var(--secondary);
background-color: var(--button); background-color: var(--button);
@ -223,11 +222,16 @@
white-space: nowrap; white-space: nowrap;
} }
.input-box,
.input-placeholder {
padding-left: 16px;
}
#input-container.focused { #input-container.focused {
box-shadow: 0 0 0 2px var(--secondary) inset; box-shadow: 0 0 0 2px var(--secondary) inset;
} }
#settings-input-buttons { .input-outer-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 6px; gap: 6px;
@ -254,11 +258,15 @@
width: 34px; width: 34px;
padding: 0; padding: 0;
box-shadow: none; box-shadow: none;
/* 4px is padding outside of the button */ /* 3px is visual padding outside of the button */
border-radius: calc(var(--border-radius) - 4px); border-radius: calc(var(--border-radius) - 3px);
z-index: 1; z-index: 1;
} }
.input-inner-button:last-child {
margin-right: 3px;
}
.input-inner-button :global(svg) { .input-inner-button :global(svg) {
height: 18px; height: 18px;
width: 18px; width: 18px;