mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 13:35:57 +03:00
Styled chat messages
This commit is contained in:
parent
b6dd441107
commit
d692a2bb5c
5 changed files with 26 additions and 6 deletions
|
@ -5,8 +5,8 @@ import { LoadingOutlined } from '@ant-design/icons';
|
||||||
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
||||||
import { ChatState } from '../../../interfaces/application-state';
|
import { ChatState } from '../../../interfaces/application-state';
|
||||||
import { MessageType } from '../../../interfaces/socket-events';
|
import { MessageType } from '../../../interfaces/socket-events';
|
||||||
import ChatUserMessage from '../ChatUserMessage';
|
|
||||||
import s from './ChatContainer.module.scss';
|
import s from './ChatContainer.module.scss';
|
||||||
|
import { ChatUserMessage } from '..';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
messages: ChatMessage[];
|
messages: ChatMessage[];
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
|
||||||
|
.root {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 5px;
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin: 8px 5px;
|
||||||
|
border-left: 2px solid;
|
||||||
|
.user {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-owncast-grey-100);
|
||||||
|
}
|
||||||
|
.message {
|
||||||
|
color: var(--color-owncast-grey-100);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
||||||
|
import s from './ChatUserMessage.module.scss';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
message: ChatMessage;
|
message: ChatMessage;
|
||||||
|
@ -12,12 +13,14 @@ export default function ChatUserMessage(props: Props) {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const { displayName, displayColor } = user;
|
const { displayName, displayColor } = user;
|
||||||
|
|
||||||
// TODO: Convert displayColor (a hue) to a usable color.
|
const color = `hsl(${displayColor}, 100%, 70%)`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={s.root} style={{ borderColor: color }}>
|
||||||
<div>{displayName}</div>
|
<div className={s.user} style={{ color }}>
|
||||||
<div>{body}</div>
|
{displayName}
|
||||||
|
</div>
|
||||||
|
<div className={s.message}>{body}</div>
|
||||||
{showModeratorMenu && <div>Moderator menu</div>}
|
{showModeratorMenu && <div>Moderator menu</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
1
web/components/chat/ChatUserMessage/index.ts
Normal file
1
web/components/chat/ChatUserMessage/index.ts
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export { default } from './ChatUserMessage';
|
|
@ -1,2 +1,3 @@
|
||||||
export { default as ChatContainer } from './ChatContainer';
|
export { default as ChatContainer } from './ChatContainer';
|
||||||
|
export { default as ChatUserMessage } from './ChatUserMessage';
|
||||||
export { default as ChatTextField } from './ChatTextField/ChatTextField';
|
export { default as ChatTextField } from './ChatTextField/ChatTextField';
|
||||||
|
|
Loading…
Reference in a new issue