BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #19203 from Scroody/chat-system-msg

Browse Source 
Client: Chat message highlight on system messages
This commit is contained in:
Ramón Souza 2024-01-24 16:28:48 -03:00 committed by GitHub
commit 03d0a6524f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx
View File

@ -144,6 +144,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
<ChatMessageTextContent
emphasizedMessage
text={intl.formatMessage(intlMessages.chatClear)}
systemMsg
/>
),
};
@ -155,6 +156,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
isSystemSender: true,
component: (
<ChatMessageTextContent
systemMsg
emphasizedMessage
text={message.message}
/>
@ -170,6 +172,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
<ChatMessageTextContent
emphasizedMessage
text={(away) ? intl.formatMessage(intlMessages.userAway) : intl.formatMessage(intlMessages.userNotAway)}
systemMsg
/>
),
};
@ -185,6 +188,7 @@ const ChatMesssage: React.FC<ChatMessageProps> = ({
<ChatMessageTextContent
emphasizedMessage={message.chatEmphasizedText}
text={message.message}
systemMsg={false}
/>
),
};

4
bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx
View File

@ -5,17 +5,19 @@ import Styled from './styles';
interface ChatMessageTextContentProps {
text: string;
emphasizedMessage: boolean;
systemMsg: boolean;
}
const ChatMessageTextContent: React.FC<ChatMessageTextContentProps> = ({
text,
emphasizedMessage,
systemMsg,
}) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - temporary, while meteor exists in the project
const { allowedElements } = Meteor.settings.public.chat;
return (
<Styled.ChatMessage emphasizedMessage={emphasizedMessage} data-test="messageContent">
<Styled.ChatMessage systemMsg={systemMsg} emphasizedMessage={emphasizedMessage} data-test="messageContent">
<ReactMarkdown
linkTarget="_blank"
allowedElements={allowedElements}

23
bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts
View File

@ -1,8 +1,18 @@
import styled from 'styled-components';
import { colorText } from '/imports/ui/stylesheets/styled-components/palette';
import {
systemMessageBackgroundColor,
systemMessageBorderColor,
systemMessageFontColor,
colorText,
} from '/imports/ui/stylesheets/styled-components/palette';
import {
borderRadius,
} from '/imports/ui/stylesheets/styled-components/general';
import { fontSizeBase, btnFontWeight } from '/imports/ui/stylesheets/styled-components/typography';
interface ChatMessageProps {
emphasizedMessage: boolean;
systemMsg?: boolean;
}
export const ChatMessage = styled.div<ChatMessageProps>`
@ -12,6 +22,17 @@ export const ChatMessage = styled.div<ChatMessageProps>`
flex-direction: column;
color: ${colorText};
word-break: break-word;
${({ systemMsg }) => systemMsg && `
background: ${systemMessageBackgroundColor};
border: 1px solid ${systemMessageBorderColor};
border-radius: ${borderRadius};
font-weight: ${btnFontWeight};
padding: ${fontSizeBase};
color: ${systemMessageFontColor};
margin-top: 0;
margin-bottom: 0;
overflow-wrap: break-word;
`}
${({ emphasizedMessage }) => emphasizedMessage && `
font-weight: bold;
`}