commit d563b153e63de281edf9b37a1d50dcfccb1b7147
parent 5734b24abf6144479b43424610fb112bcbca39bf
Author: MTRNord <mtrnord1@gmail.com>
Date: Thu, 4 May 2023 20:38:00 +0200
improve message rendering
Diffstat:
3 files changed, 80 insertions(+), 35 deletions(-)
diff --git a/src/components/events/messageEvent.tsx b/src/components/events/messageEvent.tsx
@@ -14,6 +14,10 @@ type MessageEventProps = {
* The roomID of the event to display
*/
roomID?: string;
+ /**
+ * If the previous event was sent by the same user
+ */
+ hasPreviousEvent?: boolean;
};
const linkifyOptions = {
@@ -22,7 +26,7 @@ const linkifyOptions = {
target: "_blank",
}
-const MessageEvent: FC<MessageEventProps> = memo(({ event, roomID }) => {
+const MessageEvent: FC<MessageEventProps> = memo(({ event, roomID, hasPreviousEvent }) => {
const room = useRoom(roomID);
const renderCorrectMessage = (event: IRoomEvent) => {
@@ -30,15 +34,15 @@ const MessageEvent: FC<MessageEventProps> = memo(({ event, roomID }) => {
if (event.content.format === "org.matrix.custom.html") {
// TODO: Sanitize HTML
return (
- <div className="flex flex-row gap-4 p-2 hover:bg-gray-200 rounded-md duration-200 ease-in-out">
- <Avatar
+ <div className={!hasPreviousEvent ? "flex flex-row gap-4 p-2 pb-1 hover:bg-gray-200 rounded-md duration-200 ease-in-out" : "flex flex-row p-2 pt-0 hover:bg-gray-200 rounded-md duration-200 ease-in-out"}>
+ {!hasPreviousEvent && <Avatar
displayname={room?.getMemberName(event.sender) || ""}
avatarUrl={room?.getMemberAvatar(event.sender)}
online={room?.isOnline() || false}
dm={room?.isDM() || false}
- />
- <div className="flex flex-col gap-1">
- <h2 className="text-sm font-medium text-red-500 whitespace-normal">{room?.getMemberName(event.sender)}</h2>
+ />}
+ <div className={!hasPreviousEvent ? "flex flex-col gap-1" : "ml-[3.7rem]"}>
+ {!hasPreviousEvent && <h2 className="text-sm font-medium text-red-500 whitespace-normal">{room?.getMemberName(event.sender)}</h2>}
{/* TODO: Fixme */}
<p className="whitespace-normal" dangerouslySetInnerHTML={{ __html: event.content.formatted_body! }}></p>
</div>
diff --git a/src/index.scss b/src/index.scss
@@ -1,24 +1,54 @@
-body, html {
+body,
+html {
margin: 0;
height: 100%;
}
a {
@apply text-blue-500;
-}
-a:hover {
- @apply text-blue-700;
-}
+ &:hover {
+ @apply text-blue-700;
+ }
-a:active {
- @apply text-blue-700;
+ &:active {
+ @apply text-blue-700;
+ }
+
+ &:visited {
+ @apply text-blue-500;
+ }
}
-a:visited {
- @apply text-blue-500;
+pre {
+ color: #F5F7FA;
+ background-color: #1F2933;
+
+ code {
+ &::before {
+ padding-left: unset;
+ }
+
+ &::after {
+ padding-right: unset;
+ }
+ }
}
+code {
+ @apply rounded font-normal text-red-500 bg-slate-100 p-0.5;
+
+
+ &::before {
+ content: "";
+ padding-left: 0.25rem;
+ }
+
+ &::after {
+ content: "";
+ padding-right: 0.25rem;
+ }
+}
/*
Font families defined by this CSS:
@@ -37,14 +67,15 @@ Use like this in your CSS:
------------------------- static ------------------------- */
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-Thin.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 100;
font-display: swap;
src: url("font-files/Inter-ThinItalic.woff2?v=3.19") format("woff2");
@@ -52,14 +83,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLight.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 200;
font-display: swap;
src: url("font-files/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2");
@@ -67,14 +99,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-Light.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 300;
font-display: swap;
src: url("font-files/Inter-LightItalic.woff2?v=3.19") format("woff2");
@@ -82,14 +115,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Regular.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 400;
font-display: swap;
src: url("font-files/Inter-Italic.woff2?v=3.19") format("woff2");
@@ -97,14 +131,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-Medium.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 500;
font-display: swap;
src: url("font-files/Inter-MediumItalic.woff2?v=3.19") format("woff2");
@@ -112,14 +147,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBold.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 600;
font-display: swap;
src: url("font-files/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2");
@@ -127,14 +163,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-Bold.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 700;
font-display: swap;
src: url("font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2");
@@ -142,14 +179,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBold.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 800;
font-display: swap;
src: url("font-files/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2");
@@ -157,14 +195,15 @@ Use like this in your CSS:
@font-face {
font-family: 'Inter';
- font-style: normal;
+ font-style: normal;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-Black.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter';
- font-style: italic;
+ font-style: italic;
font-weight: 900;
font-display: swap;
src: url("font-files/Inter-BlackItalic.woff2?v=3.19") format("woff2");
@@ -217,6 +256,7 @@ When using this, you will likely need to set font-variation-settings explicitly,
font-display: swap;
src: url("font-files/Inter-roman.var.woff2?v=3.19") format("woff2");
}
+
@font-face {
font-family: 'Inter var alt';
font-weight: 100 900;
@@ -224,4 +264,4 @@ When using this, you will likely need to set font-variation-settings explicitly,
font-named-instance: 'Italic';
font-display: swap;
src: url("font-files/Inter-italic.var.woff2?v=3.19") format("woff2");
-}
+}
+\ No newline at end of file
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -35,7 +35,7 @@ const ChatView: FC<ChatViewProps> = memo(({ roomID }) => {
const renderEvent = (event: IRoomEvent, previousEventIsFromSameSender: boolean, previousEventType: string) => {
switch (event.type) {
case "m.room.message":
- return <MessageEvent event={event} roomID={roomID} key={event.event_id} />
+ return <MessageEvent event={event} roomID={roomID} key={event.event_id} hasPreviousEvent={previousEventIsFromSameSender && previousEventType === "m.room.message"} />
case "m.room.member":
return <MemberEvent event={event} key={event.event_id} />
case "m.room.redaction":
