From 4fd3192791c9454fb900c3eea5da8aa429c980a8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 22 Feb 2018 21:15:24 +0900
Subject: [PATCH] wip

---
 .../views/components/messaging-room.form.vue  |  6 ++--
 src/web/app/desktop/api/choose-drive-file.ts  | 34 +++++++++++++------
 src/web/app/desktop/script.ts                 |  2 ++
 .../components/messaging-room-window.vue      |  2 +-
 .../desktop/views/components/post-form.vue    |  3 --
 .../{api-setting.vue => settings.api.vue}     | 10 +++---
 .../app/desktop/views/components/settings.vue |  6 ++--
 .../desktop/views/directives/autocomplete.ts  |  6 ++--
 .../desktop/views/pages/messaging-room.vue    | 33 +++++++++++-------
 .../app/desktop/views/pages/selectdrive.vue   | 10 +++---
 src/web/app/desktop/views/pages/user/user.vue |  6 ++--
 11 files changed, 71 insertions(+), 47 deletions(-)
 rename src/web/app/desktop/views/components/{api-setting.vue => settings.api.vue} (80%)

diff --git a/src/web/app/common/views/components/messaging-room.form.vue b/src/web/app/common/views/components/messaging-room.form.vue
index 470606b77..b89365a5d 100644
--- a/src/web/app/common/views/components/messaging-room.form.vue
+++ b/src/web/app/common/views/components/messaging-room.form.vue
@@ -1,15 +1,15 @@
 <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>
+	<div class="file" v-if="file">{{ file.name }}</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%">
+	<button class="attach-from-local" 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%">
+	<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
 		%fa:R folder-open%
 	</button>
 	<input name="file" type="file" accept="image/*"/>
