From c0aec849c3d8c2a545b644f2c346bf61ec9072d8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 12 Feb 2018 19:17:47 +0900
Subject: [PATCH] wip

---
 src/web/app/desktop/-tags/post-preview.tag    |  94 ---------------
 .../desktop/views/components/post-preview.vue | 108 ++++++++++++++++++
 2 files changed, 108 insertions(+), 94 deletions(-)
 delete mode 100644 src/web/app/desktop/-tags/post-preview.tag
 create mode 100644 src/web/app/desktop/views/components/post-preview.vue

diff --git a/src/web/app/desktop/-tags/post-preview.tag b/src/web/app/desktop/-tags/post-preview.tag
deleted file mode 100644
index eb71e5e879..0000000000
--- a/src/web/app/desktop/-tags/post-preview.tag
+++ /dev/null
@@ -1,94 +0,0 @@
-<mk-post-preview title={ title }>
-	<article><a class="avatar-anchor" href={ '/' + post.user.username }><img class="avatar" src={ post.user.avatar_url + '?thumbnail&size=64' } alt="avatar" data-user-preview={ post.user_id }/></a>
-		<div class="main">
-			<header><a class="name" href={ '/' + post.user.username } data-user-preview={ post.user_id }>{ post.user.name }</a><span class="username">@{ post.user.username }</span><a class="time" href={ '/' + post.user.username + '/' + post.id }>
-					<mk-time time={ post.created_at }/></a></header>
-			<div class="body">
-				<mk-sub-post-content class="text" post={ post }/>
-			</div>
-		</div>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			margin 0
-			padding 0
-			font-size 0.9em
-			background #fff
-
-			> article
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				&:hover
-					> .main > footer > button
-						color #888
-
-				> .avatar-anchor
-					display block
-					float left
-					margin 0 16px 0 0
-
-					> .avatar
-						display block
-						width 52px
-						height 52px
-						margin 0
-						border-radius 8px
-						vertical-align bottom
-
-				> .main
-					float left
-					width calc(100% - 68px)
-
-					> header
-						display flex
-						margin 4px 0
-						white-space nowrap
-
-						> .name
-							margin 0 .5em 0 0
-							padding 0
-							color #607073
-							font-size 1em
-							line-height 1.1em
-							font-weight 700
-							text-align left
-							text-decoration none
-							white-space normal
-
-							&:hover
-								text-decoration underline
-
-						> .username
-							text-align left
-							margin 0 .5em 0 0
-							color #d1d8da
-
-						> .time
-							margin-left auto
-							color #b2b8bb
-
-					> .body
-
-						> .text
-							cursor default
-							margin 0
-							padding 0
-							font-size 1.1em
-							color #717171
-
-	</style>
-	<script lang="typescript">
-		import dateStringify from '../../common/scripts/date-stringify';
-
-		this.mixin('user-preview');
-
-		this.post = this.opts.post;
-
-		this.title = dateStringify(this.post.created_at);
-	</script>
-</mk-post-preview>
diff --git a/src/web/app/desktop/views/components/post-preview.vue b/src/web/app/desktop/views/components/post-preview.vue
new file mode 100644
index 0000000000..fc297dccc8
--- /dev/null
+++ b/src/web/app/desktop/views/components/post-preview.vue
@@ -0,0 +1,108 @@
+<template>
+<div class="mk-post-preview" :title="title">
+	<a class="avatar-anchor" :href="`/${post.user.username}`">
+		<img class="avatar" :src="`${post.user.avatar_url}?thumbnail&size=64`" alt="avatar" :v-user-preview="post.user_id"/>
+	</a>
+	<div class="main">
+		<header>
+			<a class="name" :href="`/${post.user.username}`" :v-user-preview="post.user_id">{{ post.user.name }}</a>
+			<span class="username">@{ post.user.username }</span>
+			<a class="time" :href="`/${post.user.username}/${post.id}`">
+			<mk-time :time="post.created_at"/></a>
+		</header>
+		<div class="body">
+			<mk-sub-post-content class="text" :post="post"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import dateStringify from '../../../common/scripts/date-stringify';
+
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		title(): string {
+			return dateStringify(this.post.created_at);
+		}
+	}
+});
+</script>
+
+
+<style lang="stylus" scoped>
+.mk-post-preview
+	display block
+	margin 0
+	padding 0
+	font-size 0.9em
+	background #fff
+
+	> article
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		&:hover
+			> .main > footer > button
+				color #888
+
+		> .avatar-anchor
+			display block
+			float left
+			margin 0 16px 0 0
+
+			> .avatar
+				display block
+				width 52px
+				height 52px
+				margin 0
+				border-radius 8px
+				vertical-align bottom
+
+		> .main
+			float left
+			width calc(100% - 68px)
+
+			> header
+				display flex
+				margin 4px 0
+				white-space nowrap
+
+				> .name
+					margin 0 .5em 0 0
+					padding 0
+					color #607073
+					font-size 1em
+					line-height 1.1em
+					font-weight 700
+					text-align left
+					text-decoration none
+					white-space normal
+
+					&:hover
+						text-decoration underline
+
+				> .username
+					text-align left
+					margin 0 .5em 0 0
+					color #d1d8da
+
+				> .time
+					margin-left auto
+					color #b2b8bb
+
+			> .body
+
+				> .text
+					cursor default
+					margin 0
+					padding 0
+					font-size 1.1em
+					color #717171
+
+</style>