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

convert chat alert component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-02 11:32:07 +00:00
parent 45f5e7ac3a
commit 6148921f13
2 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bigbluebutton-html5/imports/ui/components/chat/alert/component.jsx
View File

@ -6,7 +6,7 @@ import _ from 'lodash';
import AudioService from '/imports/ui/components/audio/service'; import AudioService from '/imports/ui/components/audio/service';
import ChatPushAlert from './push-alert/component'; import ChatPushAlert from './push-alert/component';
import Service from '../service'; import Service from '../service';
import { styles } from '../styles'; import Styled from './styles';
const CHAT_CONFIG = Meteor.settings.public.chat; const CHAT_CONFIG = Meteor.settings.public.chat;
const PUBLIC_CHAT_CLEAR = CHAT_CONFIG.chat_clear; const PUBLIC_CHAT_CLEAR = CHAT_CONFIG.chat_clear;
@ -148,15 +148,15 @@ const ChatAlert = (props) => {
}; };
const createMessage = (name, message) => ( const createMessage = (name, message) => (
<div className={styles.pushMessageContent}> <Styled.PushMessageContent>
<h3 className={styles.userNameMessage}>{name}</h3> <Styled.UserNameMessage>{name}</Styled.UserNameMessage>
<div className={styles.contentMessage}> <Styled.ContentMessage>
{ {
mapContentText(message) mapContentText(message)
.reduce((acc, text) => [...acc, (<br key={_.uniqueId('br_')} />), text], []) .reduce((acc, text) => [...acc, (<br key={_.uniqueId('br_')} />), text], [])
} }
</div> </Styled.ContentMessage>
</div> </Styled.PushMessageContent>
); );
return pushAlertEnabled return pushAlertEnabled

45
bigbluebutton-html5/imports/ui/components/chat/alert/styles.js Normal file
View File

@ -0,0 +1,45 @@
import styled from 'styled-components';
import { colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette';
import { borderRadius } from '/imports/ui/stylesheets/styled-components/general';
import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
const PushMessageContent = styled.div`
margin-top: 1.4rem;
margin-bottom: .4rem;
margin-left: .4rem;
margin-right: .4rem;
background-color: inherit;
width: 98%;
`;
const UserNameMessage = styled.h3`
margin: 0;
font-size: 80%;
color: ${colorGrayDark};
font-weight: bold;
background-color: inherit;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em;
max-height: 1em;
`;
const ContentMessage = styled.div`
margin-top: ${borderRadius};
font-size: 80%;
background-color: inherit;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: ${fontSizeSmall};
max-height: calc(${fontSizeSmall} * 10);
`;
export default {
PushMessageContent,
UserNameMessage,
ContentMessage,
};