diff --git a/src/web/app/desktop/api/choose-drive-file.ts b/src/web/app/desktop/api/choose-drive-file.ts
index e04844171..892036244 100644
--- a/src/web/app/desktop/api/choose-drive-file.ts
+++ b/src/web/app/desktop/api/choose-drive-file.ts
@@ -1,18 +1,30 @@
+import { url } from '../../config';
 import MkChooseFileFromDriveWindow from '../views/components/choose-file-from-drive-window.vue';
 
 export default function(opts) {
 	return new Promise((res, rej) => {
 		const o = opts || {};
-		const w = new MkChooseFileFromDriveWindow({
-			propsData: {
-				title: o.title,
-				multiple: o.multiple,
-				initFolder: o.currentFolder
-			}
-		}).$mount();
-		w.$once('selected', file => {
-			res(file);
-		});
-		document.body.appendChild(w.$el);
+
+		if (document.body.clientWidth > 800) {
+			const w = new MkChooseFileFromDriveWindow({
+				propsData: {
+					title: o.title,
+					multiple: o.multiple,
+					initFolder: o.currentFolder
+				}
+			}).$mount();
+			w.$once('selected', file => {
+				res(file);
+			});
+			document.body.appendChild(w.$el);
+		} else {
+			window['cb'] = file => {
+				res(file);
+			};
+
+			window.open(url + '/selectdrive',
+				'drive_window',
+				'height=500, width=800');
+		}
 	});
 }
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index 3c560033f..e584de3dd 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -24,6 +24,7 @@ import MkUser from './views/pages/user/user.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkHomeCustomize from './views/pages/home-customize.vue';
+import MkMessagingRoom from './views/pages/messaging-room.vue';
 
 /**
  * init
@@ -70,6 +71,7 @@ init(async (launch) => {
 	app.$router.addRoutes([
 		{ path: '/', name: 'index', component: MkIndex },
 		{ path: '/i/customize-home', component: MkHomeCustomize },
+		{ path: '/i/messaging/:username', component: MkMessagingRoom },
 		{ path: '/i/drive', component: MkDrive },
 		{ path: '/i/drive/folder/:folder', component: MkDrive },
 		{ path: '/selectdrive', component: MkSelectDrive },
diff --git a/src/web/app/desktop/views/components/messaging-room-window.vue b/src/web/app/desktop/views/components/messaging-room-window.vue
index f93990d89..66a9aa003 100644
--- a/src/web/app/desktop/views/components/messaging-room-window.vue
+++ b/src/web/app/desktop/views/components/messaging-room-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" :popout="popout" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ user.name }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
diff --git a/src/web/app/desktop/views/components/post-form.vue b/src/web/app/desktop/views/components/post-form.vue
index f63584806..1c152910e 100644
--- a/src/web/app/desktop/views/components/post-form.vue
+++ b/src/web/app/desktop/views/components/post-form.vue
@@ -111,9 +111,6 @@ export default Vue.extend({
 			}
 		});
 	},
-	beforeDestroy() {
-		this.autocomplete.detach();
-	},
 	methods: {
 		focus() {
 			(this.$refs.text as any).focus();
diff --git a/src/web/app/desktop/views/components/api-setting.vue b/src/web/app/desktop/views/components/settings.api.vue
similarity index 80%
rename from src/web/app/desktop/views/components/api-setting.vue
rename to src/web/app/desktop/views/components/settings.api.vue
index 08c5a0c51..5831f8207 100644
--- a/src/web/app/desktop/views/components/api-setting.vue
+++ b/src/web/app/desktop/views/components/settings.api.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-api-setting">
+<div class="root api">
 	<p>Token: <code>{{ os.i.token }}</code></p>
 	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
@@ -10,12 +10,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import passwordDialog from '../../scripts/password-dialog';
 
 export default Vue.extend({
 	methods: {
 		regenerateToken() {
-			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-api-info.enter-password%',
+				type: 'password'
+			}).then(password => {
 				(this as any).api('i/regenerate_token', {
 					password: password
 				});
@@ -26,7 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-api-setting
+.root.api
 	color #4a535a
 
 	code
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index b36698b64..767ec3f96 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -60,7 +60,7 @@
 
 		<section class="api" v-show="page == 'api'">
 			<h1>API</h1>
-			<mk-api-info/>
+			<x-api/>
 		</section>
 
 		<section class="other" v-show="page == 'other'">
@@ -77,13 +77,15 @@ import XProfile from './settings.profile.vue';
 import XMute from './settings.mute.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
+import XApi from './settings.api.vue';
 
 export default Vue.extend({
 	components: {
 		XProfile,
 		XMute,
 		XPassword,
-		X2fa
+		X2fa,
+		XApi
 	},
 	data() {
 		return {
diff --git a/src/web/app/desktop/views/directives/autocomplete.ts b/src/web/app/desktop/views/directives/autocomplete.ts
index 35a3b2e9c..53fa5a4df 100644
--- a/src/web/app/desktop/views/directives/autocomplete.ts
+++ b/src/web/app/desktop/views/directives/autocomplete.ts
@@ -3,14 +3,14 @@ import MkAutocomplete from '../components/autocomplete.vue';
 
 export default {
 	bind(el, binding, vn) {
-		const self = el._userPreviewDirective_ = {} as any;
+		const self = el._autoCompleteDirective_ = {} as any;
 		self.x = new Autocomplete(el);
 		self.x.attach();
 	},
 
 	unbind(el, binding, vn) {
-		const self = el._userPreviewDirective_;
-		self.x.close();
+		const self = el._autoCompleteDirective_;
+		self.x.detach();
 	}
 };
 
diff --git a/src/web/app/desktop/views/pages/messaging-room.vue b/src/web/app/desktop/views/pages/messaging-room.vue
index ace9e1607..d71a93b24 100644
--- a/src/web/app/desktop/views/pages/messaging-room.vue
+++ b/src/web/app/desktop/views/pages/messaging-room.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-messaging-room-page">
-	<mk-messaging-room v-if="user" :user="user" is-naked/>
+	<mk-messaging-room v-if="user" :user="user" :is-naked="true"/>
 </div>
 </template>
 
@@ -9,28 +9,37 @@ import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
-	props: ['username'],
 	data() {
 		return {
 			fetching: true,
 			user: null
 		};
 	},
+	watch: {
+		$route: 'fetch'
+	},
+	created() {
+		this.fetch();
+	},
 	mounted() {
-		Progress.start();
-
 		document.documentElement.style.background = '#fff';
+	},
+	methods: {
+		fetch() {
+			Progress.start();
+			this.fetching = true;
 
-		(this as any).api('users/show', {
-			username: this.username
-		}).then(user => {
-			this.user = user;
-			this.fetching = false;
+			(this as any).api('users/show', {
+				username: this.$route.params.username
+			}).then(user => {
+				this.user = user;
+				this.fetching = false;
 
-			document.title = 'メッセージ: ' + this.user.name;
+				document.title = 'メッセージ: ' + this.user.name;
 
-			Progress.done();
-		});
+				Progress.done();
+			});
+		}
 	}
 });
 </script>
diff --git a/src/web/app/desktop/views/pages/selectdrive.vue b/src/web/app/desktop/views/pages/selectdrive.vue
index da31ef8f0..b1f00da2b 100644
--- a/src/web/app/desktop/views/pages/selectdrive.vue
+++ b/src/web/app/desktop/views/pages/selectdrive.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="mk-selectdrive">
+<div class="mkp-selectdrive">
 	<mk-drive ref="browser"
 		:multiple="multiple"
 		@selected="onSelected"
 		@change-selection="onChangeSelection"
 	/>
-	<div>
+	<footer>
 		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" @click="upload">%fa:upload%</button>
 		<button class="cancel" @click="close">%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
 		<button class="ok" @click="ok">%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
-	</div>
+	</footer>
 </div>
 </template>
 
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-selectdrive
+.mkp-selectdrive
 	display block
 	position fixed
 	width 100%
@@ -64,7 +64,7 @@ export default Vue.extend({
 	> .mk-drive
 		height calc(100% - 72px)
 
-	> div
+	> footer
 		position fixed
 		bottom 0
 		left 0
diff --git a/src/web/app/desktop/views/pages/user/user.vue b/src/web/app/desktop/views/pages/user/user.vue
index 095df0e48..1ce3fa27e 100644
--- a/src/web/app/desktop/views/pages/user/user.vue
+++ b/src/web/app/desktop/views/pages/user/user.vue
@@ -29,12 +29,12 @@ export default Vue.extend({
 			user: null
 		};
 	},
-	created() {
-		this.fetch();
-	},
 	watch: {
 		$route: 'fetch'
 	},
+	created() {
+		this.fetch();
+	},
 	methods: {
 		fetch() {
 			this.fetching = true;