fix timestamps

targoninc · Jun 30, 2024 · 185a82c · 185a82c
1 parent d1a43fb
commit 185a82c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/ui/classes.css b/ui/classes.css
@@ -252,12 +252,11 @@
     color: var(--neutral);
     font-size: 0.6em !important;
     padding-left: calc(var(--message-padding-left) + 2em);
-    height: 0;
-    overflow: hidden;
-}
-
-.chat-message:hover .message-timestamp {
-    height: 1em;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: max-content;
+    transform: translateX(-50%) translateY(150%);
 }
 
 .message-note {

diff --git a/ui/components/pages/chat.mjs b/ui/components/pages/chat.mjs
@@ -156,8 +156,6 @@ export class ChatComponent {
         }
         const edited = message.createdAt !== message.updatedAt;
         const timestamp = new Date(message.createdAt).getTime();
-        const offset = new Date().getTimezoneOffset() * 60000;
-        const localTimestamp = timestamp + offset;
         const menuShown = computedSignal(menuShownForMessageId, id => id === message.id);
         const messageMenuPositionX = signal(0);
         const messageMenuPositionY = signal(0);
@@ -182,10 +180,6 @@ export class ChatComponent {
                         }),
                         CommonTemplates.profileCard(message.sender, cardShown),
                     ).build()),
-                create("span")
-                    .classes("message-timestamp", "text-small")
-                    .text(Time.ago(localTimestamp))
-                    .build(),
                 create("div")
                     .classes("message-content", "flex", "space-between", "full-width")
                     .oncontextmenu((e) => {
@@ -202,6 +196,10 @@ export class ChatComponent {
                             .classes("relative")
                             .children(
                                 ifjs(menuShown, ChatComponent.messageMenu(message, messages, messageMenuPositionX, messageMenuPositionY)),
+                                create("span")
+                                    .classes("message-timestamp", "text-small")
+                                    .text(Time.messageTimestamp(timestamp))
+                                    .build(),
                             ).build(),
                         ifjs(message.attachments.length > 0, create("div")
                             .classes("flex", "attachments", "full-width")
@@ -222,7 +220,7 @@ export class ChatComponent {
                             .children(
                                 ifjs(edited, create("span")
                                     .classes("message-note")
-                                    .text("edited " + Time.ago(new Date(message.updatedAt).getTime() + offset))
+                                    .text("edited " + Time.ago(new Date(message.updatedAt).getTime()))
                                     .build()),
                             ).build(),
                     ).build(),

diff --git a/ui/tooling/Time.mjs b/ui/tooling/Time.mjs
@@ -93,4 +93,16 @@ export class Time {
         }
         return minutes + ":" + seconds;
     }
+
+    static messageTimestamp(time) {
+        const offset = new Date().getTimezoneOffset() * 60000;
+        const localTimestamp = time - offset;
+        const date = new Date(localTimestamp);
+        const timeAgo = Time.ago(time);
+        if (timeAgo.includes("hour") || timeAgo.includes("minute") || timeAgo.includes("second")) {
+            return date.getHours() + ":" + date.getMinutes();
+        } else {
+            return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + "\n" + date.getHours() + ":" + date.getMinutes();
+        }
+    }
 }