[UI] Move notice headers inside a wrapper; add styling for local-only posts

4 files changed, 38 insertions, 10 deletions

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 4626d1cd8..a94142452 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -676,6 +676,7 @@ class Status extends ImmutablePureComponent {
       'data-status-by': `@${status.getIn(['account', 'acct'])}`,
       'data-nest-level': status.get('nest_level'),
       'data-nest-deep': status.get('nest_level') >= 15,
+      'data-local-only': !!status.get('local_only'),
     };
 
     if (prepend && account) {
diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
index d3e7b8718..f03072ac8 100644
--- a/app/javascript/flavours/glitch/components/status_content.js
+++ b/app/javascript/flavours/glitch/components/status_content.js
@@ -277,7 +277,7 @@ export default class StatusContent extends React.PureComponent {
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
     const edited = (status.get('edited') === 0) ? null : (
-      <div className='status__edit-notice'>
+      <div className='status__notice status__edit-notice'>
         <Icon id='pencil-square-o' />
         <FormattedMessage
           id='status.edited'
@@ -292,7 +292,7 @@ export default class StatusContent extends React.PureComponent {
     );
 
     const unpublished = (status.get('published') === false) && (
-      <div className='status__unpublished-notice'>
+      <div className='status__notice status__unpublished-notice'>
         <Icon id='chain-broken' />
         <FormattedMessage
           id='status.unpublished'
@@ -302,6 +302,25 @@ export default class StatusContent extends React.PureComponent {
       </div>
     );
 
+    const local_only = (status.get('local_only') === true) && (
+      <div className='status__notice status__localonly-notice'>
+        <Icon id='home' />
+        <FormattedMessage
+          id='advanced_options.local-only.short'
+          defaultMessage='Local-only'
+          key={`localonly-${status.get('id')}`}
+        />
+      </div>
+    );
+
+    const status_notice_wrapper = (
+      <div className='status__notice-wrapper'>
+        {unpublished}
+        {edited}
+        {local_only}
+      </div>
+    );
+
     const permissions_present = status.get('domain_permissions') && status.get('domain_permissions').size > 0;
 
     const status_permission_items = permissions_present && status.get('domain_permissions').map((permission) => (
@@ -390,8 +409,7 @@ export default class StatusContent extends React.PureComponent {
 
       return (
         <div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} ref={this.setRef}>
-          {unpublished}
-          {edited}
+          {status_notice_wrapper}
           <p
             style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
           >
@@ -430,8 +448,7 @@ export default class StatusContent extends React.PureComponent {
           tabIndex='0'
           ref={this.setRef}
         >
-          {unpublished}
-          {edited}
+          {status_notice_wrapper}
           <div
             ref={this.setContentsRef}
             key={`contents-${tagLinks}-${rewriteMentions}`}
@@ -451,8 +468,7 @@ export default class StatusContent extends React.PureComponent {
           tabIndex='0'
           ref={this.setRef}
         >
-          {unpublished}
-          {edited}
+          {status_notice_wrapper}
           <div ref={this.setContentsRef} key={`contents-${tagLinks}`} className='status__content__text' dangerouslySetInnerHTML={content} tabIndex='0' />
           {media}
           {permissions}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 0db0316cc..b042a825a 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -255,6 +255,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
       'data-status-by': `@${status.getIn(['account', 'acct'])}`,
       'data-nest-level': status.get('nest_level'),
       'data-nest-deep': status.get('nest_level') >= 15,
+      'data-local-only': !!status.get('local_only'),
     };
 
     return (
diff --git a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
index 17b950651..6c14e2b49 100644
--- a/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/monsterfork/components/status.scss
@@ -1,6 +1,12 @@
-.status__edit-notice, .status__unpublished-notice {
+.status__notice-wrapper {
   margin-bottom: 1em;
+}
+
+.status__notice-wrapper:empty {
+  display: none;
+}
 
+.status__notice {
   & > span {
     color: $dark-text-color;
     line-height: normal;
@@ -8,7 +14,7 @@
     font-size: 12px;
     padding-left: 8px;
     position: relative;
-    bottom: 0.25em;
+    bottom: 0.2em;
   }
 
   & > i {
@@ -66,6 +72,10 @@
       background: lighten($ui-base-color, 4%);
     }
   }
+
+  &[data-local-only="true"] {
+    background: lighten($ui-base-color, 4%);
+  }
 }
 
 div[data-nest-level] {