mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix conversations not having an unread indicator in web UI 

Fix ed73376f1c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1250/head
Eugen Rochko 2019-12-01 07:06:20 +01:00 committed by Thibaut Girka
parent 2f8c4c588b
commit fae7e0cace
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
View File

@ -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}>

26
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -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 {