[Glitch] Fix conversations not having an unread indicator in web UI
Fix d15b346826
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
parent
df04f885a5
commit
9de10c16d7
|
@ -12,6 +12,7 @@ import IconButton from 'flavours/glitch/components/icon_button';
|
||||||
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
|
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
|
||||||
import { HotKeys } from 'react-hotkeys';
|
import { HotKeys } from 'react-hotkeys';
|
||||||
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
|
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
more: { id: 'status.more', defaultMessage: 'More' },
|
more: { id: 'status.more', defaultMessage: 'More' },
|
||||||
|
@ -193,7 +194,7 @@ class Conversation extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HotKeys handlers={handlers}>
|
<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'>
|
<div className='conversation__avatar'>
|
||||||
<AvatarComposite accounts={accounts} size={48} />
|
<AvatarComposite accounts={accounts} size={48} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -201,7 +202,7 @@ class Conversation extends ImmutablePureComponent {
|
||||||
<div className='conversation__content'>
|
<div className='conversation__content'>
|
||||||
<div className='conversation__content__info'>
|
<div className='conversation__content__info'>
|
||||||
<div className='conversation__content__relative-time'>
|
<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>
|
||||||
|
|
||||||
<div className='conversation__content__names' ref={this.setNamesRef}>
|
<div className='conversation__content__names' ref={this.setNamesRef}>
|
||||||
|
|
|
@ -1507,6 +1507,16 @@
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-top: 12px;
|
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 {
|
&__content {
|
||||||
|
@ -1554,6 +1564,22 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui .flash-message {
|
.ui .flash-message {
|
||||||
|
|
Loading…
Reference in New Issue