Refactoring

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