imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak alignment of reactions row, move add reaction to right and only show on hover

Browse source
This commit is contained in:
Michael Telatynski 2021-05-13 13:32:38 +01:00
parent b5fa4d88bf
commit 36633ec025
3 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,10 +20,11 @@ limitations under the License.
.mx_ReactionsRow_addReactionButton { .mx_ReactionsRow_addReactionButton {
position: relative; position: relative;
display: inline-block; display: none;
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: sub; vertical-align: middle;
margin-left: 6px;
&::before { &::before {
content: ''; content: '';
@ -39,12 +40,16 @@ limitations under the License.
} }
} }
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
display: inline-block;
}
.mx_ReactionsRow_showAll { .mx_ReactionsRow_showAll {
text-decoration: none; text-decoration: none;
font-size: $font-10px; font-size: $font-10px;
font-weight: 600; font-weight: 600;
margin-left: 6px; margin-left: 6px;
vertical-align: top; vertical-align: middle;
&:hover, &:hover,
&:link, &:link,

5
res/css/views/messages/_ReactionsRowButton.scss
View file

@ -16,14 +16,15 @@ limitations under the License.
.mx_ReactionsRowButton { .mx_ReactionsRowButton {
display: inline-flex; display: inline-flex;
line-height: $font-21px; line-height: $font-20px;
margin-right: 6px; margin-right: 6px;
padding: 0 6px; padding: 1px 6px;
border: 1px solid $reaction-row-button-border-color; border: 1px solid $reaction-row-button-border-color;
border-radius: 10px; border-radius: 10px;
background-color: $reaction-row-button-bg-color; background-color: $reaction-row-button-bg-color;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
vertical-align: middle;
&:hover { &:hover {
border-color: $reaction-row-button-hover-border-color; border-color: $reaction-row-button-hover-border-color;

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

@ -192,8 +192,8 @@ export default class ReactionsRow extends React.PureComponent {
aria-label={_t("Reactions")} aria-label={_t("Reactions")}
> >
{ items } { items }
{ addReactionButton }
{ showAllButton } { showAllButton }
{ addReactionButton }
</div>; </div>;
} }
} }