Local only indicator (#6291)

* Add Local only & public indicator

* Add local only & public indicator on renotes


remove visibility conditional

* Cleaner Style

* :v:

* Update note-header.vue

* Update note.vue

Co-authored-by: DW <chocological00@gitlab.com>
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

2 files changed, 17 insertions, 11 deletions

diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 977aae10f6..93cf2cdf39 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -12,18 +12,19 @@
 		<router-link class="created-at" :to="note | notePage">
 			<mk-time :time="note.createdAt"/>
 		</router-link>
-		<span class="visibility" v-if="note.visibility != 'public'">
-			<fa v-if="note.visibility == 'home'" :icon="faHome"/>
-			<fa v-if="note.visibility == 'followers'" :icon="faUnlock"/>
-			<fa v-if="note.visibility == 'specified'" :icon="faEnvelope"/>
+		<span class="visibility" v-if="note.visibility !== 'public'">
+			<fa v-if="note.visibility === 'home'" :icon="faHome"/>
+			<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+			<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 		</span>
+		<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark } from '@fortawesome/free-solid-svg-icons';
+import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
@@ -36,7 +37,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark
+			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
 	}
 });
@@ -97,6 +98,10 @@ export default Vue.extend({
 		> .visibility {
 			margin-left: 8px;
 		}
+
+		> .localOnly {
+			margin-left: 8px;
+		}
 	}
 }
 </style>
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index ab9d60e3ac..fd895ad5ae 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -30,6 +30,7 @@
 				<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
 				<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 			</span>
+			<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
 	<article class="article">
@@ -88,7 +89,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
 import { sum, unique } from '../../prelude/array';
@@ -146,7 +147,7 @@ export default Vue.extend({
 			showContent: false,
 			hideThisNote: false,
 			noteBody: this.$refs.noteBody,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faEllipsisH
+			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faEllipsisH
 		};
 	},
 
@@ -872,10 +873,10 @@ export default Vue.extend({
 
 			> .visibility {
 				margin-left: 8px;
+			}
 
-				[data-icon] {
-					margin-right: 0;
-				}
+			> .localOnly {
+				margin-left: 8px;
 			}
 		}
 	}