wip

30 files changed, 118 insertions, 92 deletions

diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 10d09ce65c..e3f105f586 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -11,6 +11,7 @@ import time from './time.vue';
 import images from './images.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
+import streamIndicator from './stream-indicator.vue';
 
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
@@ -23,3 +24,4 @@ Vue.component('mk-time', time);
 Vue.component('mk-images', images);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
+Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/web/app/common/views/components/messaging.vue b/src/web/app/common/views/components/messaging.vue
index 386e705b01..f45f99b535 100644
--- a/src/web/app/common/views/components/messaging.vue
+++ b/src/web/app/common/views/components/messaging.vue
@@ -180,7 +180,7 @@ export default Vue.extend({
 					padding 16px
 
 					> header
-						> mk-time
+						> .mk-time
 							font-size 1em
 
 					> .avatar
@@ -381,7 +381,7 @@ export default Vue.extend({
 						margin 0 0 0 8px
 						color rgba(0, 0, 0, 0.5)
 
-					> mk-time
+					> .mk-time
 						position absolute
 						top 0
 						right 0
diff --git a/src/web/app/common/views/components/reactions-viewer.vue b/src/web/app/common/views/components/reactions-viewer.vue
index 696aef3350..f6a27d9139 100644
--- a/src/web/app/common/views/components/reactions-viewer.vue
+++ b/src/web/app/common/views/components/reactions-viewer.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 	> span
 		margin-right 8px
 
-		> mk-reaction-icon
+		> .mk-reaction-icon
 			font-size 1.4em
 
 		> span
diff --git a/src/web/app/common/views/components/stream-indicator.vue b/src/web/app/common/views/components/stream-indicator.vue
index 564376bba0..00bd58c1f9 100644
--- a/src/web/app/common/views/components/stream-indicator.vue
+++ b/src/web/app/common/views/components/stream-indicator.vue
@@ -1,74 +1,92 @@
 <template>
-	<div>
-		<p v-if=" stream.state == 'initializing' ">
-			%fa:spinner .pulse%
-			<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
-		</p>
-		<p v-if=" stream.state == 'reconnecting' ">
-			%fa:spinner .pulse%
-			<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
-		</p>
-		<p v-if=" stream.state == 'connected' ">
-			%fa:check%
-			<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
-		</p>
-	</div>
+<div class="mk-stream-indicator" v-if="stream">
+	<p v-if=" stream.state == 'initializing' ">
+		%fa:spinner .pulse%
+		<span>%i18n:common.tags.mk-stream-indicator.connecting%<mk-ellipsis/></span>
+	</p>
+	<p v-if=" stream.state == 'reconnecting' ">
+		%fa:spinner .pulse%
+		<span>%i18n:common.tags.mk-stream-indicator.reconnecting%<mk-ellipsis/></span>
+	</p>
+	<p v-if=" stream.state == 'connected' ">
+		%fa:check%
+		<span>%i18n:common.tags.mk-stream-indicator.connected%</span>
+	</p>
+</div>
 </template>
 
-<script lang="typescript">
-	import * as anime from 'animejs';
-	import Ellipsis from './ellipsis.vue';
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
 
-	export default {
-		props: ['stream'],
-		created() {
+export default Vue.extend({
+	data() {
+		return {
+			stream: null
+		};
+	},
+	created() {
+		this.stream = this.$root.$data.os.stream.borrow();
+
+		this.$root.$data.os.stream.on('connected', this.onConnected);
+		this.$root.$data.os.stream.on('disconnected', this.onDisconnected);
+
+		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
-				this.root.style.opacity = 0;
+				this.$el.style.opacity = '0';
 			}
+		});
+	},
+	beforeDestroy() {
+		this.$root.$data.os.stream.off('connected', this.onConnected);
+		this.$root.$data.os.stream.off('disconnected', this.onDisconnected);
+	},
+	methods: {
+		onConnected() {
+			this.stream = this.$root.$data.os.stream.borrow();
 
-			this.stream.on('_connected_', () => {
-				setTimeout(() => {
-					anime({
-						targets: this.root,
-						opacity: 0,
-						easing: 'linear',
-						duration: 200
-					});
-				}, 1000);
-			});
-
-			this.stream.on('_closed_', () => {
+			setTimeout(() => {
 				anime({
-					targets: this.root,
-					opacity: 1,
+					targets: this.$el,
+					opacity: 0,
 					easing: 'linear',
-					duration: 100
+					duration: 200
 				});
+			}, 1000);
+		},
+		onDisconnected() {
+			this.stream = null;
+
+			anime({
+				targets: this.$el,
+				opacity: 1,
+				easing: 'linear',
+				duration: 100
 			});
 		}
-	};
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
-	> div
+.mk-stream-indicator
+	pointer-events none
+	position fixed
+	z-index 16384
+	bottom 8px
+	right 8px
+	margin 0
+	padding 6px 12px
+	font-size 0.9em
+	color #fff
+	background rgba(0, 0, 0, 0.8)
+	border-radius 4px
+
+	> p
 		display block
-		pointer-events none
-		position fixed
-		z-index 16384
-		bottom 8px
-		right 8px
 		margin 0
-		padding 6px 12px
-		font-size 0.9em
-		color #fff
-		background rgba(0, 0, 0, 0.8)
-		border-radius 4px
-
-		> p
-			display block
-			margin 0
 
-			> [data-fa]
-				margin-right 0.25em
+		> [data-fa]
+			margin-right 0.25em
 
 </style>
diff --git a/src/web/app/common/views/components/widgets/messaging.vue b/src/web/app/common/views/components/widgets/messaging.vue
index 19ef704310..f31acc5c63 100644
--- a/src/web/app/common/views/components/widgets/messaging.vue
+++ b/src/web/app/common/views/components/widgets/messaging.vue
@@ -52,7 +52,7 @@ export default define({
 		> [data-fa]
 			margin-right 4px
 
-	> mk-messaging
+	> .mk-messaging
 		max-height 250px
 		overflow auto
 
diff --git a/src/web/app/desktop/views/components/friends-maker.vue b/src/web/app/desktop/views/components/friends-maker.vue
index add6c10a35..caa5f4913c 100644
--- a/src/web/app/desktop/views/components/friends-maker.vue
+++ b/src/web/app/desktop/views/components/friends-maker.vue
@@ -114,7 +114,7 @@ export default Vue.extend({
 					line-height 16px
 					color #ccc
 
-			> mk-follow-button
+			> .mk-follow-button
 				position absolute
 				top 16px
 				right 16px
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index 7a7438214e..1e4c2bafcd 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -26,6 +26,7 @@ import notifications from './notifications.vue';
 import postForm from './post-form.vue';
 import repostForm from './repost-form.vue';
 import followButton from './follow-button.vue';
+import postPreview from './post-preview.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-ui-header', uiHeader);
@@ -53,3 +54,4 @@ Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', postForm);
 Vue.component('mk-repost-form', repostForm);
 Vue.component('mk-follow-button', followButton);
+Vue.component('mk-post-preview', postPreview);
diff --git a/src/web/app/desktop/views/components/list-user.vue b/src/web/app/desktop/views/components/list-user.vue
index 28304e4755..adaa8f092c 100644
--- a/src/web/app/desktop/views/components/list-user.vue
+++ b/src/web/app/desktop/views/components/list-user.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
 				font-size 1.1em
 				color #717171
 
-	> mk-follow-button
+	> .mk-follow-button
 		position absolute
 		top 16px
 		right 16px
diff --git a/src/web/app/desktop/views/components/notifications.vue b/src/web/app/desktop/views/components/notifications.vue
index d211a933fd..f19766dc84 100644
--- a/src/web/app/desktop/views/components/notifications.vue
+++ b/src/web/app/desktop/views/components/notifications.vue
@@ -197,7 +197,7 @@ export default Vue.extend({
 			&:last-child
 				border-bottom none
 
-			> mk-time
+			> .mk-time
 				display inline
 				position absolute
 				top 16px
diff --git a/src/web/app/desktop/views/components/post-detail-sub.vue b/src/web/app/desktop/views/components/post-detail-sub.vue
index 42f8be3b1c..8d81e6860a 100644
--- a/src/web/app/desktop/views/components/post-detail-sub.vue
+++ b/src/web/app/desktop/views/components/post-detail-sub.vue
@@ -119,7 +119,7 @@ export default Vue.extend({
 				font-size 1em
 				color #717171
 
-				> mk-url-preview
+				> .mk-url-preview
 					margin-top 8px
 
 </style>
diff --git a/src/web/app/desktop/views/components/post-detail.vue b/src/web/app/desktop/views/components/post-detail.vue
index 6c36f06fac..d23043dd40 100644
--- a/src/web/app/desktop/views/components/post-detail.vue
+++ b/src/web/app/desktop/views/components/post-detail.vue
@@ -280,7 +280,7 @@ export default Vue.extend({
 				font-size 1.5em
 				color #717171
 
-				> mk-url-preview
+				> .mk-url-preview
 					margin-top 8px
 
 		> footer
diff --git a/src/web/app/desktop/views/components/posts-post.vue b/src/web/app/desktop/views/components/posts-post.vue
index 2a4c39a97b..e611b2513e 100644
--- a/src/web/app/desktop/views/components/posts-post.vue
+++ b/src/web/app/desktop/views/components/posts-post.vue
@@ -178,6 +178,7 @@ export default Vue.extend({
 		},
 		reply() {
 			document.body.appendChild(new MkPostFormWindow({
+				parent: this,
 				propsData: {
 					reply: this.p
 				}
@@ -185,6 +186,7 @@ export default Vue.extend({
 		},
 		repost() {
 			document.body.appendChild(new MkRepostFormWindow({
+				parent: this,
 				propsData: {
 					post: this.p
 				}
@@ -192,6 +194,7 @@ export default Vue.extend({
 		},
 		react() {
 			document.body.appendChild(new MkReactionPicker({
+				parent: this,
 				propsData: {
 					source: this.$refs.reactButton,
 					post: this.p
@@ -200,6 +203,7 @@ export default Vue.extend({
 		},
 		menu() {
 			document.body.appendChild(new MkPostMenu({
+				parent: this,
 				propsData: {
 					source: this.$refs.menuButton,
 					post: this.p
@@ -303,7 +307,7 @@ export default Vue.extend({
 			.name
 				font-weight bold
 
-		> mk-time
+		> .mk-time
 			position absolute
 			top 16px
 			right 32px
@@ -317,7 +321,7 @@ export default Vue.extend({
 		padding 0 16px
 		background rgba(0, 0, 0, 0.0125)
 
-		> mk-post-preview
+		> .mk-post-preview
 			background transparent
 
 	> article
@@ -415,7 +419,7 @@ export default Vue.extend({
 					> .dummy
 						display none
 
-					mk-url-preview
+					.mk-url-preview
 						margin-top 8px
 
 					> .channel
@@ -451,7 +455,7 @@ export default Vue.extend({
 						background $theme-color
 						border-radius 4px
 
-				> mk-poll
+				> .mk-poll
 					font-size 80%
 
 				> .repost
@@ -466,7 +470,7 @@ export default Vue.extend({
 						font-size 28px
 						background #fff
 
-					> mk-post-preview
+					> .mk-post-preview
 						padding 16px
 						border dashed 1px #c0dac6
 						border-radius 8px
diff --git a/src/web/app/desktop/views/components/repost-form.vue b/src/web/app/desktop/views/components/repost-form.vue
index 9e9f7174f7..f0e4a2bdfc 100644
--- a/src/web/app/desktop/views/components/repost-form.vue
+++ b/src/web/app/desktop/views/components/repost-form.vue
@@ -58,7 +58,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .mk-repost-form
 
-	> mk-post-preview
+	> .mk-post-preview
 		margin 16px 22px
 
 	> div
diff --git a/src/web/app/desktop/views/components/timeline.vue b/src/web/app/desktop/views/components/timeline.vue
index b24e78fe45..63b36ff547 100644
--- a/src/web/app/desktop/views/components/timeline.vue
+++ b/src/web/app/desktop/views/components/timeline.vue
@@ -104,7 +104,7 @@ export default Vue.extend({
 	border solid 1px rgba(0, 0, 0, 0.075)
 	border-radius 6px
 
-	> mk-following-setuper
+	> .mk-following-setuper
 		border-bottom solid 1px #eee
 
 	> .loading
diff --git a/src/web/app/desktop/views/components/ui-header-notifications.vue b/src/web/app/desktop/views/components/ui-header-notifications.vue
index 779ee48864..5ffa28c917 100644
--- a/src/web/app/desktop/views/components/ui-header-notifications.vue
+++ b/src/web/app/desktop/views/components/ui-header-notifications.vue
@@ -148,7 +148,7 @@ export default Vue.extend({
 			border-bottom solid 14px #fff
 			border-left solid 14px transparent
 
-		> mk-notifications
+		> .mk-notifications
 			max-height 350px
 			font-size 1rem
 			overflow auto
diff --git a/src/web/app/desktop/views/pages/user/user-friends.vue b/src/web/app/desktop/views/pages/user/user-friends.vue
index eed8748978..15fb7a96ea 100644
--- a/src/web/app/desktop/views/pages/user/user-friends.vue
+++ b/src/web/app/desktop/views/pages/user/user-friends.vue
@@ -109,7 +109,7 @@ export default Vue.extend({
 				line-height 16px
 				color #ccc
 
-		> mk-follow-button
+		> .mk-follow-button
 			position absolute
 			top 16px
 			right 16px
diff --git a/src/web/app/desktop/views/pages/user/user-home.vue b/src/web/app/desktop/views/pages/user/user-home.vue
index 926a1f571e..dc0a03dabe 100644
--- a/src/web/app/desktop/views/pages/user/user-home.vue
+++ b/src/web/app/desktop/views/pages/user/user-home.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 		padding 16px
 		width calc(100% - 275px * 2)
 
-		> mk-user-timeline
+		> .mk-user-timeline
 			border solid 1px rgba(0, 0, 0, 0.075)
 			border-radius 6px
 
diff --git a/src/web/app/desktop/views/pages/user/user-profile.vue b/src/web/app/desktop/views/pages/user/user-profile.vue
index 6b88b47acd..66385ab2ec 100644
--- a/src/web/app/desktop/views/pages/user/user-profile.vue
+++ b/src/web/app/desktop/views/pages/user/user-profile.vue
@@ -87,7 +87,7 @@ export default Vue.extend({
 		padding 16px
 		border-top solid 1px #eee
 
-		> mk-big-follow-button
+		> .mk-big-follow-button
 			width 100%
 
 		> .followed
diff --git a/src/web/app/mobile/views/components/drive.vue b/src/web/app/mobile/views/components/drive.vue
index a3dd959730..c842caacb3 100644
--- a/src/web/app/mobile/views/components/drive.vue
+++ b/src/web/app/mobile/views/components/drive.vue
@@ -509,11 +509,11 @@ export default Vue.extend({
 				color #777
 
 		> .folders
-			> mk-drive-folder
+			> .mk-drive-folder
 				border-bottom solid 1px #eee
 
 		> .files
-			> mk-drive-file
+			> .mk-drive-file
 				border-bottom solid 1px #eee
 
 			> .more
diff --git a/src/web/app/mobile/views/components/friends-maker.vue b/src/web/app/mobile/views/components/friends-maker.vue
index a7a81aeb72..45ee4a6440 100644
--- a/src/web/app/mobile/views/components/friends-maker.vue
+++ b/src/web/app/mobile/views/components/friends-maker.vue
@@ -72,7 +72,7 @@ export default Vue.extend({
 		padding 16px
 		background #eee
 
-		> mk-user-card
+		> .mk-user-card
 			&:not(:last-child)
 				margin-right 16px
 
diff --git a/src/web/app/mobile/views/components/notification.vue b/src/web/app/mobile/views/components/notification.vue
index 1b46087240..98390f1c11 100644
--- a/src/web/app/mobile/views/components/notification.vue
+++ b/src/web/app/mobile/views/components/notification.vue
@@ -120,7 +120,7 @@ export default Vue.extend({
 	padding 16px
 	overflow-wrap break-word
 
-	> mk-time
+	> .mk-time
 		display inline
 		position absolute
 		top 16px
diff --git a/src/web/app/mobile/views/components/notifications.vue b/src/web/app/mobile/views/components/notifications.vue
index 3cad1d514a..8813bef5b0 100644
--- a/src/web/app/mobile/views/components/notifications.vue
+++ b/src/web/app/mobile/views/components/notifications.vue
@@ -114,7 +114,7 @@ export default Vue.extend({
 
 	> .notifications
 
-		> mk-notification
+		> .mk-notification
 			margin 0 auto
 			max-width 500px
 			border-bottom solid 1px rgba(0, 0, 0, 0.05)
diff --git a/src/web/app/mobile/views/components/post-card.vue b/src/web/app/mobile/views/components/post-card.vue
index 4dd6ceb282..08a2bebfce 100644
--- a/src/web/app/mobile/views/components/post-card.vue
+++ b/src/web/app/mobile/views/components/post-card.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 				height 20px
 				background linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%)
 
-		> mk-time
+		> .mk-time
 			display inline-block
 			padding 8px
 			color #aaa
diff --git a/src/web/app/mobile/views/components/post-detail.vue b/src/web/app/mobile/views/components/post-detail.vue
index ba28e7be30..da4f3fee76 100644
--- a/src/web/app/mobile/views/components/post-detail.vue
+++ b/src/web/app/mobile/views/components/post-detail.vue
@@ -285,7 +285,7 @@ export default Vue.extend({
 				@media (min-width 500px)
 					font-size 24px
 
-				> mk-url-preview
+				> .mk-url-preview
 					margin-top 8px
 
 			> .media
diff --git a/src/web/app/mobile/views/components/post-form.vue b/src/web/app/mobile/views/components/post-form.vue
index 49f6a94d8e..091056bcd3 100644
--- a/src/web/app/mobile/views/components/post-form.vue
+++ b/src/web/app/mobile/views/components/post-form.vue
@@ -130,7 +130,7 @@ export default Vue.extend({
 		max-width 500px
 		margin 0 auto
 
-		> mk-post-preview
+		> .mk-post-preview
 			padding 16px
 
 		> .attaches
@@ -159,7 +159,7 @@ export default Vue.extend({
 						background-size cover
 						background-position center center
 
-		> mk-uploader
+		> .mk-uploader
 			margin 8px 0 0 0
 			padding 8px
 
diff --git a/src/web/app/mobile/views/components/posts-post.vue b/src/web/app/mobile/views/components/posts-post.vue
index 4dd82e6486..56b42d9c22 100644
--- a/src/web/app/mobile/views/components/posts-post.vue
+++ b/src/web/app/mobile/views/components/posts-post.vue
@@ -201,7 +201,7 @@ export default Vue.extend({
 			.name
 				font-weight bold
 
-		> mk-time
+		> .mk-time
 			position absolute
 			top 8px
 			right 16px
@@ -217,7 +217,7 @@ export default Vue.extend({
 	> .reply-to
 		background rgba(0, 0, 0, 0.0125)
 
-		> mk-post-preview
+		> .mk-post-preview
 			background transparent
 
 	> article
@@ -359,7 +359,7 @@ export default Vue.extend({
 					font-size 12px
 					color #ccc
 
-				> mk-poll
+				> .mk-poll
 					font-size 80%
 
 				> .repost
@@ -374,7 +374,7 @@ export default Vue.extend({
 						font-size 28px
 						background #fff
 
-					> mk-post-preview
+					> .mk-post-preview
 						padding 16px
 						border dashed 1px #c0dac6
 						border-radius 8px
diff --git a/src/web/app/mobile/views/components/user-card.vue b/src/web/app/mobile/views/components/user-card.vue
index f70def48f8..729421616e 100644
--- a/src/web/app/mobile/views/components/user-card.vue
+++ b/src/web/app/mobile/views/components/user-card.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 		font-size 15px
 		color #ccc
 
-	> mk-follow-button
+	> .mk-follow-button
 		display inline-block
 		margin 8px 0 16px 0
 
diff --git a/src/web/app/mobile/views/pages/user.vue b/src/web/app/mobile/views/pages/user.vue
index 4cc152c1ed..6c784b05f4 100644
--- a/src/web/app/mobile/views/pages/user.vue
+++ b/src/web/app/mobile/views/pages/user.vue
@@ -141,7 +141,7 @@ export default Vue.extend({
 							border 4px solid #313a42
 							border-radius 12px
 
-				> mk-follow-button
+				> .mk-follow-button
 					float right
 					height 40px
 
@@ -199,7 +199,7 @@ export default Vue.extend({
 					> i
 						font-size 14px
 
-			> mk-activity-table
+			> .mk-activity-table
 				margin 12px 0 0 0
 
 		> nav
diff --git a/src/web/app/mobile/views/pages/user/home-friends.vue b/src/web/app/mobile/views/pages/user/home-friends.vue
index 2a7e8b9617..7c5a50559d 100644
--- a/src/web/app/mobile/views/pages/user/home-friends.vue
+++ b/src/web/app/mobile/views/pages/user/home-friends.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 		white-space nowrap
 		padding 8px
 
-		> mk-user-card
+		> .mk-user-card
 			&:not(:last-child)
 				margin-right 8px
 
diff --git a/src/web/app/mobile/views/pages/user/home.vue b/src/web/app/mobile/views/pages/user/home.vue
index 56b9285591..a23825f227 100644
--- a/src/web/app/mobile/views/pages/user/home.vue
+++ b/src/web/app/mobile/views/pages/user/home.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
 	max-width 600px
 	margin 0 auto
 
-	> mk-post-detail
+	> .mk-post-detail
 		margin 0 0 8px 0
 
 	> section