Fix conversations not having an unread indicator in web UI (#12506)

th-downstream
Eugen Rochko 5 years ago committed by GitHub
parent 319875ab04
commit d15b346826

@ -12,6 +12,7 @@ import IconButton from 'mastodon/components/icon_button';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import { HotKeys } from 'react-hotkeys';
import { autoPlayGif } from 'mastodon/initial_state';
import classNames from 'classnames';
const messages = defineMessages({
more: { id: 'status.more', defaultMessage: 'More' },
@ -158,7 +159,7 @@ class Conversation extends ImmutablePureComponent {
return (
<HotKeys handlers={handlers}>
<div className='conversation focusable muted' tabIndex='0'>
<div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex='0'>
<div className='conversation__avatar'>
<AvatarComposite accounts={accounts} size={48} />
</div>
@ -166,7 +167,7 @@ class Conversation extends ImmutablePureComponent {
<div className='conversation__content'>
<div className='conversation__content__info'>
<div className='conversation__content__relative-time'>
<RelativeTimestamp timestamp={lastStatus.get('created_at')} />
{unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
</div>
<div className='conversation__content__names' ref={this.setNamesRef}>

@ -6517,6 +6517,16 @@ noscript {
flex: 0 0 auto;
padding: 10px;
padding-top: 12px;
position: relative;
}
&__unread {
display: inline-block;
background: $highlight-text-color;
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
margin: -.1ex .15em .1ex;
}
&__content {
@ -6564,4 +6574,20 @@ noscript {
word-break: break-word;
}
}
&--unread {
background: lighten($ui-base-color, 2%);
&:focus {
background: lighten($ui-base-color, 4%);
}
.conversation__content__info {
font-weight: 700;
}
.conversation__content__relative-time {
color: $primary-text-color;
}
}
}

Loading…
Cancel
Save