mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 09:46:09 +03:00
Code Issues Projects Releases Packages Wiki Activity

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 {
position: relative;
display: none;
width: 16px;
height: 16px;
display: none; // show on hover of the .mx_EventTile
width: 24px;
height: 24px;
vertical-align: middle;
margin-left: 6px;
margin-left: 4px;
&::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
mask-size: cover;
mask-size: 16px;
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_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 {
text-decoration: none;
font-size: $font-10px;
font-weight: 600;
margin-left: 6px;
font-size: $font-12px;
line-height: $font-20px;
margin-left: 4px;
vertical-align: middle;
&:hover,
&:link,
&:visited {
color: $accent-color;
&:link, &:visited {
color: $tertiary-fg-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 PropTypes from 'prop-types';
import { EventType } from "matrix-js-sdk/src/@types/event";
import classNames from "classnames";
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
@ -43,7 +44,9 @@ const ReactButton = ({ mxEvent, reactions }) => {
return <React.Fragment>
<ContextMenuTooltipButton
className="mx_ReactionsRow_addReactionButton"
className={classNames("mx_ReactionsRow_addReactionButton", {
mx_ReactionsRow_addReactionButton_active: menuDisplayed,
})}
title={_t("Add reaction")}
onClick={openMenu}
isExpanded={menuDisplayed}