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

Adds emoji status icons to the react user list component

Browse Source
This commit is contained in:
gcampes 2016-04-05 11:24:48 -03:00
parent f675681ce4
commit 126b28d432
2 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
bigbluebutton-html5/client/imports/react/components/EmojiIcon.jsx Normal file
View File

@ -0,0 +1,76 @@
import classNames from 'classnames';
const { PropTypes } = React;
export let EmojiIcon = React.createClass({
propTypes: {
iconName: PropTypes.string.isRequired,
},
render() {
return this.renderIcon();
},
renderIcon() {
if(this.props.iconName === 'raiseHand') {
return (<i className={classNames(this.props.className, 'ion-android-hand')}></i>);
}
else if(this.props.iconName === 'happy') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" fill="none" />
</svg>
)
}
else if(this.props.iconName === 'neutral') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<path d="m18 30 l 14 0" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
</svg>
)
}
else if(this.props.iconName === 'confused') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
</svg>
)
}
else if(this.props.iconName === 'sad') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
<circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
<path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" fill="none" />
</svg>
)
}
else if(this.props.iconName === 'away') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
<path d="m25 25 l 0 -8" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
<path d="m25 25 l 5 5" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
</svg>
)
}
else if(this.props.iconName === 'plus') {
return (
<svg width="25" height="25" viewBox="0 0 50 50">
<path d="m25 18 l 0 14" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
<path d="m18 25 l 14 0" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
</svg>
)
}
},
});

7
bigbluebutton-html5/client/imports/react/components/UserList/UserListItem.jsx
View File

@ -1,5 +1,6 @@
import {Button} from '../Button.jsx';
import {Icon} from '../Icon.jsx';
import {EmojiIcon} from '../EmojiIcon.jsx';
import {Tooltip} from '../Tooltip.jsx';
import classNames from 'classnames';
@ -41,6 +42,12 @@ export let UserListItem = React.createClass({
const user = this.props.user;
let statusIcons = [];
if(user.emoji !== 'none' && !user.isPresenter) {
statusIcons.push((
<EmojiIcon key="1" iconName={user.emoji}/>
));
}
if (this.props.currentUser.isModerator && !user.isPresenter) {
statusIcons.push((
<Icon key="1" iconName="projection-screen" onClick={this.handleSetPresenter.bind(this, user)} title={`Set ${user.name} as presenter`}/>