From 43c2b00cf866bea2f49cc3b7e0f488edefa37e09 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sun, 18 Nov 2018 22:47:21 +0900
Subject: [PATCH] Show visibility in note-detail (#3308)

* Show visibility in note-detail

* fix
---
 .../desktop/views/components/note-detail.vue  | 108 +++++++++++-------
 .../mobile/views/components/note-detail.vue   |  95 ++++++++-------
 2 files changed, 119 insertions(+), 84 deletions(-)

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index eca9896877..ffd2bbdd61 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -2,7 +2,7 @@
 <div class="mk-note-detail" :title="title">
 	<button
 		class="read-more"
-		v-if="p.reply && p.reply.replyId && conversation.length == 0"
+		v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
 		:title="$t('title')"
 		@click="fetchConversation"
 		:disabled="conversationFetching"
@@ -13,8 +13,8 @@
 	<div class="conversation">
 		<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
 	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
+	<div class="reply-to" v-if="appearNote.reply">
+		<x-sub :note="appearNote.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
@@ -28,50 +28,61 @@
 		</p>
 	</div>
 	<article>
-		<mk-avatar class="avatar" :user="p.user"/>
+		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<header>
-			<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
-			<span class="username"><mk-acct :user="p.user"/></span>
-			<router-link class="time" :to="p | notePage">
-				<mk-time :time="p.createdAt"/>
-			</router-link>
+			<router-link class="name" :to="appearNote.user | userPage" v-user-preview="appearNote.user.id">{{ appearNote.user | userName }}</router-link>
+			<span class="username"><mk-acct :user="appearNote.user"/></span>
+			<div class="info">
+				<router-link class="time" :to="appearNote | notePage">
+					<mk-time :time="appearNote.createdAt"/>
+				</router-link>
+				<div class="visibility-info">
+					<span class="visibility" v-if="appearNote.visibility != 'public'">
+						<fa v-if="appearNote.visibility == 'home'" icon="home"/>
+						<fa v-if="appearNote.visibility == 'followers'" icon="unlock"/>
+						<fa v-if="appearNote.visibility == 'specified'" icon="envelope"/>
+						<fa v-if="appearNote.visibility == 'private'" icon="lock"/>
+					</span>
+					<span class="localOnly" v-if="appearNote.localOnly == true"><fa icon="heart"/></span>
+				</div>
+			</div>
 		</header>
 		<div class="body">
-			<p v-if="p.cw != null" class="cw">
-				<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+			<p v-if="appearNote.cw != null" class="cw">
+				<span class="text" v-if="appearNote.cw != ''">{{ appearNote.cw }}</span>
 				<mk-cw-button v-model="showContent"/>
 			</p>
-			<div class="content" v-show="p.cw == null || showContent">
+			<div class="content" v-show="appearNote.cw == null || showContent">
 				<div class="text">
-					<span v-if="p.isHidden" style="opacity: 0.5">{{ $t('private') }}</span>
-					<span v-if="p.deletedAt" style="opacity: 0.5">{{ $t('deleted') }}</span>
-					<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i" :customEmojis="p.emojis" />
+					<span v-if="appearNote.isHidden" style="opacity: 0.5">{{ $t('private') }}</span>
+					<span v-if="appearNote.deletedAt" style="opacity: 0.5">{{ $t('deleted') }}</span>
+					<misskey-flavored-markdown v-if="appearNote.text" :text="appearNote.text" :i="$store.state.i" :customEmojis="appearNote.emojis" />
 				</div>
-				<div class="files" v-if="p.files.length > 0">
-					<mk-media-list :media-list="p.files" :raw="true"/>
+				<div class="files" v-if="appearNote.files.length > 0">
+					<mk-media-list :media-list="appearNote.files" :raw="true"/>
 				</div>
-				<mk-poll v-if="p.poll" :note="p"/>
+				<mk-poll v-if="appearNote.poll" :note="appearNote"/>
 				<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
-				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> {{ $t('location') }}</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
+				<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> {{ $t('location') }}</a>
+				<div class="map" v-if="appearNote.geo" ref="map"></div>
+				<div class="renote" v-if="appearNote.renote">
+					<mk-note-preview :note="appearNote.renote"/>
 				</div>
 			</div>
 		</div>
 		<footer>
 			<span class="app" v-if="note.app && $store.state.settings.showVia">via <b>{{ note.app.name }}</b></span>
-			<mk-reactions-viewer :note="p"/>
+			<mk-reactions-viewer :note="appearNote"/>
 			<button class="replyButton" @click="reply" :title="$t('reply')">
-				<template v-if="p.reply"><fa icon="reply-all"/></template>
+				<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
 				<template v-else><fa icon="reply"/></template>
-				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 			</button>
 			<button class="renoteButton" @click="renote" :title="$t('renote')">
-				<fa icon="retweet"/><p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 			</button>
-			<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" :title="$t('add-reaction')">
-				<fa icon="plus"/><p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react" ref="reactButton" :title="$t('add-reaction')">
+				<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
 			</button>
 			<button @click="menu" ref="menuButton">
 				<fa icon="ellipsis-h"/>
@@ -132,23 +143,23 @@ export default Vue.extend({
 				this.note.poll == null);
 		},
 
-		p(): any {
+		appearNote(): any {
 			return this.isRenote ? this.note.renote : this.note;
 		},
 
 		reactionsCount(): number {
-			return this.p.reactionCounts
-				? sum(Object.values(this.p.reactionCounts))
+			return this.appearNote.reactionCounts
+				? sum(Object.values(this.appearNote.reactionCounts))
 				: 0;
 		},
 
 		title(): string {
-			return new Date(this.p.createdAt).toLocaleString();
+			return new Date(this.appearNote.createdAt).toLocaleString();
 		},
 
 		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
+			if (this.appearNote.text) {
+				const ast = parse(this.appearNote.text);
 				return unique(ast
 					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 					.map(t => t.url));
@@ -162,7 +173,7 @@ export default Vue.extend({
 		// Get replies
 		if (!this.compact) {
 			this.$root.api('notes/replies', {
-				noteId: this.p.id,
+				noteId: this.appearNote.id,
 				limit: 8
 			}).then(replies => {
 				this.replies = replies;
@@ -170,11 +181,11 @@ export default Vue.extend({
 		}
 
 		// Draw map
-		if (this.p.geo) {
+		if (this.appearNote.geo) {
 			const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.showMaps : true;
 			if (shouldShowMap) {
 				this.$root.os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const uluru = new maps.LatLng(this.appearNote.geo.coordinates[1], this.appearNote.geo.coordinates[0]);
 					const map = new maps.Map(this.$refs.map, {
 						center: uluru,
 						zoom: 15
@@ -194,7 +205,7 @@ export default Vue.extend({
 
 			// Fetch conversation
 			this.$root.api('notes/conversation', {
-				noteId: this.p.replyId
+				noteId: this.appearNote.replyId
 			}).then(conversation => {
 				this.conversationFetching = false;
 				this.conversation = conversation.reverse();
@@ -203,27 +214,27 @@ export default Vue.extend({
 
 		reply() {
 			this.$root.new(MkPostFormWindow, {
-				reply: this.p
+				reply: this.appearNote
 			});
 		},
 
 		renote() {
 			this.$root.new(MkRenoteFormWindow, {
-				note: this.p
+				note: this.appearNote
 			});
 		},
 
 		react() {
 			this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.p
+				note: this.appearNote
 			});
 		},
 
 		menu() {
 			this.$root.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				note: this.p
+				note: this.appearNote
 			});
 		}
 	}
@@ -335,12 +346,21 @@ export default Vue.extend({
 				margin 0
 				color var(--noteHeaderAcct)
 
-			> .time
+			> .info
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color var(--noteHeaderInfo)
+
+				> .time
+					color var(--noteHeaderInfo)
+
+				> .visibility-info
+					text-align: right
+					color var(--noteHeaderInfo)
+
+					> .localOnly
+						margin-left 4px
 
 		> .body
 			padding 8px 0
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 001ffc5da8..daffebc219 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -2,7 +2,7 @@
 <div class="mk-note-detail">
 	<button
 		class="more"
-		v-if="p.reply && p.reply.replyId && conversation.length == 0"
+		v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
 		@click="fetchConversation"
 		:disabled="conversationFetching"
 	>
@@ -12,8 +12,8 @@
 	<div class="conversation">
 		<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
 	</div>
-	<div class="reply-to" v-if="p.reply">
-		<x-sub :note="p.reply"/>
+	<div class="reply-to" v-if="appearNote.reply">
+		<x-sub :note="appearNote.reply"/>
 	</div>
 	<div class="renote" v-if="isRenote">
 		<p>
@@ -28,50 +28,59 @@
 	</div>
 	<article>
 		<header>
-			<mk-avatar class="avatar" :user="p.user"/>
+			<mk-avatar class="avatar" :user="appearNote.user"/>
 			<div>
-				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
-				<span class="username"><mk-acct :user="p.user"/></span>
+				<router-link class="name" :to="appearNote.user | userPage">{{ appearNote.user | userName }}</router-link>
+				<span class="username"><mk-acct :user="appearNote.user"/></span>
 			</div>
 		</header>
 		<div class="body">
-			<p v-if="p.cw != null" class="cw">
-				<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
+			<p v-if="appearNote.cw != null" class="cw">
+				<span class="text" v-if="appearNote.cw != ''">{{ appearNote.cw }}</span>
 				<mk-cw-button v-model="showContent"/>
 			</p>
-			<div class="content" v-show="p.cw == null || showContent">
+			<div class="content" v-show="appearNote.cw == null || showContent">
 				<div class="text">
-					<span v-if="p.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
-					<span v-if="p.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
-					<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i" :customEmojis="p.emojis"/>
+					<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
+					<span v-if="appearNote.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
+					<misskey-flavored-markdown v-if="appearNote.text" :text="appearNote.text" :i="$store.state.i" :customEmojis="appearNote.emojis"/>
 				</div>
-				<div class="files" v-if="p.files.length > 0">
-					<mk-media-list :media-list="p.files" :raw="true"/>
+				<div class="files" v-if="appearNote.files.length > 0">
+					<mk-media-list :media-list="appearNote.files" :raw="true"/>
 				</div>
-				<mk-poll v-if="p.poll" :note="p"/>
+				<mk-poll v-if="appearNote.poll" :note="appearNote"/>
 				<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
-				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> {{ $t('location') }}</a>
-				<div class="map" v-if="p.geo" ref="map"></div>
-				<div class="renote" v-if="p.renote">
-					<mk-note-preview :note="p.renote"/>
+				<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> {{ $t('location') }}</a>
+				<div class="map" v-if="appearNote.geo" ref="map"></div>
+				<div class="renote" v-if="appearNote.renote">
+					<mk-note-preview :note="appearNote.renote"/>
 				</div>
 			</div>
 		</div>
-		<router-link class="time" :to="p | notePage">
-			<mk-time :time="p.createdAt" mode="detail"/>
+		<router-link class="time" :to="appearNote | notePage">
+			<mk-time :time="appearNote.createdAt" mode="detail"/>
 		</router-link>
+		<div class="visibility-info">
+			<span class="visibility" v-if="appearNote.visibility != 'public'">
+				<fa v-if="appearNote.visibility == 'home'" icon="home"/>
+				<fa v-if="appearNote.visibility == 'followers'" icon="unlock"/>
+				<fa v-if="appearNote.visibility == 'specified'" icon="envelope"/>
+				<fa v-if="appearNote.visibility == 'private'" icon="lock"/>
+			</span>
+			<span class="localOnly" v-if="appearNote.localOnly == true"><fa icon="heart"/></span>
+		</div>
 		<footer>
-			<mk-reactions-viewer :note="p"/>
+			<mk-reactions-viewer :note="appearNote"/>
 			<button @click="reply" :title="$t('title')">
-				<template v-if="p.reply"><fa icon="reply-all"/></template>
+				<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
 				<template v-else><fa icon="reply"/></template>
-				<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
+				<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 			</button>
 			<button @click="renote" title="Renote">
-				<fa icon="retweet"/><p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
+				<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 			</button>
-			<button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" :title="$t('title')">
-				<fa icon="plus"/><p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
+			<button :class="{ reacted: appearNote.myReaction != null }" @click="react" ref="reactButton" :title="$t('title')">
+				<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
 			</button>
 			<button @click="menu" ref="menuButton">
 				<fa icon="ellipsis-h"/>
@@ -130,19 +139,19 @@ export default Vue.extend({
 				this.note.poll == null);
 		},
 
-		p(): any {
+		appearNote(): any {
 			return this.isRenote ? this.note.renote : this.note;
 		},
 
 		reactionsCount(): number {
-			return this.p.reactionCounts
-				? sum(Object.values(this.p.reactionCounts))
+			return this.appearNote.reactionCounts
+				? sum(Object.values(this.appearNote.reactionCounts))
 				: 0;
 		},
 
 		urls(): string[] {
-			if (this.p.text) {
-				const ast = parse(this.p.text);
+			if (this.appearNote.text) {
+				const ast = parse(this.appearNote.text);
 				return unique(ast
 					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
 					.map(t => t.url));
@@ -156,7 +165,7 @@ export default Vue.extend({
 		// Get replies
 		if (!this.compact) {
 			this.$root.api('notes/replies', {
-				noteId: this.p.id,
+				noteId: this.appearNote.id,
 				limit: 8
 			}).then(replies => {
 				this.replies = replies;
@@ -164,11 +173,11 @@ export default Vue.extend({
 		}
 
 		// Draw map
-		if (this.p.geo) {
+		if (this.appearNote.geo) {
 			const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.showMaps : true;
 			if (shouldShowMap) {
 				this.$root.os.getGoogleMaps().then(maps => {
-					const uluru = new maps.LatLng(this.p.geo.coordinates[1], this.p.geo.coordinates[0]);
+					const uluru = new maps.LatLng(this.appearNote.geo.coordinates[1], this.appearNote.geo.coordinates[0]);
 					const map = new maps.Map(this.$refs.map, {
 						center: uluru,
 						zoom: 15
@@ -188,7 +197,7 @@ export default Vue.extend({
 
 			// Fetch conversation
 			this.$root.api('notes/conversation', {
-				noteId: this.p.replyId
+				noteId: this.appearNote.replyId
 			}).then(conversation => {
 				this.conversationFetching = false;
 				this.conversation = conversation.reverse();
@@ -197,20 +206,20 @@ export default Vue.extend({
 
 		reply() {
 			this.$post({
-				reply: this.p
+				reply: this.appearNote
 			});
 		},
 
 		renote() {
 			this.$post({
-				renote: this.p
+				renote: this.appearNote
 			});
 		},
 
 		react() {
 			this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.p,
+				note: this.appearNote,
 				compact: true,
 				big: true
 			});
@@ -219,7 +228,7 @@ export default Vue.extend({
 		menu() {
 			this.$root.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				note: this.p,
+				note: this.appearNote,
 				compact: true
 			});
 		}
@@ -400,6 +409,12 @@ export default Vue.extend({
 			font-size 16px
 			color var(--noteHeaderInfo)
 
+		> .visibility-info
+			color var(--noteHeaderInfo)
+
+			> .localOnly
+				margin-left 4px
+
 		> footer
 			font-size 1.2em