mirror of
https://github.com/element-hq/element-web
synced 2024-11-23 09:46:09 +03:00
Add extra add reactions button to encourage more diverse reactions to content
This commit is contained in:
parent
3af0138e9d
commit
b5fa4d88bf
3 changed files with 59 additions and 2 deletions
|
@ -17,6 +17,26 @@ limitations under the License.
|
|||
.mx_ReactionsRow {
|
||||
margin: 6px 0;
|
||||
color: $primary-fg-color;
|
||||
|
||||
.mx_ReactionsRow_addReactionButton {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: sub;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $tertiary-fg-color;
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReactionsRow_showAll {
|
||||
|
|
|
@ -16,16 +16,44 @@ limitations under the License.
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||
|
||||
import * as sdk from '../../../index';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { isContentActionable } from '../../../utils/EventUtils';
|
||||
import {MatrixClientPeg} from '../../../MatrixClientPeg';
|
||||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||||
import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton";
|
||||
import {aboveLeftOf, ContextMenu, useContextMenu} from "../../structures/ContextMenu";
|
||||
|
||||
// The maximum number of reactions to initially show on a message.
|
||||
const MAX_ITEMS_WHEN_LIMITED = 8;
|
||||
|
||||
const ReactButton = ({ mxEvent, reactions }) => {
|
||||
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
||||
|
||||
let contextMenu;
|
||||
if (menuDisplayed) {
|
||||
const buttonRect = button.current.getBoundingClientRect();
|
||||
const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
|
||||
contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
|
||||
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
|
||||
</ContextMenu>;
|
||||
}
|
||||
|
||||
return <React.Fragment>
|
||||
<ContextMenuTooltipButton
|
||||
className="mx_ReactionsRow_addReactionButton"
|
||||
title={_t("Add reaction")}
|
||||
onClick={openMenu}
|
||||
isExpanded={menuDisplayed}
|
||||
inputRef={button}
|
||||
/>
|
||||
|
||||
{ contextMenu }
|
||||
</React.Fragment>;
|
||||
};
|
||||
|
||||
@replaceableComponent("views.messages.ReactionsRow")
|
||||
export default class ReactionsRow extends React.PureComponent {
|
||||
static propTypes = {
|
||||
|
@ -151,13 +179,21 @@ export default class ReactionsRow extends React.PureComponent {
|
|||
</a>;
|
||||
}
|
||||
|
||||
const cli = MatrixClientPeg.get();
|
||||
|
||||
let addReactionButton;
|
||||
if (cli.getRoom(mxEvent.getRoomId()).currentState.maySendEvent(EventType.Reaction, cli.getUserId())) {
|
||||
addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
|
||||
}
|
||||
|
||||
return <div
|
||||
className="mx_ReactionsRow"
|
||||
role="toolbar"
|
||||
aria-label={_t("Reactions")}
|
||||
>
|
||||
{items}
|
||||
{showAllButton}
|
||||
{ items }
|
||||
{ addReactionButton }
|
||||
{ showAllButton }
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1864,6 +1864,7 @@
|
|||
"You sent a verification request": "You sent a verification request",
|
||||
"Error decrypting video": "Error decrypting video",
|
||||
"Error processing voice message": "Error processing voice message",
|
||||
"Add reaction": "Add reaction",
|
||||
"Show all": "Show all",
|
||||
"Reactions": "Reactions",
|
||||
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
|
||||
|
|
Loading…
Reference in a new issue