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

convert video-provider many-users-notify component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-03 12:58:13 +00:00
parent 7ec0697aa6
commit 0091134326
3 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/component.jsx
View File

@ -1,9 +1,8 @@
import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { notify } from '/imports/ui/services/notification';
import Button from '/imports/ui/components/button/component';
import { toast } from 'react-toastify';
import { styles } from './styles';
import Styled from './styles';
const intlMessages = defineMessages({
suggestLockTitle: {
@ -68,25 +67,23 @@ class LockViewersNotifyComponent extends Component {
notify(
(
<React.Fragment>
<p className={styles.info}>{intl.formatMessage(intlMessages.suggestLockTitle)}</p>
<div className={styles.buttonWrapper}>
<Button
<>
<Styled.Info>{intl.formatMessage(intlMessages.suggestLockTitle)}</Styled.Info>
<Styled.ButtonWrapper>
<Styled.ManyUsersButton
label={intl.formatMessage(intlMessages.enable)}
aria-label={intl.formatMessage(intlMessages.enable)}
onClick={toggleWebcamsOnlyForModerator}
className={styles.button}
/>
|
<Button
<Styled.ManyUsersButton
label={intl.formatMessage(intlMessages.cancel)}
aria-label={intl.formatMessage(intlMessages.cancel)}
onClick={() => toast.dismiss(lockToastId)}
className={styles.button}
/>
</div>
<p className={styles.info}>{intl.formatMessage(intlMessages.suggestLockReason)}</p>
</React.Fragment>
</Styled.ButtonWrapper>
<Styled.Info>{intl.formatMessage(intlMessages.suggestLockReason)}</Styled.Info>
</>
),
'info',
'rooms',

35
bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.js Normal file
View File

@ -0,0 +1,35 @@
import styled from 'styled-components';
import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
import Styled from '/imports/ui/components/breakout-room/styles';
import Button from '/imports/ui/components/button/component';
const Info = styled.p`
margin: 0;
`;
const ButtonWrapper = styled(Styled.BreakoutActions)`
background-color: inherit;
&:focus,&:hover {
background-color: inherit;
}
`;
const ManyUsersButton = styled(Button)`
flex: 0 1 48%;
color: ${colorPrimary};
margin: 0;
font-weight: inherit;
background-color: inherit;
&:focus,&:hover {
background-color: inherit;
}
`;
export default {
Info,
ButtonWrapper,
ManyUsersButton,
};

22
bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.scss
View File

@ -1,22 +0,0 @@
@import '/imports/ui/components/breakout-room/styles';
.buttonWrapper,
.button,
.joinButton {
background-color: inherit;
&:focus,&:hover {
background-color: inherit;
}
}
.buttonWrapper {
@extend .breakoutActions;
}
.button {
@extend .button;
}
.info {
margin: 0;
}