Add a visibility icon to status

mastodon · Jun 22, 2020 · 81c8b41 · 81c8b41
1 parent c6904c0
commit 81c8b41
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 3 deletions.
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -211,7 +211,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
@@ -1052,6 +1052,29 @@
       }
     }
   }
+
+  &-unlisted .status__relative-time::before,
+  &-private .status__relative-time::before,
+  &-direct .status__relative-time::before {
+      display: inline-block;
+      text-align: center;
+      width: 14px;
+      height: 14px;
+      font: 14px/1 FontAwesome;
+      margin-right: 4px;
+  }
+
+  &-unlisted .status__relative-time::before {
+      content: "\f09C";
+  }
+
+  &-private .status__relative-time::before {
+      content: "\F023";
+  }
+
+  &-direct .status__relative-time::before {
+      content: "\F0E0";
+  }
 }
 
 .notification-favourite {
@@ -1186,6 +1209,7 @@
 .detailed-status {
   background: lighten($ui-base-color, 4%);
   padding: 14px 10px;
+  position: relative;
 
   &--flex {
     display: flex;
@@ -1199,6 +1223,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: 18px;
+  }
+
+  &-unlisted::before {
+      content: "\f09C";
+  }
+
+  &-private::before {
+      content: "\F023";
+  }
+
+  &-direct::before {
+      content: "\F0E0";
+  }
+
   .status__content {
     font-size: 19px;
     line-height: 24px;
@@ -1555,6 +1610,7 @@ a.account__display-name {
 }
 
 .detailed-status .button.logo-button {
+  margin-right: 18px;
   margin-bottom: 15px;
 }
 

diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
@@ -157,6 +157,15 @@ body.rtl {
     left: 0;
   }
 
+  .status {
+    &-unlisted .status__relative-time::before,
+    &-private .status__relative-time::before,
+    &-direct .status__relative-time::before {
+        margin-right: 0;
+        margin-left: 4px;
+    }
+  }
+
   .status__relative-time,
   .activity-stream .status.light .status__header .status__meta {
     float: left;
@@ -194,6 +203,27 @@ body.rtl {
     margin-right: 0;
   }
 
+  .detailed-status {
+    &-unlisted::before,
+    &-private::before,
+    &-direct::before {
+      right: auto;
+      left: 10px;
+    }
+
+    &-unlisted .display-name,
+    &-private .display-name,
+    &-direct .display-name {
+      padding-right: 0;
+      padding-left: 18px;
+    }
+  }
+
+  .detailed-status .button.logo-button {
+    margin-right: 0;
+    margin-left: 18px;
+  }
+
   .detailed-status__display-name .display-name {
     text-align: right;
   }

diff --git a/app/views/statuses/_detailed_status.html.haml b/app/views/statuses/_detailed_status.html.haml
@@ -1,4 +1,4 @@
-.detailed-status.detailed-status--flex
+.detailed-status.detailed-status--flex{ class: "detailed-status-#{status.visibility}" }
   .p-author.h-card
     = link_to ActivityPub::TagManager.instance.url_for(status.account), class: 'detailed-status__display-name u-url', target: stream_link_target, rel: 'noopener' do
       .detailed-status__display-avatar

diff --git a/app/views/statuses/_simple_status.html.haml b/app/views/statuses/_simple_status.html.haml
@@ -1,4 +1,4 @@
-.status
+.status{ class: "status-#{status.visibility}" }
   .status__info
     = link_to ActivityPub::TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener noreferrer' do
       %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)