Merge pull request #2937 from jryans/primary-reactions

Add primary reactions to action bar
pull/21833/head
J. Ryan Stinnett 2019-05-01 09:37:12 +01:00 committed by GitHub
commit a74824aef4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 161 additions and 20 deletions

View File

@ -20,6 +20,7 @@ limitations under the License.
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 24px; height: 24px;
line-height: 24px;
border-radius: 4px; border-radius: 4px;
background: $message-action-bar-bg-color; background: $message-action-bar-bg-color;
top: -13px; top: -13px;
@ -49,21 +50,21 @@ limitations under the License.
&:only-child { &:only-child {
border-radius: 3px; border-radius: 3px;
} }
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $message-action-bar-fg-color;
}
} }
} }
.mx_MessageActionBar_maskButton::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $message-action-bar-fg-color;
}
.mx_MessageActionBar_replyButton::after { .mx_MessageActionBar_replyButton::after {
mask-image: url('$(res)/img/reply.svg'); mask-image: url('$(res)/img/reply.svg');
} }
@ -71,3 +72,13 @@ limitations under the License.
.mx_MessageActionBar_optionsButton::after { .mx_MessageActionBar_optionsButton::after {
mask-image: url('$(res)/img/icon_context.svg'); mask-image: url('$(res)/img/icon_context.svg');
} }
.mx_MessageActionBar_reactionDimension {
width: 42px;
display: flex;
justify-content: space-evenly;
}
.mx_MessageActionBar_reactionDisabled {
opacity: 0.4;
}

View File

