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

convert guest-policy component

Browse Source
This commit is contained in:
Ramón Souza 2021-11-03 12:12:32 +00:00
parent 88c774fa7c
commit 7ec0697aa6
3 changed files with 92 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/component.jsx
View File

@ -1,9 +1,7 @@
import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import Modal from '/imports/ui/components/modal/simple/component';
import Button from '/imports/ui/components/button/component';
import { styles } from './styles';
import Styled from './styles';
const ASK_MODERATOR = 'ASK_MODERATOR';
const ALWAYS_ACCEPT = 'ALWAYS_ACCEPT';
@ -65,30 +63,26 @@ class GuestPolicyComponent extends PureComponent {
} = this.props;
return (
<Modal
overlayClassName={styles.overlay}
className={styles.modal}
<Styled.GuestPolicyModal
onRequestClose={closeModal}
hideBorder
contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
>
<div
className={styles.container}
<Styled.Container
data-test="guestPolicySettingsModal"
>
<div className={styles.header}>
<h2 className={styles.title}>
<Styled.Header>
<Styled.Title>
{intl.formatMessage(intlMessages.guestPolicyTitle)}
</h2>
</div>
<div className={styles.description}>
</Styled.Title>
</Styled.Header>
<Styled.Description>
{intl.formatMessage(intlMessages.guestPolicyDescription)}
</div>
</Styled.Description>
<div className={styles.content}>
<Button
<Styled.Content>
<Styled.GuestPolicyButton
color="primary"
className={[styles.button, guestPolicy === ASK_MODERATOR && styles.active].join(' ')}
disabled={guestPolicy === ASK_MODERATOR}
label={intl.formatMessage(intlMessages.askModerator)}
aria-describedby={guestPolicy === ASK_MODERATOR ? 'selected-btn-desc' : 'policy-btn-desc'}
@ -99,9 +93,8 @@ class GuestPolicyComponent extends PureComponent {
closeModal();
}}
/>
<Button
<Styled.GuestPolicyButton
color="primary"
className={[styles.button, guestPolicy === ALWAYS_ACCEPT && styles.active].join(' ')}
disabled={guestPolicy === ALWAYS_ACCEPT}
label={intl.formatMessage(intlMessages.alwaysAccept)}
aria-describedby={guestPolicy === ALWAYS_ACCEPT ? 'selected-btn-desc' : 'policy-btn-desc'}
@ -112,9 +105,8 @@ class GuestPolicyComponent extends PureComponent {
closeModal();
}}
/>
<Button
<Styled.GuestPolicyButton
color="primary"
className={[styles.button, guestPolicy === ALWAYS_DENY && styles.active].join(' ')}
disabled={guestPolicy === ALWAYS_DENY}
label={intl.formatMessage(intlMessages.alwaysDeny)}
aria-describedby={guestPolicy === ALWAYS_DENY ? 'selected-btn-desc' : 'policy-btn-desc'}
@ -125,12 +117,12 @@ class GuestPolicyComponent extends PureComponent {
closeModal();
}}
/>
</div>
</Styled.Content>
<div id="policy-btn-desc" aria-hidden className="sr-only">
{intl.formatMessage(intlMessages.policyBtnDesc)}
</div>
</div>
</Modal>
</Styled.Container>
</Styled.GuestPolicyModal>
);
}
}

76
bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.js Normal file
View File

@ -0,0 +1,76 @@
import styled from 'styled-components';
import { colorGrayDark, colorGray } from '/imports/ui/stylesheets/styled-components/palette';
import {
jumboPaddingY,
lgPaddingX,
lgPaddingY,
titlePositionLeft,
modalMargin,
} from '/imports/ui/stylesheets/styled-components/general';
import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
import Modal from '/imports/ui/components/modal/simple/component';
import Button from '/imports/ui/components/button/component';
const GuestPolicyModal = styled(Modal)`
padding: ${jumboPaddingY};
`;
const Container = styled.div`
margin: 0 ${modalMargin} ${lgPaddingX};
`;
const Header = styled.div`
margin: 0;
padding: 0;
border: none;
line-height: ${titlePositionLeft};
margin-bottom: ${lgPaddingY};
`;
const Title = styled.h2`
left: ${titlePositionLeft};
right: auto;
color: ${colorGrayDark};
font-weight: bold;
font-size: ${fontSizeLarge};
text-align: center;
[dir="rtl"] & {
left: auto;
right: ${titlePositionLeft};
}
`;
const Description = styled.div`
text-align: center;
color: ${colorGray};
margin-bottom: ${jumboPaddingY};
`;
const Content = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const GuestPolicyButton = styled(Button)`
width: 200px;
box-sizing: border-box;
margin: 5px;
${({ disabled }) => disabled && `
& > span {
text-decoration: underline;
}
`}
`;
export default {
GuestPolicyModal,
Container,
Header,
Title,
Description,
Content,
GuestPolicyButton,
};

74
bigbluebutton-html5/imports/ui/components/waiting-users/guest-policy/styles.scss
View File

@ -1,74 +0,0 @@
@import '/imports/ui/stylesheets/mixins/focus';
@import '/imports/ui/stylesheets/variables/_all';
@import "/imports/ui/components/modal/simple/styles";
:root {
--modal-margin: 3rem;
--title-position-left: 2.2rem;
--closeBtn-position-left: 2.5rem;
}
.title {
left: var(--title-position-left);
right: auto;
color: var(--color-gray-dark);
font-weight: bold;
font-size: var(--font-size-large);
text-align: center;
[dir="rtl"] & {
left: auto;
right: var(--title-position-left);
}
}
.container {
margin: 0 var(--modal-margin) var(--lg-padding-x);
}
.modal {
@extend .modal;
padding: var(--jumbo-padding-y);
}
.overlay {
@extend .overlay;
}
.description {
text-align: center;
color: var(--color-gray);
margin-bottom: var(--jumbo-padding-y)
}
.label {
color: var(--color-gray-label);
font-size: var(--font-size-small);
margin-bottom: var(--lg-padding-y);
}
.header {
margin: 0;
padding: 0;
border: none;
line-height: var(--title-position-left);
margin-bottom: var(--lg-padding-y);
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.button {
width: 200px;
box-sizing: border-box;
margin: 5px;
}
.active {
span {
text-decoration: underline;
}
}