Refactoring

6 files changed, 120 insertions, 208 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index ace9eaf44f..8569e2cf10 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -10,6 +10,7 @@ import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
 import noteHeader from './note-header.vue';
+import renote from './renote.vue';
 import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
@@ -53,6 +54,7 @@ Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
 Vue.component('mk-note-header', noteHeader);
+Vue.component('mk-renote', renote);
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
 Vue.component('mk-forkit', forkit);
diff --git a/src/client/app/common/views/components/renote.vue b/src/client/app/common/views/components/renote.vue
new file mode 100644
index 0000000000..523ca97c41
--- /dev/null
+++ b/src/client/app/common/views/components/renote.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="puqkfets" :class="{ mini }">
+	<mk-avatar class="avatar" :user="note.user"/>
+	<fa icon="retweet"/>
+	<i18n path="@.renoted-by" tag="span">
+		<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">{{ note.user | userName }}</router-link>
+	</i18n>
+	<div class="info">
+		<mk-time :time="note.createdAt"/>
+		<span class="visibility" v-if="note.visibility != 'public'">
+			<fa v-if="note.visibility == 'home'" icon="home"/>
+			<fa v-if="note.visibility == 'followers'" icon="unlock"/>
+			<fa v-if="note.visibility == 'specified'" icon="envelope"/>
+			<fa v-if="note.visibility == 'private'" icon="lock"/>
+		</span>
+		<span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n(),
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.puqkfets
+	display flex
+	align-items center
+	padding 16px 32px 8px 32px
+	line-height 28px
+	white-space pre
+	color var(--renoteText)
+	background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
+
+	&.mini
+		padding 8px 16px
+
+		@media (min-width 500px)
+			padding 16px
+
+		@media (min-width 600px)
+			padding 16px 32px
+
+		> .avatar
+			@media (min-width 500px)
+				width 28px
+				height 28px
+
+	> .avatar
+		flex-shrink 0
+		display inline-block
+		width 28px
+		height 28px
+		margin 0 8px 0 0
+		border-radius 6px
+
+	> [data-icon]
+		margin-right 4px
+
+	> span
+		overflow hidden
+		flex-shrink 1
+		text-overflow ellipsis
+		white-space nowrap
+
+		> .name
+			font-weight bold
+
+	> .info
+		margin-left auto
+		font-size 0.9em
+
+		> .mk-time
+			display block
+			margin-left auto
+			flex-shrink 0
+
+		> .visibility
+			margin-left 8px
+
+			[data-icon]
+				margin-right 0
+
+		> .localOnly
+			margin-left 4px
+
+			[data-icon]
+				margin-right 0
+
+</style>
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index ffd2bbdd61..88108d961f 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -16,17 +16,7 @@
 	<div class="reply-to" v-if="appearNote.reply">
 		<x-sub :note="appearNote.reply"/>
 	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<mk-avatar class="avatar" :user="note.user"/>
-			<fa icon="retweet"/>
-			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
-			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
-			<span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
-			<mk-time :time="note.createdAt"/>
-		</p>
-	</div>
+	<mk-renote class="renote" v-if="isRenote" :note="note"/>
 	<article>
 		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<header>
