wip

src/web/app/common/views/components/index.ts

@@ -12,6 +12,7 @@ import images from './images.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
+import ellipsis from './ellipsis.vue';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -25,3 +26,4 @@ Vue.component('mk-images', images);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
+Vue.component('mk-ellipsis', ellipsis);

src/web/app/common/views/components/time.vue

@@ -1,5 +1,5 @@
 <template>
-<time>
+<time class="mk-time">
 	<span v-if=" mode == 'relative' ">{{ relative }}</span>
 	<span v-if=" mode == 'absolute' ">{{ absolute }}</span>
 	<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>

src/web/app/desktop/views/components/post-preview.vue

@@ -6,7 +6,7 @@
 	<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>
+			<span class="username">@{{ post.user.username }}</span>
 			<a class="time" :href="`/${post.user.username}/${post.id}`">
 			<mk-time :time="post.created_at"/></a>
 		</header>
@@ -31,78 +31,72 @@ export default Vue.extend({
 });
 </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
 
-		&:after
+	&:hover
-			content ""
+		> .main > footer > button
+			color #888
+
+	> .avatar-anchor
+		display block
+		float left
+		margin 0 16px 0 0
+
+		> .avatar
 			display block
-			clear both
+			width 52px
+			height 52px
+			margin 0
+			border-radius 8px
+			vertical-align bottom
 
-		&:hover
+	> .main
-			> .main > footer > button
+		float left
-				color #888
+		width calc(100% - 68px)
 
-		> .avatar-anchor
+		> header
-			display block
+			display flex
-			float left
+			margin 4px 0
-			margin 0 16px 0 0
+			white-space nowrap
 
-			> .avatar
+			> .name
-				display block
+				margin 0 .5em 0 0
-				width 52px
+				padding 0
-				height 52px
+				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
-				border-radius 8px
+				padding 0
-				vertical-align bottom
+				font-size 1.1em
-
+				color #717171
-		> .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>

src/web/app/desktop/views/components/repost-form-window.vue

@@ -1,9 +1,7 @@
 <template>
 <mk-window ref="window" is-modal @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:retweet%%i18n:desktop.tags.mk-repost-form-window.title%</span>
-	<div slot="content">
+	<mk-repost-form ref="form" :post="post" @posted="onPosted" @canceled="onCanceled"/>
-		<mk-repost-form ref="form" :post="post" @posted="$refs.window.close" @canceled="$refs.window.close"/>
-	</div>
 </mk-window>
 </template>
 
@@ -25,6 +23,12 @@ export default Vue.extend({
 					(this.$refs.window as any).close();
 				}
 			}
+		},
+		onPosted() {
+			(this.$refs.window as any).close();
+		},
+		onCanceled() {
+			(this.$refs.window as any).close();
 		}
 	}
 });

src/web/app/desktop/views/components/repost-form.vue

@@ -3,7 +3,7 @@
 	<mk-post-preview :post="post"/>
 	<template v-if="!quote">
 		<footer>
-			<a class="quote" v-if="!quote" @click="onquote">%i18n:desktop.tags.mk-repost-form.quote%</a>
+			<a class="quote" v-if="!quote" @click="onQuote">%i18n:desktop.tags.mk-repost-form.quote%</a>
 			<button class="cancel" @click="cancel">%i18n:desktop.tags.mk-repost-form.cancel%</button>
 			<button class="ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:desktop.tags.mk-repost-form.reposting%' : '%i18n:desktop.tags.mk-repost-form.repost%' }}</button>
 		</footer>
@@ -46,7 +46,9 @@ export default Vue.extend({
 		onQuote() {
 			this.quote = true;
 
-			(this.$refs.form as any).focus();
+			this.$nextTick(() => {
+				(this.$refs.form as any).focus();
+			});
 		},
 		onChildFormPosted() {
 			this.$emit('posted');
@@ -61,9 +63,6 @@ export default Vue.extend({
 	> .mk-post-preview
 		margin 16px 22px
 
-	> div
-		padding 16px
-
 	> footer
 		height 72px
 		background lighten($theme-color, 95%)

src/web/app/desktop/views/directives/user-preview.ts

@@ -55,7 +55,6 @@ export default {
 	},
 	unbind(el, binding, vn) {
 		const self = vn.context._userPreviewDirective_;
-		console.log('unbound:', self.user);
 		clearTimeout(self.showTimer);
 		clearTimeout(self.hideTimer);
 		self.close();