bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: replace avatar with unread counter

Browse source
This commit is contained in:
Alex Gleason 2020-08-27 16:41:24 -05:00
parent a3585305f7
commit 22063ae3c8
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/chats/components/chat_panes.js
View file

@ -59,10 +59,10 @@ class ChatPanes extends ImmutablePureComponent {
const mainWindowPane = (
<div className={`pane pane--main pane--${mainWindow}`}>
<div className='pane__header'>
{unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
<button className='pane__title' onClick={this.handleMainWindowToggle}>
<FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
</button>
{unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
</div>
<div className='pane__content'>
<ChatList

6
app/soapbox/features/chats/components/chat_window.js
View file

@ -112,11 +112,13 @@ class ChatWindow extends ImmutablePureComponent {
return (
<div className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }} onMouseOver={this.handleReadChat}>
<div className='pane__header'>
<Avatar account={account} size={18} />
{unreadCount > 0
? <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>
: <Avatar account={account} size={18} />
}
<button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
@{acctFull(account)}
</button>
{unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
<div className='pane__close'>
<IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
</div>

6
app/styles/chats.scss
View file

@ -71,6 +71,12 @@
.icon-with-badge__badge {
position: static;
pointer-events: none;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 7px;
}
}