PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

tweak reactions row some more, third try lucky

Browse source
This commit is contained in:
Michael Telatynski 2021-05-13 13:59:10 +01:00
parent 36633ec025
commit 87ae47bd61
2 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
res/css/views/messages/_ReactionsRow.scss
View file

@ -20,23 +20,33 @@ limitations under the License.
.mx_ReactionsRow_addReactionButton { .mx_ReactionsRow_addReactionButton {
position: relative; position: relative;
display: none; display: none; // show on hover of the .mx_EventTile
width: 16px; width: 24px;
height: 16px; height: 24px;
vertical-align: middle; vertical-align: middle;
margin-left: 6px; margin-left: 4px;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
mask-size: cover; mask-size: 16px;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
background-color: $tertiary-fg-color; background-color: $tertiary-fg-color;
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg'); mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
} }
&.mx_ReactionsRow_addReactionButton_active {
display: inline-block; // keep showing whilst the context menu is shown
}
&:hover, &.mx_ReactionsRow_addReactionButton_active {
&::before {
background-color: $primary-fg-color;
}
}
} }
} }
@ -46,14 +56,16 @@ limitations under the License.
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {
text-decoration: none; text-decoration: none;
font-size: $font-10px; font-size: $font-12px;
font-weight: 600; line-height: $font-20px;
margin-left: 6px; margin-left: 4px;
vertical-align: middle; vertical-align: middle;
&:hover, &:link, &:visited {
&:link, color: $tertiary-fg-color
&:visited { }
color: $accent-color;
&:hover {
color: $primary-fg-color;
} }
} }

5
src/components/views/messages/ReactionsRow.js
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { EventType } from "matrix-js-sdk/src/@types/event"; import { EventType } from "matrix-js-sdk/src/@types/event";
import classNames from "classnames";
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
@ -43,7 +44,9 @@ const ReactButton = ({ mxEvent, reactions }) => {
return <React.Fragment> return <React.Fragment>
<ContextMenuTooltipButton <ContextMenuTooltipButton
className="mx_ReactionsRow_addReactionButton" className={classNames("mx_ReactionsRow_addReactionButton", {
mx_ReactionsRow_addReactionButton_active: menuDisplayed,
})}
title={_t("Add reaction")} title={_t("Add reaction")}
onClick={openMenu} onClick={openMenu}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}