convert recording-indicator component
This commit is contained in:
Ramón Souza
parent
884a2ea6ad
commit
b430d53289
@ -4,8 +4,7 @@ import humanizeSeconds from '/imports/utils/humanizeSeconds';
|
||||
import Tooltip from '/imports/ui/components/tooltip/component';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import cx from 'classnames';
|
||||
import { styles } from './styles';
|
||||
import Styled from './styles';
|
||||
|
||||
const intlMessages = defineMessages({
|
||||
notificationRecordingStart: {
|
||||
@ -138,7 +137,7 @@ class RecordingIndicator extends PureComponent {
|
||||
};
|
||||
|
||||
const recordingIndicatorIcon = (
|
||||
<span data-test="mainWhiteboard" className={cx(styles.recordingIndicatorIcon, (!isPhone || recording) && styles.presentationTitleMargin)}>
|
||||
<Styled.RecordingIndicatorIcon titleMargin={!isPhone || recording} data-test="mainWhiteboard">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1" viewBox="0 0 20 20">
|
||||
<g stroke="#FFF" fill="#FFF" strokeLinecap="square">
|
||||
<circle
|
||||
@ -157,16 +156,16 @@ class RecordingIndicator extends PureComponent {
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</Styled.RecordingIndicatorIcon>
|
||||
);
|
||||
|
||||
const showButton = amIModerator && allowStartStopRecording;
|
||||
|
||||
const recordMeetingButton = (
|
||||
<div
|
||||
<Styled.RecordingControl
|
||||
aria-label={recordTitle}
|
||||
aria-describedby={"recording-description"}
|
||||
className={recording ? styles.recordingControlON : styles.recordingControlOFF}
|
||||
recording={recording}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
key="recording-toggle"
|
||||
@ -174,14 +173,14 @@ class RecordingIndicator extends PureComponent {
|
||||
onKeyPress={recordingToggle}
|
||||
>
|
||||
{recordingIndicatorIcon}
|
||||
<div className={styles.presentationTitle}>
|
||||
<span id={"recording-description"} className={styles.visuallyHidden}>
|
||||
<Styled.PresentationTitle>
|
||||
<Styled.VisuallyHidden id={"recording-description"}>
|
||||
{`${title} ${recording ? humanizeSeconds(time) : ''}`}
|
||||
</span>
|
||||
</Styled.VisuallyHidden>
|
||||
{recording
|
||||
? <span aria-hidden>{humanizeSeconds(time)}</span> : <span>{recordTitle}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Styled.PresentationTitle>
|
||||
</Styled.RecordingControl>
|
||||
);
|
||||
|
||||
const recordMeetingButtonWithTooltip = (
|
||||
@ -195,9 +194,9 @@ class RecordingIndicator extends PureComponent {
|
||||
return (
|
||||
<Fragment>
|
||||
{record
|
||||
? <span className={styles.presentationTitleSeparator} aria-hidden>|</span>
|
||||
? <Styled.PresentationTitleSeparator aria-hidden>|</Styled.PresentationTitleSeparator>
|
||||
: null}
|
||||
<div className={styles.recordingIndicator}>
|
||||
<Styled.RecordingIndicator>
|
||||
{showButton
|
||||
? recordingButton
|
||||
: null}
|
||||
@ -208,20 +207,19 @@ class RecordingIndicator extends PureComponent {
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
>
|
||||
<div
|
||||
<Styled.RecordingStatusViewOnly
|
||||
aria-label={`${intl.formatMessage(recording
|
||||
? intlMessages.notificationRecordingStart
|
||||
: intlMessages.notificationRecordingStop)}`}
|
||||
className={styles.recordingStatusViewOnly}
|
||||
>
|
||||
{recordingIndicatorIcon}
|
||||
|
||||
{recording
|
||||
? <div className={styles.presentationTitle}>{humanizeSeconds(time)}</div> : null}
|
||||
</div>
|
||||
? <Styled.PresentationTitle>{humanizeSeconds(time)}</Styled.PresentationTitle> : null}
|
||||
</Styled.RecordingStatusViewOnly>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</Styled.RecordingIndicator>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,138 @@
|
||||
import styled from 'styled-components';
|
||||
import { fontSizeLarge, fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
|
||||
import {
|
||||
smPaddingX,
|
||||
borderSize,
|
||||
borderSizeLarge,
|
||||
borderSizeSmall,
|
||||
} from '/imports/ui/stylesheets/styled-components/general';
|
||||
import { colorWhite, colorPrimary, colorGray } from '/imports/ui/stylesheets/styled-components/palette';
|
||||
|
||||
const RecordingIndicatorIcon = styled.span`
|
||||
width: ${fontSizeLarge};
|
||||
height: ${fontSizeLarge};
|
||||
font-size: ${fontSizeBase};
|
||||
|
||||
${({ titleMargin }) => titleMargin && `
|
||||
[dir="ltr"] & {
|
||||
margin-right: ${smPaddingX};
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const RecordingControl = styled.div`
|
||||
display: flex;
|
||||
border-radius: 2em 2em;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
color: ${colorWhite} !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: ${colorWhite} !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 ${borderSize} ${colorPrimary};
|
||||
}
|
||||
|
||||
${({ recording }) => recording && `
|
||||
padding: 5px;
|
||||
background-color: ${colorPrimary};
|
||||
border: ${borderSizeLarge} solid ${colorPrimary};
|
||||
|
||||
&:focus {
|
||||
background-clip: padding-box;
|
||||
border: ${borderSizeLarge} solid transparent;
|
||||
}
|
||||
`}
|
||||
|
||||
${({ recording }) => !recording && `
|
||||
padding: 7px;
|
||||
border: ${borderSizeSmall} solid ${colorWhite};
|
||||
|
||||
&:focus {
|
||||
padding: 5px;
|
||||
border: ${borderSizeLarge} solid ${colorWhite};
|
||||
box-shadow: none;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const PresentationTitle = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-weight: 200;
|
||||
color: ${colorWhite};
|
||||
font-size: ${fontSizeBase};
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 30vw;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0;
|
||||
margin-right: ${smPaddingX};
|
||||
}
|
||||
|
||||
& > [class^="icon-bbb-"] {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
`;
|
||||
|
||||
const VisuallyHidden = styled.span`
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px; width: 1px;
|
||||
margin: -1px; padding: 0; border: 0;
|
||||
`;
|
||||
|
||||
const PresentationTitleSeparator = styled.span`
|
||||
color: ${colorGray};
|
||||
font-size: ${fontSizeBase};
|
||||
margin: 0 1rem;
|
||||
`;
|
||||
|
||||
const RecordingIndicator = styled.div`
|
||||
&:hover {
|
||||
outline: transparent;
|
||||
outline-style: dotted;
|
||||
outline-width: ${borderSize};
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: transparent;
|
||||
outline-width: ${borderSize};
|
||||
outline-style: solid;
|
||||
}
|
||||
`;
|
||||
|
||||
const RecordingStatusViewOnly = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export default {
|
||||
RecordingIndicatorIcon,
|
||||
RecordingControl,
|
||||
PresentationTitle,
|
||||
VisuallyHidden,
|
||||
PresentationTitleSeparator,
|
||||
RecordingIndicator,
|
||||
RecordingStatusViewOnly,
|
||||
};
|
||||
@ -1,122 +0,0 @@
|
||||
@import '/imports/ui/stylesheets/mixins/_indicators';
|
||||
@import "/imports/ui/stylesheets/variables/placeholders";
|
||||
|
||||
.visuallyHidden {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px; width: 1px;
|
||||
margin: -1px; padding: 0; border: 0;
|
||||
}
|
||||
|
||||
%recordingControl {
|
||||
display: flex;
|
||||
border-radius: 2em 2em;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-white) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 var(--border-size) var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.recordingControlON {
|
||||
@extend %recordingControl;
|
||||
|
||||
padding: 5px;
|
||||
background-color: var(--color-primary);
|
||||
border: var(--border-size-large) solid var(--color-primary);
|
||||
|
||||
&:focus {
|
||||
background-clip: padding-box;
|
||||
border: var(--border-size-large) solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.recordingControlOFF {
|
||||
@extend %recordingControl;
|
||||
|
||||
padding: 7px;
|
||||
border: var(--border-size-small) solid var(--color-white);
|
||||
|
||||
&:focus {
|
||||
padding: 5px;
|
||||
border: var(--border-size-large) solid var(--color-white);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.presentationTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-weight: 200;
|
||||
color: var(--color-white);
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 30vw;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 0;
|
||||
margin-right: var(--sm-padding-x);
|
||||
}
|
||||
|
||||
> [class^="icon-bbb-"] {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.presentationTitleMargin {
|
||||
[dir="ltr"] & {
|
||||
margin-right: var(--sm-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.recordingStatusViewOnly {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recordingIndicatorIcon {
|
||||
width: var(--font-size-large);
|
||||
height: var(--font-size-large);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.recordingIndicator {
|
||||
&:hover {
|
||||
@extend %highContrastOutline;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@extend %highContrastOutline;
|
||||
outline-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
.presentationTitleSeparator {
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-base);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user