gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: multiline message box
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
this implementation SUCKS and i probably have to write an entirely custom solution where every line is a div or something
This commit is contained in:
Twig 2025-07-09 03:36:30 +02:00
parent 51c2578e60
commit f1bec945fe
No known key found for this signature in database
1 changed files with 39 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

64
components/MessageArea.vue
View file

@ -14,9 +14,11 @@
<Icon name="lucide:file-plus-2" /> <Icon name="lucide:file-plus-2" />
</span> </span>
</div> </div>
<textarea v-model="messageInput" id="message-box-input" ref="messageInputField"
<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text" class="rounded-corners" type="text" name="message-input"
name="message-input" autocomplete="off"> autocomplete="off" contenteditable="true" spellcheck="true"
@keydown="handleMessageKeyDown">
</textarea>
<div id="message-box-right-elements"> <div id="message-box-right-elements">
<button class="message-box-button" type="submit"> <button class="message-box-button" type="submit">
@ -118,11 +120,19 @@ function pushMessage(message: MessageResponse) {
messages.value.push(message); messages.value.push(message);
} }
function handleMessageKeyDown(event: KeyboardEvent) {
if (event.key === "Enter" && event.shiftKey) {
event.preventDefault();
messageInput.value += "\n"
} else if (event.key === "Enter") {
// <send message>
}
}
const messages = ref<MessageResponse[]>([]); const messages = ref<MessageResponse[]>([]);
const messageInput = ref<string>(); const messageInput = ref<string>();
const messagesElement = ref<HTMLDivElement>(); const messagesElement = ref<HTMLDivElement>();
const messageInputField = ref<HTMLTextAreaElement>();
if (messagesRes) messages.value = messagesRes; if (messagesRes) messages.value = messagesRes;
@ -253,8 +263,8 @@ router.beforeEach((to, from, next) => {
<style scoped> <style scoped>
#message-area { #message-area {
display: grid; display: flex;
grid-template-rows: 8fr 1fr; flex-direction: column;
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
overflow: hidden; overflow: hidden;
@ -264,35 +274,39 @@ router.beforeEach((to, from, next) => {
margin-bottom: 2dvh; margin-bottom: 2dvh;
margin-left: 1dvw; margin-left: 1dvw;
margin-right: 1dvw; margin-right: 1dvw;
}
#message-form {
display: flex;
flex-direction: row;
border: 1px solid var(--padding-color);
height: 100%;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
min-height: 5em;
max-height: 50%;
flex-grow: 1;
min-height: 100%; border: 1px solid var(--padding-color);
justify-content: center;
background-color: var(--chatbox-background-color); background-color: var(--chatbox-background-color);
} }
#message-box-input { #message-form {
height: 100%; height: 100%;
width: 100%;
margin-left: 1.5%; display: flex;
margin-right: 1.5%; flex-direction: row;
gap: .5em;
}
#message-box-input {
flex-grow: 1;
color: inherit;
font: inherit;
border: none;
background-color: #40404000; /* completely transparent colour */
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
vertical-align: top;
overflow: auto;
border: none; resize: none;
color: inherit;
background-color: #00000000; /* completely transparent colour */
} }
#message-box-left-elements, #message-box-right-elements { #message-box-left-elements, #message-box-right-elements {