Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-18 14:44:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add stickers popover.

Browse Source
This commit is contained in:
Richard Lewis 2018-01-10 20:27:43 +00:00
parent 9abb160120
commit 53b590f55e
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -81,6 +81,7 @@
"react-dnd-html5-backend": "^2.1.2", "react-dnd-html5-backend": "^2.1.2",
"react-dom": "^15.4.0", "react-dom": "^15.4.0",
"react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef", "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
"react-simple-popover": "^0.2.2",
"sanitize-html": "^1.14.1", "sanitize-html": "^1.14.1",
"text-encoding-utf-8": "^1.0.1", "text-encoding-utf-8": "^1.0.1",
"url": "^0.11.0", "url": "^0.11.0",

24
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';
export default class MessageComposer extends React.Component { export default class MessageComposer extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -42,6 +42,7 @@ export default class MessageComposer extends React.Component {
this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this); this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
this.onInputStateChanged = this.onInputStateChanged.bind(this); this.onInputStateChanged = this.onInputStateChanged.bind(this);
this.onEvent = this.onEvent.bind(this); this.onEvent = this.onEvent.bind(this);
this.render = this.render.bind(this);
this.state = { this.state = {
autocompleteQuery: '', autocompleteQuery: '',
@ -280,15 +281,27 @@ export default class MessageComposer extends React.Component {
</div>; </div>;
} }
// Apps // Stickers
if (this.state.showStickers) { if (this.state.showStickers) {
const children = <p>Stickers popover</p>;
hideStickersButton = hideStickersButton =
<div <div
key="controls_hide_stickers" key="controls_hide_stickers"
className="mx_MessageComposer_stickers" className="mx_MessageComposer_stickers"
onClick={this.onHideStickersClick} onClick={this.onHideStickersClick}
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={{}}
style={{borderRadius: '5px'}}
children={children}
/>
</div>; </div>;
} else { } else {
showStickersButton = showStickersButton =
@ -300,6 +313,10 @@ 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 }
{ hideStickersButton }
</div>;
const canSendMessages = this.props.room.currentState.maySendMessage( const canSendMessages = this.props.room.currentState.maySendMessage(
MatrixClientPeg.get().credentials.userId); MatrixClientPeg.get().credentials.userId);
@ -346,8 +363,7 @@ export default class MessageComposer extends React.Component {
hangupButton, hangupButton,
callButton, callButton,
videoCallButton, videoCallButton,
showStickersButton, stickersContainer,
hideStickersButton,
); );
} else { } else {
controls.push( controls.push(