diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 307d9dbc45ac16b4fb76af8bd0ec2fa09cf72e66..22118f8eaf82da49cbbd7c9d41bab803c7b866de 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -253,7 +253,7 @@ export default class DetailedStatus extends ImmutablePureComponent { return ( <div style={outerStyle}> - <div ref={this.setRef} className={classNames('detailed-status', { compact })}> + <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}> <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'> <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div> <DisplayName account={status.get('account')} localDomain={this.props.domain} /> diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b4aec09f023f919204eb52b34b9458dc852eccdb..087e433b206a03ec45fa56a243bce5ed0bec1b25 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1063,6 +1063,29 @@ } } } + + &-unlisted time::after, + &-private time::after, + &-direct time::after { + display: inline-block; + text-align: center; + width: 14px; + height: 14px; + font: 14px/1 FontAwesome; + margin-left: 4px; + } + + &-unlisted time::after { + content: "\f09C"; + } + + &-private time::after { + content: "\F023"; + } + + &-direct time::after { + content: "\F0E0"; + } } .notification-favourite { @@ -1196,6 +1219,7 @@ .detailed-status { background: lighten($ui-base-color, 4%); padding: 14px 10px; + position: relative; &--flex { display: flex; @@ -1209,6 +1233,37 @@ } } + &-unlisted::before, + &-private::before, + &-direct::before { + display: block; + position: absolute; + width: 14px; + height: 14px; + right: 10px; + top: 20px; + font: 14px/1 FontAwesome; + color: #606984; + } + + &-unlisted .display-name, + &-private .display-name, + &-direct .display-name { + padding-right: 10px; + } + + &-unlisted::before { + content: "\f09C"; + } + + &-private::before { + content: "\F023"; + } + + &-direct::before { + content: "\F0E0"; + } + .status__content { font-size: 19px; line-height: 24px;