OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #6045 from matrix-org/t3chguy/fix/17318 

Fix edge cases with the new add reactions prompt button
pull/21833/head
Michael Telatynski 2021-05-17 11:44:55 +01:00 committed by GitHub
parent b06514273f 6e5847ea6b
commit 6d06326bce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/messages/_ReactionsRow.scss
View File

@ -20,7 +20,8 @@ limitations under the License.
.mx_ReactionsRow_addReactionButton { .mx_ReactionsRow_addReactionButton {
position: relative; position: relative;
display: none; // show on hover of the .mx_EventTile display: inline-block;
visibility: hidden; // show on hover of the .mx_EventTile
width: 24px; width: 24px;
height: 24px; height: 24px;
vertical-align: middle; vertical-align: middle;
@ -39,7 +40,7 @@ limitations under the License.
} }
&.mx_ReactionsRow_addReactionButton_active { &.mx_ReactionsRow_addReactionButton_active {
display: inline-block; // keep showing whilst the context menu is shown visibility: visible; // keep showing whilst the context menu is shown
} }
&:hover, &.mx_ReactionsRow_addReactionButton_active { &:hover, &.mx_ReactionsRow_addReactionButton_active {
@ -51,7 +52,7 @@ limitations under the License.
} }
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton { .mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
display: inline-block; visibility: visible;
} }
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {

6
src/components/views/messages/ReactionsRow.tsx
View File

@ -50,6 +50,10 @@ const ReactButton = ({ mxEvent, reactions }: IProps) => {
})} })}
title={_t("Add reaction")} title={_t("Add reaction")}
onClick={openMenu} onClick={openMenu}
onContextMenu={e => {
e.preventDefault();
openMenu();
}}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
inputRef={button} inputRef={button}
/> />
@ -174,6 +178,8 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
/>; />;
}).filter(item => !!item); }).filter(item => !!item);
if (!items.length) return null;
// Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items. // Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
// The "+ 1" ensure that the "show all" reveals something that takes up // The "+ 1" ensure that the "show all" reveals something that takes up
// more space than the button itself. // more space than the button itself.