@@ -277,29 +267,8 @@ export default Vue.extend({
 		> *
 			border-bottom 1px solid var(--faceDivider)
 
-	> .renote
-		color var(--renoteText)
-		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar
-				display inline-block
-				width 28px
-				height 28px
-				margin 0 8px 0 0
-				border-radius 6px
-
-			[data-icon]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
+	> .renote + article
+		padding-top 8px
 
 	> .reply-to
 		border-bottom 1px solid var(--faceDivider)
diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index 71d7ae4203..26615b16a6 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -13,21 +13,7 @@
 	<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
 		<x-sub :note="appearNote.reply" :mini="mini"/>
 	</div>
-	<div class="renote" v-if="isRenote">
-		<mk-avatar class="avatar" :user="note.user"/>
-		<fa icon="retweet"/>
-		<span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
-		<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-		<span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
-		<mk-time :time="note.createdAt"/>
-		<span class="visibility" v-if="note.visibility != 'public'">
-			<fa v-if="note.visibility == 'home'" icon="home"/>
-			<fa v-if="note.visibility == 'followers'" icon="unlock"/>
-			<fa v-if="note.visibility == 'specified'" icon="envelope"/>
-			<fa v-if="note.visibility == 'private'" icon="lock"/>
-		</span>
-		<span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
-	</div>
+	<mk-renote class="renote" v-if="isRenote" :note="note"/>
 	<article>
 		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
@@ -185,56 +171,8 @@ export default Vue.extend({
 			border 2px solid var(--primaryAlpha03)
 			border-radius 4px
 
-	> .renote
-		display flex
-		align-items center
-		padding 16px 32px 8px 32px
-		line-height 28px
-		white-space pre
-		color var(--renoteText)
-		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
-		.avatar
-			flex-shrink 0
-			display inline-block
-			width 28px
-			height 28px
-			margin 0 8px 0 0
-			border-radius 6px
-
-		[data-icon]
-			margin-right 4px
-
-		> span
-			flex-shrink 0
-
-		.name
-			overflow hidden
-			flex-shrink 1
-			text-overflow ellipsis
-			white-space nowrap
-			font-weight bold
-
-		> .mk-time
-			display block
-			margin-left auto
-			flex-shrink 0
-			font-size 0.9em
-
-		> .visibility
-			margin-left 8px
-
-			[data-icon]
-				margin-right 0
-
-		> .localOnly
-			margin-left 4px
-
-			[data-icon]
-				margin-right 0
-
-		& + article
-			padding-top 8px
+	> .renote + article
+		padding-top 8px
 
 	> article
 		display flex
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index daffebc219..f24cc0916f 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -15,17 +15,7 @@
 	<div class="reply-to" v-if="appearNote.reply">
 		<x-sub :note="appearNote.reply"/>
 	</div>
-	<div class="renote" v-if="isRenote">
-		<p>
-			<mk-avatar class="avatar" :user="note.user"/>
-			<fa icon="retweet"/>
-			<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
-			<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
-			<span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
-			<mk-time :time="note.createdAt"/>
-		</p>
-	</div>
+	<mk-renote class="renote" v-if="isRenote" :note="note" mini/>
 	<article>
 		<header>
 			<mk-avatar class="avatar" :user="appearNote.user"/>
@@ -277,29 +267,8 @@ export default Vue.extend({
 		> *
 			border-bottom 1px solid var(--faceDivider)
 
-	> .renote
-		color var(--renoteText)
-		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
-		> p
-			margin 0
-			padding 16px 32px
-
-			.avatar
-				display inline-block
-				width 28px
-				height 28px
-				margin 0 8px 0 0
-				border-radius 6px
-
-			[data-icon]
-				margin-right 4px
-
-			.name
-				font-weight bold
-
-		& + article
-			padding-top 8px
+	> .renote + article
+		padding-top 8px
 
 	> .reply-to
 		border-bottom 1px solid var(--faceDivider)
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 5b34cfb070..42fb7118f8 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -9,21 +9,7 @@
 	<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
 		<x-sub :note="appearNote.reply"/>
 	</div>
-	<div class="renote" v-if="isRenote">
-		<mk-avatar class="avatar" :user="note.user"/>
-		<fa icon="retweet"/>
-		<span>{{ this.$t('reposted-by').substr(0, this.$t('reposted-by').indexOf('{')) }}</span>
-		<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-		<span>{{ this.$t('reposted-by').substr(this.$t('reposted-by').indexOf('}') + 1) }}</span>
-		<mk-time :time="note.createdAt"/>
-		<span class="visibility" v-if="note.visibility != 'public'">
-			<fa v-if="note.visibility == 'home'" icon="home"/>
-			<fa v-if="note.visibility == 'followers'" icon="unlock"/>
-			<fa v-if="note.visibility == 'specified'" icon="envelope"/>
-			<fa v-if="note.visibility == 'private'" icon="lock"/>
-		</span>
-		<span class="localOnly" v-if="note.localOnly == true"><fa icon="heart"/></span>
-	</div>
+	<mk-renote class="renote" v-if="isRenote" :note="note" mini/>
 	<article>
 		<mk-avatar class="avatar" :user="appearNote.user" v-if="$store.state.device.postStyle != 'smart'"/>
 		<div class="main">
@@ -138,66 +124,8 @@ export default Vue.extend({
 					align-items center
 					margin-bottom 4px
 
-	> .renote
-		display flex
-		align-items center
-		padding 8px 16px
-		line-height 28px
-		white-space pre
-		color var(--renoteText)
-		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
-
-		@media (min-width 500px)
-			padding 16px
-
-		@media (min-width 600px)
-			padding 16px 32px
-
-		.avatar
-			flex-shrink 0
-			display inline-block
-			width 20px
-			height 20px
-			margin 0 8px 0 0
-			border-radius 6px
-
-			@media (min-width 500px)
-				width 28px
-				height 28px
-
-		[data-icon]
-			margin-right 4px
-
-		> span
-			flex-shrink 0
-
-		.name
-			overflow hidden
-			flex-shrink 1
-			text-overflow ellipsis
-			white-space nowrap
-			font-weight bold
-
-		> .mk-time
-			display block
-			margin-left auto
-			flex-shrink 0
-			font-size 0.9em
-
-		> .visibility
-			margin-left 8px
-
-			[data-icon]
-				margin-right 0
-
-		> .localOnly
-			margin-left 4px
-
-			[data-icon]
-				margin-right 0
-
-		& + article
-			padding-top 8px
+	> .renote + article
+		padding-top 8px
 
 	> article
 		display flex