mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-05 05:38:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Stickers popover.

Browse source
This commit is contained in:
Richard Lewis 2018-01-12 17:38:21 +00:00
parent 23543614e1
commit a3c6dd36ef
1 changed files with 79 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/components/views/rooms/MessageComposer.js
View file

@ -23,7 +23,7 @@ import sdk from '../../../index';
import dis from '../../../dispatcher'; import dis from '../../../dispatcher';
import Autocomplete from './Autocomplete'; import Autocomplete from './Autocomplete';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore"; import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import Popover from 'react-simple-popover'; import Popover, {ArrowContainer} from 'react-tiny-popover';
import Widgets from '../../../utils/widgets'; import Widgets from '../../../utils/widgets';
import AppTile from '../elements/AppTile'; import AppTile from '../elements/AppTile';
@ -266,7 +266,13 @@ export default class MessageComposer extends React.Component {
alt={e2eTitle} title={e2eTitle} alt={e2eTitle} title={e2eTitle}
/>, />,
); );
let callButton, videoCallButton, hangupButton, showStickersButton, hideStickersButton;
let callButton;
let videoCallButton;
let hangupButton;
let stickersButton;
// Call buttons
if (this.props.callState && this.props.callState !== 'ended') { if (this.props.callState && this.props.callState !== 'ended') {
hangupButton = hangupButton =
<div key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}> <div key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
@ -284,63 +290,58 @@ export default class MessageComposer extends React.Component {
} }
// Stickers // Stickers
if (this.state.showStickers) { const popoverWidth = '300px';
const popoverWidth = '300px'; const popoverHeight = '300px';
const popoverHeight = '300px'; const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
let stickersContent = <p>Click here to add your first sitckerpack</p>; // Load stickerpack content
if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) { if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
stickersContent = <div style={{ this.state.stickersContent = <div
id='stickersContent'
className='mx_StickersContent'
style={{
border: 'none', border: 'none',
height: popoverHeight, height: popoverHeight,
width: popoverWidth, width: popoverWidth,
}}> }}
<AppTile >
id={stickerpackWidget.id} <AppTile
url={stickerpackWidget.content.url} id={stickerpackWidget.id}
name={stickerpackWidget.content.name} url={stickerpackWidget.content.url}
room={this.props.room} name={stickerpackWidget.content.name}
type={stickerpackWidget.content.type} room={this.props.room}
fullWidth={true} type={stickerpackWidget.content.type}
userId={stickerpackWidget.sender || MatrixClientPeg.get().credentials.userId} fullWidth={true}
creatorUserId={MatrixClientPeg.get().credentials.userId} userId={stickerpackWidget.sender || MatrixClientPeg.get().credentials.userId}
waitForIframeLoad={true} creatorUserId={MatrixClientPeg.get().credentials.userId}
show={true} waitForIframeLoad={true}
showMenubar={false} show={true}
/> showMenubar={false}
</div>; />
} </div>;
} else {
// Default content to show if stickerpack widget not added
this.state.stickersContent = <p>Click here to add your first sitckerpack</p>;
}
hideStickersButton =
if (this.state.showStickers) {
// Show hide-stickers button
stickersButton =
<div <div
id='stickersButton'
key="controls_hide_stickers" key="controls_hide_stickers"
className="mx_MessageComposer_stickers" className="mx_MessageComposer_stickers"
onClick={this.onHideStickersClick} onClick={this.onHideStickersClick}
ref='target' ref='target'
title={_t("Hide Stickers")}> title={_t("Hide Stickers")}>
<TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" /> <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
<Popover
placement='top'
container={this.refs.messageComposerInput}
target={this.refs.stickersContainer}
show={this.state.showStickers}
onHide={this.onHideStickersClick}
containerStyle={{
zIndex: 1000,
}}
style={{
borderRadius: '5px',
padding: 0,
overflow: 'hidden',
height: popoverHeight,
width: popoverWidth,
}}
children={stickersContent}
/>
</div>; </div>;
} else { } else {
showStickersButton = // Show show-stickers button
stickersButton =
<div <div
id='stickersButton'
key="constrols_show_stickers" key="constrols_show_stickers"
className="mx_MessageComposer_stickers" className="mx_MessageComposer_stickers"
onClick={this.onShowStickersClick} onClick={this.onShowStickersClick}
@ -348,10 +349,38 @@ export default class MessageComposer extends React.Component {
<TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" /> <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
</div>; </div>;
} }
const stickersContainer = <div ref='stickersContainer' key='stickers'>
{ showStickersButton } const stickers = <Popover
{ hideStickersButton } isOpen={this.state.showStickers}
</div>; position={'top'}
padding={1}
content={({ position, targetRect, popoverRect }) => (
<ArrowContainer
position={position}
targetRect={targetRect}
popoverRect={popoverRect}
arrowColor={'#76CFA6'}
arrowSize={20}
arrowStyle={{ opacity: 0.7 }}
>
<div
className='mx_PopoverOuterContainer'
style={{
backgroundColor: '#76CFA6', // '#d3efe1',
opacity: 0.7,
overflow: 'hidden',
// border: '1px solid #666',
}}
>
{ this.state.stickersContent }
</div>
</ArrowContainer>
)}
>
<div id='popoverTarget'>
{ stickersButton }
</div>
</Popover>;
const canSendMessages = this.props.room.currentState.maySendMessage( const canSendMessages = this.props.room.currentState.maySendMessage(
MatrixClientPeg.get().credentials.userId); MatrixClientPeg.get().credentials.userId);
@ -398,7 +427,7 @@ export default class MessageComposer extends React.Component {
hangupButton, hangupButton,
callButton, callButton,
videoCallButton, videoCallButton,
stickersContainer, stickers,
); );
} else { } else {
controls.push( controls.push(