Add full emoji picker for reactions
Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan
parent
385e83fdbc
commit
497b779334
17 changed files with 858 additions and 435 deletions
|
|
@ -25,6 +25,7 @@ import Modal from '../../../Modal';
|
|||
import { createMenu } from '../../structures/ContextualMenu';
|
||||
import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
|
||||
import {RoomContext} from "../../structures/RoomView";
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
|
||||
export default class MessageActionBar extends React.PureComponent {
|
||||
static propTypes = {
|
||||
|
|
@ -84,6 +85,45 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
});
|
||||
};
|
||||
|
||||
onReactClick = (ev) => {
|
||||
const EmojiPicker = sdk.getComponent('emojipicker.EmojiPicker');
|
||||
const buttonRect = ev.target.getBoundingClientRect();
|
||||
|
||||
const menuOptions = {
|
||||
reactions: this.props.reactions,
|
||||
chevronFace: "none",
|
||||
onFinished: () => this.onFocusChange(false),
|
||||
onChoose: reaction => {
|
||||
this.onFocusChange(false);
|
||||
MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", {
|
||||
"m.relates_to": {
|
||||
"rel_type": "m.annotation",
|
||||
"event_id": this.props.mxEvent.getId(),
|
||||
"key": reaction,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
// The window X and Y offsets are to adjust position when zoomed in to page
|
||||
const buttonRight = buttonRect.right + window.pageXOffset;
|
||||
const buttonBottom = buttonRect.bottom + window.pageYOffset;
|
||||
const buttonTop = buttonRect.top + window.pageYOffset;
|
||||
// Align the right edge of the menu to the right edge of the button
|
||||
menuOptions.right = window.innerWidth - buttonRight;
|
||||
// Align the menu vertically on whichever side of the button has more
|
||||
// space available.
|
||||
if (buttonBottom < window.innerHeight / 2) {
|
||||
menuOptions.top = buttonBottom;
|
||||
} else {
|
||||
menuOptions.bottom = window.innerHeight - buttonTop;
|
||||
}
|
||||
|
||||
createMenu(EmojiPicker, menuOptions);
|
||||
|
||||
this.onFocusChange(true);
|
||||
};
|
||||
|
||||
onOptionsClick = (ev) => {
|
||||
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
||||
const buttonRect = ev.target.getBoundingClientRect();
|
||||
|
|
@ -128,17 +168,6 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
this.onFocusChange(true);
|
||||
};
|
||||
|
||||
renderReactButton() {
|
||||
const ReactMessageAction = sdk.getComponent('messages.ReactMessageAction');
|
||||
const { mxEvent, reactions } = this.props;
|
||||
|
||||
return <ReactMessageAction
|
||||
mxEvent={mxEvent}
|
||||
reactions={reactions}
|
||||
onFocusChange={this.onFocusChange}
|
||||
/>;
|
||||
}
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
|
||||
|
|
@ -148,7 +177,11 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
|
||||
if (isContentActionable(this.props.mxEvent)) {
|
||||
if (this.context.room.canReact) {
|
||||
reactButton = this.renderReactButton();
|
||||
reactButton = <AccessibleButton
|
||||
className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
|
||||
title={_t("React")}
|
||||
onClick={this.onReactClick}
|
||||
/>;
|
||||
}
|
||||
if (this.context.room.canReply) {
|
||||
replyButton = <AccessibleButton
|
||||
|
|
|
|||
|
|
@ -1,97 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import sdk from '../../../index';
|
||||
|
||||
export default class ReactMessageAction extends React.PureComponent {
|
||||
static propTypes = {
|
||||
mxEvent: PropTypes.object.isRequired,
|
||||
// The Relations model from the JS SDK for reactions to `mxEvent`
|
||||
reactions: PropTypes.object,
|
||||
onFocusChange: PropTypes.func,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
if (props.reactions) {
|
||||
props.reactions.on("Relations.add", this.onReactionsChange);
|
||||
props.reactions.on("Relations.remove", this.onReactionsChange);
|
||||
props.reactions.on("Relations.redaction", this.onReactionsChange);
|
||||
}
|
||||
}
|
||||
|
||||
onFocusChange = (focused) => {
|
||||
if (!this.props.onFocusChange) {
|
||||
return;
|
||||
}
|
||||
this.props.onFocusChange(focused);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.reactions !== this.props.reactions) {
|
||||
this.props.reactions.on("Relations.add", this.onReactionsChange);
|
||||
this.props.reactions.on("Relations.remove", this.onReactionsChange);
|
||||
this.props.reactions.on("Relations.redaction", this.onReactionsChange);
|
||||
this.onReactionsChange();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.props.reactions) {
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.add",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.remove",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.redaction",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onReactionsChange = () => {
|
||||
// Force a re-render of the tooltip because a change in the reactions
|
||||
// set means the event tile's layout may have changed and possibly
|
||||
// altered the location where the tooltip should be shown.
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
const ReactionsQuickTooltip = sdk.getComponent('messages.ReactionsQuickTooltip');
|
||||
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
|
||||
const { mxEvent, reactions } = this.props;
|
||||
|
||||
const content = <ReactionsQuickTooltip
|
||||
mxEvent={mxEvent}
|
||||
reactions={reactions}
|
||||
/>;
|
||||
|
||||
return <InteractiveTooltip
|
||||
content={content}
|
||||
onVisibilityChange={this.onFocusChange}
|
||||
>
|
||||
<span className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
|
||||
</InteractiveTooltip>;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
|
||||
export default class ReactionTooltipButton extends React.PureComponent {
|
||||
static propTypes = {
|
||||
mxEvent: PropTypes.object.isRequired,
|
||||
// The reaction content / key / emoji
|
||||
content: PropTypes.string.isRequired,
|
||||
title: PropTypes.string,
|
||||
// A possible Matrix event if the current user has voted for this type
|
||||
myReactionEvent: PropTypes.object,
|
||||
};
|
||||
|
||||
onClick = (ev) => {
|
||||
const { mxEvent, myReactionEvent, content } = this.props;
|
||||
if (myReactionEvent) {
|
||||
MatrixClientPeg.get().redactEvent(
|
||||
mxEvent.getRoomId(),
|
||||
myReactionEvent.getId(),
|
||||
);
|
||||
} else {
|
||||
MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
|
||||
"m.relates_to": {
|
||||
"rel_type": "m.annotation",
|
||||
"event_id": mxEvent.getId(),
|
||||
"key": content,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { content, myReactionEvent } = this.props;
|
||||
|
||||
const classes = classNames({
|
||||
mx_ReactionTooltipButton: true,
|
||||
mx_ReactionTooltipButton_selected: !!myReactionEvent,
|
||||
});
|
||||
|
||||
return <span className={classes}
|
||||
data-key={content}
|
||||
title={this.props.title}
|
||||
aria-hidden={true}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{content}
|
||||
</span>;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import sdk from '../../../index';
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import { unicodeToShortcode } from '../../../HtmlUtils';
|
||||
|
||||
export default class ReactionsQuickTooltip extends React.PureComponent {
|
||||
static propTypes = {
|
||||
mxEvent: PropTypes.object.isRequired,
|
||||
// The Relations model from the JS SDK for reactions to `mxEvent`
|
||||
reactions: PropTypes.object,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
if (props.reactions) {
|
||||
props.reactions.on("Relations.add", this.onReactionsChange);
|
||||
props.reactions.on("Relations.remove", this.onReactionsChange);
|
||||
props.reactions.on("Relations.redaction", this.onReactionsChange);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
hoveredItem: null,
|
||||
myReactions: this.getMyReactions(),
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.reactions !== this.props.reactions) {
|
||||
this.props.reactions.on("Relations.add", this.onReactionsChange);
|
||||
this.props.reactions.on("Relations.remove", this.onReactionsChange);
|
||||
this.props.reactions.on("Relations.redaction", this.onReactionsChange);
|
||||
this.onReactionsChange();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.props.reactions) {
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.add",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.remove",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
this.props.reactions.removeListener(
|
||||
"Relations.redaction",
|
||||
this.onReactionsChange,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onReactionsChange = () => {
|
||||
this.setState({
|
||||
myReactions: this.getMyReactions(),
|
||||
});
|
||||
}
|
||||
|
||||
getMyReactions() {
|
||||
const reactions = this.props.reactions;
|
||||
if (!reactions) {
|
||||
return null;
|
||||
}
|
||||
const userId = MatrixClientPeg.get().getUserId();
|
||||
const myReactions = reactions.getAnnotationsBySender()[userId];
|
||||
if (!myReactions) {
|
||||
return null;
|
||||
}
|
||||
return [...myReactions.values()];
|
||||
}
|
||||
|
||||
onMouseOver = (ev) => {
|
||||
const { key } = ev.target.dataset;
|
||||
const item = this.items.find(({ content }) => content === key);
|
||||
this.setState({
|
||||
hoveredItem: item,
|
||||
});
|
||||
}
|
||||
|
||||
onMouseOut = (ev) => {
|
||||
this.setState({
|
||||
hoveredItem: null,
|
||||
});
|
||||
}
|
||||
|
||||
get items() {
|
||||
return [
|
||||
{
|
||||
content: "👍",
|
||||
title: _t("Agree"),
|
||||
},
|
||||
{
|
||||
content: "👎",
|
||||
title: _t("Disagree"),
|
||||
},
|
||||
{
|
||||
content: "😄",
|
||||
title: _t("Happy"),
|
||||
},
|
||||
{
|
||||
content: "🎉",
|
||||
title: _t("Party Popper"),
|
||||
},
|
||||
{
|
||||
content: "😕",
|
||||
title: _t("Confused"),
|
||||
},
|
||||
{
|
||||
content: "❤️",
|
||||
title: _t("Heart"),
|
||||
},
|
||||
{
|
||||
content: "🚀",
|
||||
title: _t("Rocket"),
|
||||
},
|
||||
{
|
||||
content: "👀",
|
||||
title: _t("Eyes"),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { mxEvent } = this.props;
|
||||
const { myReactions, hoveredItem } = this.state;
|
||||
const ReactionTooltipButton = sdk.getComponent('messages.ReactionTooltipButton');
|
||||
|
||||
const buttons = this.items.map(({ content, title }) => {
|
||||
const myReactionEvent = myReactions && myReactions.find(mxEvent => {
|
||||
if (mxEvent.isRedacted()) {
|
||||
return false;
|
||||
}
|
||||
return mxEvent.getRelation().key === content;
|
||||
});
|
||||
|
||||
return <ReactionTooltipButton
|
||||
key={content}
|
||||
content={content}
|
||||
title={title}
|
||||
mxEvent={mxEvent}
|
||||
myReactionEvent={myReactionEvent}
|
||||
/>;
|
||||
});
|
||||
|
||||
let label = " "; // non-breaking space to keep layout the same when empty
|
||||
if (hoveredItem) {
|
||||
const { content, title } = hoveredItem;
|
||||
|
||||
let shortcodeLabel;
|
||||
const shortcode = unicodeToShortcode(content);
|
||||
if (shortcode) {
|
||||
shortcodeLabel = <span className="mx_ReactionsQuickTooltip_shortcode">
|
||||
{shortcode}
|
||||
</span>;
|
||||
}
|
||||
|
||||
label = <div className="mx_ReactionsQuickTooltip_label">
|
||||
<span className="mx_ReactionsQuickTooltip_title">
|
||||
{title}
|
||||
</span>
|
||||
{shortcodeLabel}
|
||||
</div>;
|
||||
}
|
||||
|
||||
return <div className="mx_ReactionsQuickTooltip"
|
||||
onMouseOver={this.onMouseOver}
|
||||
onMouseOut={this.onMouseOut}
|
||||
>
|
||||
<div className="mx_ReactionsQuickTooltip_buttons">
|
||||
{buttons}
|
||||
</div>
|
||||
{label}
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue