From fb38edcd8117ec5fff420f00795e88e9a12d1fc5 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 15:22:41 +0200 Subject: [PATCH 1/7] feat: add rounded-corners global class --- app.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app.vue b/app.vue index 47873f0..717f0fd 100644 --- a/app.vue +++ b/app.vue @@ -1,11 +1,14 @@ From 786b4e092502bd736f9f575df544d91b2519ecc2 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 15:23:10 +0200 Subject: [PATCH 2/7] feat: add rounded corners to message box and input --- components/MessageArea.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 3389475..cc76cdc 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -4,9 +4,9 @@ -
+
- + @@ -54,7 +54,7 @@ if (accessToken && apiBase) { ["Authorization", accessToken] ); if (ws) break; - await sleep(10000); + await sleep(5000); } while (!ws); ws.addEventListener("open", (event) => { @@ -72,6 +72,9 @@ ws.addEventListener("message", async (event) => { scrollToBottom(messagesElement); } }); + + + } else { await refresh(); } From c3b72b3be624e50c396eb8312ec65f128cd1424c Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 15:31:36 +0200 Subject: [PATCH 3/7] feat: make send button and message input box slightly bigger --- components/MessageArea.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index cc76cdc..63b2158 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -126,7 +126,6 @@ onMounted(async () => { #message-form { display: flex; justify-content: center; - height: 60%; } #message-box-input { @@ -145,11 +144,12 @@ onMounted(async () => { #submit-button { background-color: inherit; border: none; - color: white; + color: rgb(200, 200, 200); + font-size: 1.5em; } #submit-button:hover { - background-color: rgb(40, 40, 40); + color: rgb(255, 255, 255); } \ No newline at end of file From b1457dc31fa5272608e8c5edcd656c667fde3500 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 16:33:29 +0200 Subject: [PATCH 4/7] fix: message times not displaying correctly --- components/Message.vue | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/components/Message.vue b/components/Message.vue index 70115c5..e37d1e4 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -31,20 +31,23 @@ const messageDate = ref(); const showHover = ref(false); const date = new Date(props.timestamp); -const now = new Date() -if (now.getUTCHours() >= 0) { - let dateHour = date.getUTCHours(); - let dateMinute = date.getUTCMinutes(); - if (props.format == "12") { - if (dateHour > 12) { - dateHour = dateHour - 12; - } - messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}` +console.log("message:", props.text); +let dateHour = date.getHours(); +let dateMinute = date.getMinutes(); +if (props.format == "12") { + if (dateHour > 12) { + dateHour = dateHour - 12; + messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM` } else { - messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}` + if (dateHour == 0) { + dateHour = 12; + } + messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}` + } +} else { + messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}` } -} //function toggleTooltip(e: Event) { // showHover.value = !showHover.value; From c8598b39e65fcf6aeb73ca2366148a7f52027601 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 16:35:14 +0200 Subject: [PATCH 5/7] feat: change color of message text input to inherit --- components/MessageArea.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 63b2158..56d2866 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -132,6 +132,7 @@ onMounted(async () => { width: 80%; background-color: rgb(50, 50, 50); border: none; + color: inherit; } #messages { From 1d0fde3e36345da252a86627e6811187e26e400f Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 16:35:34 +0200 Subject: [PATCH 6/7] feat: add padding on the sides of the message text input --- components/MessageArea.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 56d2866..59d3852 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -133,6 +133,8 @@ onMounted(async () => { background-color: rgb(50, 50, 50); border: none; color: inherit; + padding-left: 1dvw; + padding-right: 1dvw; } #messages { From c10e0837718529aee3e662390596be3db73d85fe Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 29 May 2025 16:38:19 +0200 Subject: [PATCH 7/7] feat: have messages array always reverse --- components/MessageArea.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 59d3852..a1be77d 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -19,20 +19,18 @@ import type { MessageResponse } from '~/types/interfaces'; import scrollToBottom from '~/utils/scrollToBottom'; -const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>(); +const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>(); const messagesRes: MessageResponse[] | undefined = await fetchWithApi( `${props.channelUrl}/messages`, { query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } } ); -if (messagesRes && props.reverse) { +if (messagesRes) { messagesRes.reverse(); } const messages = ref([]); -const route = useRoute(); - const messageInput = ref(); const messagesElement = ref();