From b2a6257f93612ed59a00548feff4712a5136faab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 21 Feb 2018 01:39:51 +0900
Subject: wip

---
 src/web/app/common/views/components/index.ts       |   4 -
 .../app/common/views/components/messaging-form.vue | 186 ----------------
 .../common/views/components/messaging-message.vue  | 238 ---------------------
 .../views/components/messaging-room.form.vue       | 186 ++++++++++++++++
 .../views/components/messaging-room.message.vue    | 238 +++++++++++++++++++++
 .../app/common/views/components/messaging-room.vue |  14 +-
 6 files changed, 435 insertions(+), 431 deletions(-)
 delete mode 100644 src/web/app/common/views/components/messaging-form.vue
 delete mode 100644 src/web/app/common/views/components/messaging-message.vue
 create mode 100644 src/web/app/common/views/components/messaging-room.form.vue
 create mode 100644 src/web/app/common/views/components/messaging-room.message.vue

(limited to 'src/web/app/common')

diff --git a/src/web/app/common/views/components/index.ts b/src/web/app/common/views/components/index.ts
index 021e45a8dc..a61022dbe0 100644
--- a/src/web/app/common/views/components/index.ts
+++ b/src/web/app/common/views/components/index.ts
@@ -15,9 +15,7 @@ import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
 import messaging from './messaging.vue';
-import messagingForm from './messaging-form.vue';
 import messagingRoom from './messaging-room.vue';
-import messagingMessage from './messaging-message.vue';
 import urlPreview from './url-preview.vue';
 
 Vue.component('mk-signin', signin);
@@ -35,7 +33,5 @@ Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-messaging', messaging);
-Vue.component('mk-messaging-form', messagingForm);
 Vue.component('mk-messaging-room', messagingRoom);
-Vue.component('mk-messaging-message', messagingMessage);
 Vue.component('mk-url-preview', urlPreview);
