attempted to make message input expand and contract on selection

nostrocket · Apr 19, 2024 · 44bc078 · 44bc078
1 parent ff17aff
commit 44bc078
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
@@ -69,7 +69,7 @@
 
 	<div class="flex-1">
 		<div class="h-screen flex-col">
-			<div class="h-5/6 flex-1 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"><slot /></div>
+			<div class="h-5/6 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"><slot /></div>
 			<div class="h-1/6"><MessageInput /></div>
 		</div>
 	</div>

diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
@@ -1,5 +1,8 @@
-<div class="flex items-center px-3 py-2 bg-zinc-300 dark:bg-cyan-900 h-full">
-	<div>
+<script lang="js">
+export let selected = true
+</script>
+<div class="flex items-center px-3 py-2 bg-zinc-300 dark:bg-cyan-900 {selected?"h-full":""}">
+	<div class="{selected?"block":"hidden"}">
 		<button
 			type="button"
 			class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
@@ -54,15 +57,15 @@
 			<span class="sr-only">Add emoji</span>
 		</button>
 	</div>
-	<textarea
+	<textarea on:blur={()=>{}} on:click={()=>{selected=true}}
 		id="chat"
 		rows="1"
 		class="resize-none block mx-4 p-2.5 w-full h-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-		placeholder="Your message..."
+		placeholder="Start typing..."
 	></textarea>
 	<button
 		type="submit"
-		class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
+		class=" {selected?"block":"hidden"} inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
 	>
 		<svg
 			class="w-5 h-5 rotate-90 rtl:-rotate-90"

diff --git a/src/lib/views/messages/Messages.svelte b/src/lib/views/messages/Messages.svelte
@@ -111,7 +111,7 @@
 <ChatLayout hideFaucet={$threadParentID != 'root'}>
 	<div slot="buttons">
 		{#if $threadParentID != 'root'}
-			<div class="mt-2"><Button onClick={pop}><ArrowTurnUpSolid /></Button></div>
+			<div class=""><Button onClick={pop}><ArrowTurnUpSolid /></Button></div>
 		{/if}
 	</div>
 	<slot>