Fix MC text input styling

Ladysnake · Apr 3, 2024 · f6a27ba · f6a27ba
1 parent 4ba9dde
commit f6a27ba
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 15 deletions.
diff --git a/svelte_sprinkles/src/lib/McTextInput.svelte b/svelte_sprinkles/src/lib/McTextInput.svelte
@@ -10,9 +10,8 @@
   }>();
 
   export let id: string | undefined = undefined;
-  let className: string | undefined = undefined;
-  // noinspection ReservedWordAsName
-  export {className as class};
+  export let inputClass: string | undefined = undefined;
+  export let containerClass: string | undefined = undefined;
   export let placeholders: Record<McTextType, string> | undefined = undefined;
   export let value: McText = '';
   export let textFormat: McTextType = $dialogueTextFormat;
@@ -50,7 +49,8 @@
   }
 </script>
 <ResizingInput
-  class={className}
+  containerClass={containerClass}
+  inputClass={inputClass}
   id={id}
   placeholder={placeholder}
   value={importDialogueText(value)}

diff --git a/svelte_sprinkles/src/lib/ResizingInput.svelte b/svelte_sprinkles/src/lib/ResizingInput.svelte
@@ -6,32 +6,30 @@
   export let maxRows: number | undefined;
   export let id: string | undefined = undefined;
   export let placeholder: string | undefined = undefined;
-  let className: string | undefined = undefined;
-  // noinspection ReservedWordAsName
-  export {className as class};
+  export let containerClass: string | undefined = undefined;
+  export let inputClass: string | undefined = undefined;
   export let action: Action<HTMLTextAreaElement | HTMLInputElement> = () => {};
 
   $: minHeight = `${1 + minRows * 1.2}em`;
   $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 </script>
 
-<div class="textarea-container ${className}">
+<div class="textarea-container ${containerClass}">
   {#if maxRows === undefined || maxRows > 1}
     <div
       aria-hidden="true"
       class="textarea-mirror"
       style="min-height: {minHeight}; max-height: {maxHeight}"
     >{value + '\n'}</div>
-    <textarea id={id} placeholder={placeholder} bind:value on:change use:action></textarea>
+    <textarea id={id} class={inputClass} placeholder={placeholder} bind:value on:change use:action></textarea>
   {:else}
-    <input id={id} placeholder={placeholder} bind:value on:change use:action/>
+    <input id={id} class={inputClass} placeholder={placeholder} bind:value on:change use:action/>
   {/if}
 </div>
 
 <style>
   .textarea-container {
     position: relative;
-    overflow-x: scroll;
     width: 100%;
   }
 
@@ -45,6 +43,7 @@
   }
 
   .textarea-mirror {
+    visibility: hidden;
     white-space: pre-wrap;
   }
 

diff --git a/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte b/svelte_sprinkles/src/sprinkles/parlour/editor/state/StateTextInput.svelte
@@ -34,7 +34,4 @@
 </div>
 
 <style>
-  .not-dialogue-ending {
-    overflow-x: auto;
-  }
 </style>
diff --git a/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte b/svelte_sprinkles/src/sprinkles/parlour/editor/state/choice/DialogueStateChoices.svelte
@@ -104,7 +104,7 @@
         <td class="col-text input-cell">
           <McTextInput
             value={item.text}
-            class="table-input"
+            inputClass="table-input"
             textFormat={$dialogueTextFormat}
             placeholders={{
               [McTextType.PLAIN]: 'Thank you, ...',