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

Merge pull request #7983 from capilkey/svg-recording-icon

Browse Source 
Use an SVG for the recording icon
This commit is contained in:
Fred Dixon 2019-08-23 22:01:45 -03:00 committed by GitHub
commit 1340b33ee5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
View File

@ -81,6 +81,29 @@ class RecordingIndicator extends PureComponent {
document.activeElement.blur();
};
const recordingIndicatorIcon = (
<span className={styles.recordingIndicatorIcon}>
<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
fill="none"
strokeWidth="1"
r="9"
cx="10"
cy="10"
/>
<circle
stroke={recording ? '#F00' : '#FFF'}
fill={recording ? '#F00' : '#FFF'}
r="4"
cx="10"
cy="10"
/>
</g>
</svg>
</span>
);
const showButton = amIModerator && allowStartStopRecording;
const recordMeetingButton = (
@ -93,9 +116,7 @@ class RecordingIndicator extends PureComponent {
onClick={recordingToggle}
onKeyPress={recordingToggle}
>
<span
className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
/>
{recordingIndicatorIcon}
<div className={styles.presentationTitle}>
{recording
@ -137,14 +158,10 @@ class RecordingIndicator extends PureComponent {
: intlMessages.notificationRecordingStop)}`}
className={styles.recordingStatusViewOnly}
>
{recordingIndicatorIcon}
<span
className={recording ? styles.recordingIndicatorON : styles.recordingIndicatorOFF}
/>
<div className={styles.presentationTitle}>
{recording ? humanizeSeconds(time) : null}
</div>
{recording
? <div className={styles.presentationTitle}>{humanizeSeconds(time)}</div> : null}
</div>
</Tooltip>
)}

50
bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
View File

@ -91,56 +91,10 @@
display: flex;
}
%recordingIndicator {
border: var(--border-size-small) solid var(--color-white) !important;
border-radius: 50%;
span {
border: none;
box-shadow: none;
background-color: transparent !important;
}
position: relative;
display: inline-block;
padding: 0 !important;
.recordingIndicatorIcon {
width: var(--font-size-large);
height: var(--font-size-large);
border-radius: 50%;
&:after {
content: '';
width: calc(var(--font-size-large) / 2);
height: calc(var(--font-size-large) / 2);
position: absolute;
top: 50%;
left: 50%;
margin-top: calc((var(--font-size-large) / -4));
margin-left: calc((var(--font-size-large) / -4));
border-radius: 50%;
}
}
.recordingIndicatorON {
@extend %recordingIndicator;
&:after {
border: var(--border-size) solid transparent;
background-color: var(--color-danger);
}
}
.recordingIndicatorOFF {
@extend %recordingIndicator;
&:after {
background-color: var(--color-white);
}
}
.isRecordingCircle {
border: var(--border-size-small) solid var(--color-white) !important;
border-radius: 50%;
span {
border: none;
box-shadow: none;
background-color: transparent !important;
}
font-size: var(--font-size-base);
}
.recordingIndicator {