From e7591565f33a3fd7f050e9657cf13e960e09f040 Mon Sep 17 00:00:00 2001
From: noellabo <noel.yoshiba@gmail.com>
Date: Sat, 18 Jan 2020 16:31:24 +0900
Subject: [PATCH] Add a post visibility icon
---
.../status/components/detailed_status.js | 2 +-
.../styles/mastodon/components.scss | 55 +++++++++++++++++++
2 files changed, 56 insertions(+), 1 deletion(-)
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 307d9dbc45..22118f8eaf 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 b4aec09f02..087e433b20 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;
--
GitLab