LogalDeveloper/owncast
0
Fork 0
Code Activity

Tighten up collapsed message spacing

Browse Source
This commit is contained in:
Gabe Kangas
2022-08-21 17:22:24 -07:00
parent ffdcd8e17b
commit cd81aa56ed
2 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@@ -4,7 +4,7 @@
} }
position: relative; position: relative;
font-size: 0.9rem; font-size: 0.9rem;
padding: 5px 15px 5px 5px; padding: 0px 15px 5px 5px;
padding-left: 1rem; padding-left: 1rem;
.user { .user {
display: flex; display: flex;
@@ -80,3 +80,13 @@
display: block; display: block;
} }
} }
.messagePadding {
padding: 3.5px;
padding-bottom: 0px;
padding-top: 7px;
}
.messagePaddingCollapsed {
padding-top: 2px;
}

11
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
import { Highlight } from 'react-highlighter-ts'; import { Highlight } from 'react-highlighter-ts';
import he from 'he'; import he from 'he';
import cn from 'classnames'; import cn from 'classnames';
import { Tooltip } from 'antd';
import s from './ChatUserMessage.module.scss'; import s from './ChatUserMessage.module.scss';
import { formatTimestamp } from './messageFmt'; import { formatTimestamp } from './messageFmt';
import { ChatMessage } from '../../../interfaces/chat-message.model'; import { ChatMessage } from '../../../interfaces/chat-message.model';
@@ -32,7 +33,7 @@ export default function ChatUserMessage({
const { id: userId, displayName, displayColor } = user; const { id: userId, displayName, displayColor } = user;
const color = `var(--theme-user-colors-${displayColor})`; const color = `var(--theme-user-colors-${displayColor})`;
const formattedTimestamp = `Sent at ${formatTimestamp(timestamp)}`; const formattedTimestamp = `Sent ${formatTimestamp(timestamp)}`;
const [formattedMessage, setFormattedMessage] = useState<string>(body); const [formattedMessage, setFormattedMessage] = useState<string>(body);
const badgeStrings = [isAuthorModerator && 'mod', isAuthorAuthenticated && 'auth']; const badgeStrings = [isAuthorModerator && 'mod', isAuthorAuthenticated && 'auth'];
@@ -45,23 +46,27 @@ export default function ChatUserMessage({
}, [message]); }, [message]);
return ( return (
<div style={{ padding: 3.5 }}> <div className={cn(s.messagePadding, sameUserAsLast && s.messagePaddingCollapsed)}>
<div <div
className={cn(s.root, { className={cn(s.root, {
[s.ownMessage]: sentBySelf, [s.ownMessage]: sentBySelf,
})} })}
style={{ borderColor: color }} style={{ borderColor: color }}
title={formattedTimestamp}
> >
{!sameUserAsLast && ( {!sameUserAsLast && (
<Tooltip title="user info goes here" placement="topLeft" mouseEnterDelay={1}>
<div className={s.user} style={{ color }}> <div className={s.user} style={{ color }}>
<span className={s.userName}>{displayName}</span> <span className={s.userName}>{displayName}</span>
<span>{badges}</span> <span>{badges}</span>
</div> </div>
</Tooltip>
)} )}
<Tooltip title={formattedTimestamp} mouseEnterDelay={1}>
<Highlight search={highlightString}> <Highlight search={highlightString}>
<div className={s.message}>{formattedMessage}</div> <div className={s.message}>{formattedMessage}</div>
</Highlight> </Highlight>
</Tooltip>
{showModeratorMenu && ( {showModeratorMenu && (
<div className={s.modMenuWrapper}> <div className={s.modMenuWrapper}>
<ChatModerationActionMenu <ChatModerationActionMenu