moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chats: clean up menu icon

This commit is contained in:
Alex Gleason 2020-09-22 17:00:01 -05:00
parent 41eb69ecd1
commit c96c537a52
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/soapbox/features/chats/components/chat_message_list.js
View File

@ -248,6 +248,7 @@ class ChatMessageList extends ImmutablePureComponent {
title={this.getFormattedTimestamp(chatMessage)} title={this.getFormattedTimestamp(chatMessage)}
className='chat-message__bubble' className='chat-message__bubble'
ref={this.setBubbleRef} ref={this.setBubbleRef}
tabIndex={0}
> >
{this.maybeRenderMedia(chatMessage)} {this.maybeRenderMedia(chatMessage)}
<span <span

22
app/styles/chats.scss
View File

@ -146,14 +146,23 @@
max-width: 70%; max-width: 70%;
border-radius: 10px; border-radius: 10px;
background-color: var(--background-color); background-color: var(--background-color);
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: break-spaces; white-space: break-spaces;
position: relative;
a { a {
color: var(--brand-color--hicontrast); color: var(--brand-color--hicontrast);
} }
&:hover,
&:focus,
&:active, {
.chat-message__menu {
opacity: 1;
pointer-events: all;
}
}
} }
&--me .chat-message__bubble { &--me .chat-message__bubble {
@ -164,6 +173,17 @@
&--pending .chat-message__bubble { &--pending .chat-message__bubble {
opacity: 0.5; opacity: 0.5;
} }
&__menu {
position: absolute;
top: -8px;
right: -8px;
background: var(--background-color);
border-radius: 999px;
opacity: 0;
pointer-events: none;
transition: 0.2s;
}
} }
.chat-list { .chat-list {