@ -23,6 +23,8 @@ import sdk from '../../../index';
import dis from '../../../dispatcher'; import dis from '../../../dispatcher';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import { createMenu } from '../../structures/ContextualMenu'; import { createMenu } from '../../structures/ContextualMenu';
import SettingsStore from '../../../settings/SettingsStore';
import classNames from 'classnames';
export default class MessageActionBar extends React.PureComponent { export default class MessageActionBar extends React.PureComponent {
static propTypes = { static propTypes = {
@ -33,6 +35,15 @@ export default class MessageActionBar extends React.PureComponent {
onFocusChange: PropTypes.func, onFocusChange: PropTypes.func,
}; };
constructor(props) {
super(props);
this.state = {
agreeDimension: null,
likeDimension: null,
};
}
onFocusChange = (focused) => { onFocusChange = (focused) => {
if (!this.props.onFocusChange) { if (!this.props.onFocusChange) {
return; return;
@ -48,6 +59,31 @@ export default class MessageActionBar extends React.PureComponent {
); );
} }
onAgreeClick = (ev) => {
this.toggleDimensionValue("agreeDimension", "agree");
}
onDisagreeClick = (ev) => {
this.toggleDimensionValue("agreeDimension", "disagree");
}
onLikeClick = (ev) => {
this.toggleDimensionValue("likeDimension", "like");
}
onDislikeClick = (ev) => {
this.toggleDimensionValue("likeDimension", "dislike");
}
toggleDimensionValue(dimension, value) {
const state = this.state[dimension];
const newState = state !== value ? value : null;
this.setState({
[dimension]: newState,
});
// TODO: Send the reaction event
}
onReplyClick = (ev) => { onReplyClick = (ev) => {
dis.dispatch({ dis.dispatch({
action: 'reply_to_event', action: 'reply_to_event',
@ -87,15 +123,13 @@ export default class MessageActionBar extends React.PureComponent {
this.onFocusChange(true); this.onFocusChange(true);
} }
render() { isContentActionable() {
const { mxEvent } = this.props; const { mxEvent } = this.props;
const { status: eventStatus } = mxEvent; const { status: eventStatus } = mxEvent;
// status is SENT before remote-echo, null after // status is SENT before remote-echo, null after
const isSent = !eventStatus || eventStatus === EventStatus.SENT; const isSent = !eventStatus || eventStatus === EventStatus.SENT;
let replyButton;
if (isSent && mxEvent.getType() === 'm.room.message') { if (isSent && mxEvent.getType() === 'm.room.message') {
const content = mxEvent.getContent(); const content = mxEvent.getContent();
if ( if (
@ -103,16 +137,103 @@ export default class MessageActionBar extends React.PureComponent {
content.msgtype !== 'm.bad.encrypted' && content.msgtype !== 'm.bad.encrypted' &&
content.hasOwnProperty('body') content.hasOwnProperty('body')
) { ) {
replyButton = <span className="mx_MessageActionBar_replyButton" return true;
title={_t("Reply")}
onClick={this.onReplyClick}
/>;
} }
} }
return false;
}
isReactionsEnabled() {
return SettingsStore.isFeatureEnabled("feature_reactions");
}
renderAgreeDimension() {
if (!this.isReactionsEnabled()) {
return null;
}
const state = this.state.agreeDimension;
const options = [
{
key: "agree",
content: "👍",
onClick: this.onAgreeClick,
},
{
key: "disagree",
content: "👎",
onClick: this.onDisagreeClick,
},
];
return <span className="mx_MessageActionBar_reactionDimension"
title={_t("Agree or Disagree")}
>
{this.renderReactionDimensionItems(state, options)}
</span>;
}
renderLikeDimension() {
if (!this.isReactionsEnabled()) {
return null;
}
const state = this.state.likeDimension;
const options = [
{
key: "like",
content: "🙂",
onClick: this.onLikeClick,
},
{
key: "dislike",
content: "😔",
onClick: this.onDislikeClick,
},
];
return <span className="mx_MessageActionBar_reactionDimension"
title={_t("Like or Dislike")}
>
{this.renderReactionDimensionItems(state, options)}
</span>;
}
renderReactionDimensionItems(state, options) {
return options.map(option => {
const disabled = state && state !== option.key;
const classes = classNames({
mx_MessageActionBar_reactionDisabled: disabled,
});
return <span key={option.key}
className={classes}
onClick={option.onClick}
>
{option.content}
</span>;
});
}
render() {
let agreeDimensionReactionButtons;
let likeDimensionReactionButtons;
let replyButton;
if (this.isContentActionable()) {
agreeDimensionReactionButtons = this.renderAgreeDimension();
likeDimensionReactionButtons = this.renderLikeDimension();
replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
title={_t("Reply")}
onClick={this.onReplyClick}
/>;
}
return <div className="mx_MessageActionBar"> return <div className="mx_MessageActionBar">
{agreeDimensionReactionButtons}
{likeDimensionReactionButtons}
{replyButton} {replyButton}
<span className="mx_MessageActionBar_optionsButton" <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
title={_t("Options")} title={_t("Options")}
onClick={this.onOptionsClick} onClick={this.onOptionsClick}
/> />

View File

@ -297,6 +297,7 @@
"Show recent room avatars above the room list": "Show recent room avatars above the room list", "Show recent room avatars above the room list": "Show recent room avatars above the room list",
"Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)", "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
"Render simple counters in room header": "Render simple counters in room header", "Render simple counters in room header": "Render simple counters in room header",
"React to messages with emoji": "React to messages with emoji",
"Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
"Use compact timeline layout": "Use compact timeline layout", "Use compact timeline layout": "Use compact timeline layout",
"Show a placeholder for removed messages": "Show a placeholder for removed messages", "Show a placeholder for removed messages": "Show a placeholder for removed messages",
@ -889,6 +890,8 @@
"Today": "Today", "Today": "Today",
"Yesterday": "Yesterday", "Yesterday": "Yesterday",
"Error decrypting audio": "Error decrypting audio", "Error decrypting audio": "Error decrypting audio",
"Agree or Disagree": "Agree or Disagree",
"Like or Dislike": "Like or Dislike",
"Reply": "Reply", "Reply": "Reply",
"Options": "Options", "Options": "Options",
"Attachment": "Attachment", "Attachment": "Attachment",

View File

@ -118,6 +118,12 @@ export const SETTINGS = {
supportedLevels: LEVELS_FEATURE, supportedLevels: LEVELS_FEATURE,
default: false, default: false,
}, },
"feature_reactions": {
isFeature: true,
displayName: _td("React to messages with emoji"),
supportedLevels: LEVELS_FEATURE,
default: false,
},
"MessageComposerInput.suggestEmoji": { "MessageComposerInput.suggestEmoji": {
supportedLevels: LEVELS_ACCOUNT_SETTINGS, supportedLevels: LEVELS_ACCOUNT_SETTINGS,
displayName: _td('Enable Emoji suggestions while typing'), displayName: _td('Enable Emoji suggestions while typing'),