diff --git a/src/components/TextInput.svelte b/src/components/TextInput.svelte index a6f1fef3e..f654e22a4 100644 --- a/src/components/TextInput.svelte +++ b/src/components/TextInput.svelte @@ -17,7 +17,6 @@ export let disabled: boolean = false; export let loading: boolean = false; export let valid: boolean = true; - export let validationMessage: string | undefined = undefined; export let showKeyHint: boolean = true; const dispatch = createEventDispatcher<{ @@ -27,7 +26,6 @@ }>(); let rightContainerWidth: number; - let leftContainerWidth: number; let inputElement: HTMLInputElement | undefined = undefined; let isFocused = false; let success = false; @@ -116,18 +114,6 @@ input[disabled] { cursor: not-allowed; } - .left-container { - color: var(--color-fill-secondary); - position: absolute; - left: 0; - top: 0; - display: flex; - align-items: center; - padding-right: 0.5rem; - padding-left: 0.5rem; - gap: 0.5rem; - height: 100%; - } .right-container { border: 1px solid transparent; color: var(--color-fill-gray); @@ -140,16 +126,6 @@ overflow: hidden; height: 100%; } - .validation-message { - color: var(--color-foreground-red); - position: relative; - margin-top: 0.5rem; - } - .validation-wrapper { - position: absolute; - width: 100%; - height: 100%; - } .invalid { border: 1px solid var(--color-border-error); } @@ -184,61 +160,38 @@ class="wrapper" class:small={size === "small"} class:regular={size === "regular"}> -
- {#if $$slots.left} -
- -
+ + +
+ {#if loading} + {/if} - - -
- {#if loading} - + {#if valid && !loading && isFocused && showKeyHint} + {#if success} + + {:else} + ⏎ {/if} - - {#if valid && !loading && isFocused && showKeyHint} - {#if success} - - {:else} - ⏎ - {/if} - {/if} - - {#if $$slots.right} - - {/if} -
- - {#if !valid && validationMessage} -
-
- {validationMessage} -
-
{/if}
diff --git a/src/views/projects/Cob/AssigneeInput.svelte b/src/views/projects/Cob/AssigneeInput.svelte index af9c35a36..ca74339e7 100644 --- a/src/views/projects/Cob/AssigneeInput.svelte +++ b/src/views/projects/Cob/AssigneeInput.svelte @@ -79,6 +79,14 @@ width: 100%; gap: 0.25rem; } + .validation-message { + display: flex; + align-items: center; + gap: 0.25rem; + color: var(--color-foreground-red); + position: relative; + margin-top: 0.5rem; + }
@@ -108,7 +116,6 @@
+ {#if !valid && validationMessage} +
+ {validationMessage} +
+ {/if} {:else}
@@ -93,9 +101,7 @@ @@ -111,6 +117,11 @@
+ {#if !valid && validationMessage} +
+ {validationMessage} +
+ {/if} {:else}