diff --git a/src/web/app/common/views/components/messaging-form.vue b/src/web/app/common/views/components/messaging-form.vue
deleted file mode 100644
index 470606b77f..0000000000
--- a/src/web/app/common/views/components/messaging-form.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-<div class="mk-messaging-form">
-	<textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%"></textarea>
-	<div class="files"></div>
-	<mk-uploader ref="uploader"/>
-	<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
-		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
-	</button>
-	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
-		%fa:upload%
-	</button>
-	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		%fa:R folder-open%
-	</button>
-	<input name="file" type="file" accept="image/*"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['user'],
-	data() {
-		return {
-			text: null,
-			file: null,
-			sending: false
-		};
-	},
-	methods: {
-		onPaste(e) {
-			const data = e.clipboardData;
-			const items = data.items;
-			for (const item of items) {
-				if (item.kind == 'file') {
-					//this.upload(item.getAsFile());
-				}
-			}
-		},
-
-		onKeypress(e) {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
-				this.send();
-			}
-		},
-
-		chooseFile() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			(this as any).apis.chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.file = file;
-			});
-		},
-
-		upload() {
-			// TODO
-		},
-
-		send() {
-			this.sending = true;
-			(this as any).api('messaging/messages/create', {
-				user_id: this.user.id,
-				text: this.text
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-			});
-		},
-
-		clear() {
-			this.text = '';
-			this.file = null;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-messaging-form
-	> textarea
-		cursor auto
-		display block
-		width 100%
-		min-width 100%
-		max-width 100%
-		height 64px
-		margin 0
-		padding 8px
-		font-size 1em
-		color #000
-		outline none
-		border none
-		border-top solid 1px #eee
-		border-radius 0
-		box-shadow none
-		background transparent
-
-	> .send
-		position absolute
-		bottom 0
-		right 0
-		margin 0
-		padding 10px 14px
-		line-height 1em
-		font-size 1em
-		color #aaa
-		transition color 0.1s ease
-
-		&:hover
-			color $theme-color
-
-		&:active
-			color darken($theme-color, 10%)
-			transition color 0s ease
-
-	.files
-		display block
-		margin 0
-		padding 0 8px
-		list-style none
-
-		&:after
-			content ''
-			display block
-			clear both
-
-		> li
-			display block
-			float left
-			margin 4px
-			padding 0
-			width 64px
-			height 64px
-			background-color #eee
-			background-repeat no-repeat
-			background-position center center
-			background-size cover
-			cursor move
-
-			&:hover
-				> .remove
-					display block
-
-			> .remove
-				display none
-				position absolute
-				right -6px
-				top -6px
-				margin 0
-				padding 0
-				background transparent
-				outline none
-				border none
-				border-radius 0
-				box-shadow none
-				cursor pointer
-
-	.attach-from-local
-	.attach-from-drive
-		margin 0
-		padding 10px 14px
-		line-height 1em
-		font-size 1em
-		font-weight normal
-		text-decoration none
-		color #aaa
-		transition color 0.1s ease
-
-		&:hover
-			color $theme-color
-
-		&:active
-			color darken($theme-color, 10%)
-			transition color 0s ease
-
-	input[type=file]
-		display none
-
-</style>
diff --git a/src/web/app/common/views/components/messaging-message.vue b/src/web/app/common/views/components/messaging-message.vue
deleted file mode 100644
index d2e3dacb56..0000000000
--- a/src/web/app/common/views/components/messaging-message.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<template>
-<div class="mk-messaging-message" :data-is-me="isMe">
-	<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
-		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
-	</a>
-	<div class="content-container">
-		<div class="balloon">
-			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
-			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%">
-				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
-			</button>
-			<div class="content" v-if="!message.is_deleted">
-				<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
-				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-				<div class="image" v-if="message.file">
-					<img :src="message.file.url" alt="image" :title="message.file.name"/>
-				</div>
-			</div>
-			<div class="content" v-if="message.is_deleted">
-				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
-			</div>
-		</div>
-		<footer>
-			<mk-time :time="message.created_at"/>
-			<template v-if="message.is_edited">%fa:pencil-alt%</template>
-		</footer>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: ['message'],
-	computed: {
-		isMe(): boolean {
-			return this.message.user_id == (this as any).os.i.id;
-		},
-		urls(): string[] {
-			if (this.message.ast) {
-				return this.message.ast
-					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-					.map(t => t.url);
-			} else {
-				return null;
-			}
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-messaging-message
-	$me-balloon-color = #23A7B6
-
-	padding 10px 12px 10px 12px
-	background-color transparent
-
-	&:after
-		content ""
-		display block
-		clear both
-
-	> .avatar-anchor
-		display block
-
-		> .avatar
-			display block
-			min-width 54px
-			min-height 54px
-			max-width 54px
-			max-height 54px
-			margin 0
-			border-radius 8px
-			transition all 0.1s ease
-
-	> .content-container
-		display block
-		margin 0 12px
-		padding 0
-		max-width calc(100% - 78px)
-
-		> .balloon
-			display block
-			float inherit
-			margin 0
-			padding 0
-			max-width 100%
-			min-height 38px
-			border-radius 16px
-
-			&:before
-				content ""
-				pointer-events none
-				display block
-				position absolute
-				top 12px
-
-			&:hover
-				> .delete-button
-					display block
-
-			> .delete-button
-				display none
-				position absolute
-				z-index 1
-				top -4px
-				right -4px
-				margin 0
-				padding 0
-				cursor pointer
-				outline none
-				border none
-				border-radius 0
-				box-shadow none
-				background transparent
-
-				> img
-					vertical-align bottom
-					width 16px
-					height 16px
-					cursor pointer
-
-			> .read
-				user-select none
-				display block
-				position absolute
-				z-index 1
-				bottom -4px
-				left -12px
-				margin 0
-				color rgba(0, 0, 0, 0.5)
-				font-size 11px
-
-			> .content
-
-				> .is-deleted
-					display block
-					margin 0
-					padding 0
-					overflow hidden
-					overflow-wrap break-word
-					font-size 1em
-					color rgba(0, 0, 0, 0.5)
-
-				> .text
-					display block
-					margin 0
-					padding 8px 16px
-					overflow hidden
-					overflow-wrap break-word
-					font-size 1em
-					color rgba(0, 0, 0, 0.8)
-
-					&, *
-						user-select text
-						cursor auto
-
-					& + .file
-						&.image
-							> img
-								border-radius 0 0 16px 16px
-
-				> .file
-					&.image
-						> img
-							display block
-							max-width 100%
-							max-height 512px
-							border-radius 16px
-
-		> footer
-			display block
-			clear both
-			margin 0
-			padding 2px
-			font-size 10px
-			color rgba(0, 0, 0, 0.4)
-
-			> [data-fa]
-				margin-left 4px
-
-	&:not([data-is-me='true'])
-		> .avatar-anchor
-			float left
-
-		> .content-container
-			float left
-
-			> .balloon
-				background #eee
-
-				&:before
-					left -14px
-					border-top solid 8px transparent
-					border-right solid 8px #eee
-					border-bottom solid 8px transparent
-					border-left solid 8px transparent
-
-			> footer
-				text-align left
-
-	&[data-is-me='true']
-		> .avatar-anchor
-			float right
-
-		> .content-container
-			float right
-
-			> .balloon
-				background $me-balloon-color
-
-				&:before
-					right -14px
-					left auto
-					border-top solid 8px transparent
-					border-right solid 8px transparent
-					border-bottom solid 8px transparent
-					border-left solid 8px $me-balloon-color
-
-				> .content
-
-					> p.is-deleted
-						color rgba(255, 255, 255, 0.5)
-
-					> [ref='text']
-						&, *
-							color #fff !important
-
-			> footer
-				text-align right
-
-	&[data-is-deleted='true']
-			> .content-container
-				opacity 0.5
-
-</style>
diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
new file mode 100644
index 0000000000..470606b77f
--- /dev/null
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -0,0 +1,186 @@
+<template>
+<div class="mk-messaging-form">
+	<textarea v-model="text" @keypress="onKeypress" @paste="onPaste" placeholder="%i18n:common.input-message-here%"></textarea>
+	<div class="files"></div>
+	<mk-uploader ref="uploader"/>
+	<button class="send" @click="send" :disabled="sending" title="%i18n:common.send%">
+		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
+	</button>
+	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
+		%fa:upload%
+	</button>
+	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
+		%fa:R folder-open%
+	</button>
+	<input name="file" type="file" accept="image/*"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['user'],
+	data() {
+		return {
+			text: null,
+			file: null,
+			sending: false
+		};
+	},
+	methods: {
+		onPaste(e) {
+			const data = e.clipboardData;
+			const items = data.items;
+			for (const item of items) {
+				if (item.kind == 'file') {
+					//this.upload(item.getAsFile());
+				}
+			}
+		},
+
+		onKeypress(e) {
+			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
+				this.send();
+			}
+		},
+
+		chooseFile() {
+			(this.$refs.file as any).click();
+		},
+
+		chooseFileFromDrive() {
+			(this as any).apis.chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.file = file;
+			});
+		},
+
+		upload() {
+			// TODO
+		},
+
+		send() {
+			this.sending = true;
+			(this as any).api('messaging/messages/create', {
+				user_id: this.user.id,
+				text: this.text
+			}).then(message => {
+				this.clear();
+			}).catch(err => {
+				console.error(err);
+			}).then(() => {
+				this.sending = false;
+			});
+		},
+
+		clear() {
+			this.text = '';
+			this.file = null;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-messaging-form
+	> textarea
+		cursor auto
+		display block
+		width 100%
+		min-width 100%
+		max-width 100%
+		height 64px
+		margin 0
+		padding 8px
+		font-size 1em
+		color #000
+		outline none
+		border none
+		border-top solid 1px #eee
+		border-radius 0
+		box-shadow none
+		background transparent
+
+	> .send
+		position absolute
+		bottom 0
+		right 0
+		margin 0
+		padding 10px 14px
+		line-height 1em
+		font-size 1em
+		color #aaa
+		transition color 0.1s ease
+
+		&:hover
+			color $theme-color
+
+		&:active
+			color darken($theme-color, 10%)
+			transition color 0s ease
+
+	.files
+		display block
+		margin 0
+		padding 0 8px
+		list-style none
+
+		&:after
+			content ''
+			display block
+			clear both
+
+		> li
+			display block
+			float left
+			margin 4px
+			padding 0
+			width 64px
+			height 64px
+			background-color #eee
+			background-repeat no-repeat
+			background-position center center
+			background-size cover
+			cursor move
+
+			&:hover
+				> .remove
+					display block
+
+			> .remove
+				display none
+				position absolute
+				right -6px
+				top -6px
+				margin 0
+				padding 0
+				background transparent
+				outline none
+				border none
+				border-radius 0
+				box-shadow none
+				cursor pointer
+
+	.attach-from-local
+	.attach-from-drive
+		margin 0
+		padding 10px 14px
+		line-height 1em
+		font-size 1em
+		font-weight normal
+		text-decoration none
+		color #aaa
+		transition color 0.1s ease
+
+		&:hover
+			color $theme-color
+
+		&:active
+			color darken($theme-color, 10%)
+			transition color 0s ease
+
+	input[type=file]
+		display none
+
+</style>
diff --git a/src/web/app/common/views/components/messaging-room.message.vue b/src/web/app/common/views/components/messaging-room.message.vue
new file mode 100644
index 0000000000..95a6efa28b
--- /dev/null
+++ b/src/web/app/common/views/components/messaging-room.message.vue
@@ -0,0 +1,238 @@
+<template>
+<div class="message" :data-is-me="isMe">
+	<a class="avatar-anchor" :href="`/${message.user.username}`" :title="message.user.username" target="_blank">
+		<img class="avatar" :src="`${message.user.avatar_url}?thumbnail&size=80`" alt=""/>
+	</a>
+	<div class="content-container">
+		<div class="balloon">
+			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
+			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%">
+				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
+			</button>
+			<div class="content" v-if="!message.is_deleted">
+				<mk-post-html class="text" v-if="message.ast" :ast="message.ast" :i="os.i"/>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+				<div class="image" v-if="message.file">
+					<img :src="message.file.url" alt="image" :title="message.file.name"/>
+				</div>
+			</div>
+			<div class="content" v-if="message.is_deleted">
+				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
+			</div>
+		</div>
+		<footer>
+			<mk-time :time="message.created_at"/>
+			<template v-if="message.is_edited">%fa:pencil-alt%</template>
+		</footer>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: ['message'],
+	computed: {
+		isMe(): boolean {
+			return this.message.user_id == (this as any).os.i.id;
+		},
+		urls(): string[] {
+			if (this.message.ast) {
+				return this.message.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.message
+	$me-balloon-color = #23A7B6
+
+	padding 10px 12px 10px 12px
+	background-color transparent
+
+	&:after
+		content ""
+		display block
+		clear both
+
+	> .avatar-anchor
+		display block
+
+		> .avatar
+			display block
+			min-width 54px
+			min-height 54px
+			max-width 54px
+			max-height 54px
+			margin 0
+			border-radius 8px
+			transition all 0.1s ease
+
+	> .content-container
+		display block
+		margin 0 12px
+		padding 0
+		max-width calc(100% - 78px)
+
+		> .balloon
+			display block
+			float inherit
+			margin 0
+			padding 0
+			max-width 100%
+			min-height 38px
+			border-radius 16px
+
+			&:before
+				content ""
+				pointer-events none
+				display block
+				position absolute
+				top 12px
+
+			&:hover
+				> .delete-button
+					display block
+
+			> .delete-button
+				display none
+				position absolute
+				z-index 1
+				top -4px
+				right -4px
+				margin 0
+				padding 0
+				cursor pointer
+				outline none
+				border none
+				border-radius 0
+				box-shadow none
+				background transparent
+
+				> img
+					vertical-align bottom
+					width 16px
+					height 16px
+					cursor pointer
+
+			> .read
+				user-select none
+				display block
+				position absolute
+				z-index 1
+				bottom -4px
+				left -12px
+				margin 0
+				color rgba(0, 0, 0, 0.5)
+				font-size 11px
+
+			> .content
+
+				> .is-deleted
+					display block
+					margin 0
+					padding 0
+					overflow hidden
+					overflow-wrap break-word
+					font-size 1em
+					color rgba(0, 0, 0, 0.5)
+
+				> .text
+					display block
+					margin 0
+					padding 8px 16px
+					overflow hidden
+					overflow-wrap break-word
+					font-size 1em
+					color rgba(0, 0, 0, 0.8)
+
+					&, *
+						user-select text
+						cursor auto
+
+					& + .file
+						&.image
+							> img
+								border-radius 0 0 16px 16px
+
+				> .file
+					&.image
+						> img
+							display block
+							max-width 100%
+							max-height 512px
+							border-radius 16px
+
+		> footer
+			display block
+			clear both
+			margin 0
+			padding 2px
+			font-size 10px
+			color rgba(0, 0, 0, 0.4)
+
+			> [data-fa]
+				margin-left 4px
+
+	&:not([data-is-me])
+		> .avatar-anchor
+			float left
+
+		> .content-container
+			float left
+
+			> .balloon
+				background #eee
+
+				&:before
+					left -14px
+					border-top solid 8px transparent
+					border-right solid 8px #eee
+					border-bottom solid 8px transparent
+					border-left solid 8px transparent
+
+			> footer
+				text-align left
+
+	&[data-is-me]
+		> .avatar-anchor
+			float right
+
+		> .content-container
+			float right
+
+			> .balloon
+				background $me-balloon-color
+
+				&:before
+					right -14px
+					left auto
+					border-top solid 8px transparent
+					border-right solid 8px transparent
+					border-bottom solid 8px transparent
+					border-left solid 8px $me-balloon-color
+
+				> .content
+
+					> p.is-deleted
+						color rgba(255, 255, 255, 0.5)
+
+					> .text
+						&, *
+							color #fff !important
+
+			> footer
+				text-align right
+
+	&[data-is-deleted]
+			> .content-container
+				opacity 0.5
+
+</style>
diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index d03799563e..5022655a25 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -8,14 +8,16 @@
 			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }}
 		</button>
 		<template v-for="(message, i) in _messages">
-			<mk-messaging-message :message="message" :key="message.id"/>
-			<p class="date" :key="message.id + '-time'" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date"><span>{{ _messages[i + 1]._datetext }}</span></p>
+			<x-message :message="message" :key="message.id"/>
+			<p class="date" v-if="i != messages.length - 1 && message._date != _messages[i + 1]._date">
+				<span>{{ _messages[i + 1]._datetext }}</span>
+			</p>
 		</template>
 	</div>
 	<footer>
 		<div ref="notifications"></div>
 		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
-		<mk-messaging-form :user="user"/>
+		<x-form :user="user"/>
 	</footer>
 </div>
 </template>
@@ -23,8 +25,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
+import XMessage from './messaging-room.message.vue';
+import XForm from './messaging-room.form.vue';
 
 export default Vue.extend({
+	components: {
+		XMessage,
+		XForm
+	},
 	props: ['user', 'isNaked'],
 	data() {
 		return {
-- 
cgit v1.2.3-freya