From 5d54b512db803139df0282922e3c16d916f8308c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 13 Nov 2017 07:32:47 +0900
Subject: [PATCH] #911

---
 src/web/app/desktop/router.js                 |  7 ++
 src/web/app/desktop/tags/index.js             |  1 +
 .../desktop/tags/messaging/room-window.tag    | 10 ++-
 .../app/desktop/tags/pages/messaging-room.tag | 38 ++++++++++
 src/web/app/desktop/tags/window.tag           | 74 +++++++++++++------
 5 files changed, 106 insertions(+), 24 deletions(-)
 create mode 100644 src/web/app/desktop/tags/pages/messaging-room.tag

diff --git a/src/web/app/desktop/router.js b/src/web/app/desktop/router.js
index bbd68cf99..4675b967d 100644
--- a/src/web/app/desktop/router.js
+++ b/src/web/app/desktop/router.js
@@ -12,6 +12,7 @@ export default me => {
 	route('/i/customize-home',       customizeHome);
 	route('/i/drive',                drive);
 	route('/i/drive/folder/:folder', drive);
+	route('/i/messaging/:user',      messaging);
 	route('/i/mentions',             mentions);
 	route('/post::post',             post);
 	route('/search::query',          search);
@@ -72,6 +73,12 @@ export default me => {
 		mount(el);
 	}
 
+	function messaging(ctx) {
+		const el = document.createElement('mk-messaging-room-page');
+		el.setAttribute('user', ctx.params.user);
+		mount(el);
+	}
+
 	function notFound() {
 		mount(document.createElement('mk-not-found'));
 	}
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index e48ba9744..15677471c 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -69,6 +69,7 @@ require('./pages/search.tag');
 require('./pages/not-found.tag');
 require('./pages/selectdrive.tag');
 require('./pages/drive.tag');
+require('./pages/messaging-room.tag');
 require('./autocomplete-suggestion.tag');
 require('./progress-dialog.tag');
 require('./user-preview.tag');
diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag
index 5d8a4303a..4d4f5c626 100644
--- a/src/web/app/desktop/tags/messaging/room-window.tag
+++ b/src/web/app/desktop/tags/messaging/room-window.tag
@@ -1,5 +1,5 @@
 <mk-messaging-room-window>
-	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
+	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout-option={ popout }>
 		<yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield>
 		<yield to="content">
 			<mk-messaging-room user={ parent.user }/>
@@ -19,8 +19,16 @@
 
 	</style>
 	<script>
+		import CONFIG from '../../../common/scripts/config';
+
 		this.user = this.opts.user;
 
+		this.popout = {
+			url: `${CONFIG.url}/i/messaging/${this.user.username}`,
+			width: 420,
+			height: 540
+		};
+
 		this.on('mount', () => {
 			this.refs.window.on('closed', () => {
 				this.unmount();
diff --git a/src/web/app/desktop/tags/pages/messaging-room.tag b/src/web/app/desktop/tags/pages/messaging-room.tag
new file mode 100644
index 000000000..9aba6c95d
--- /dev/null
+++ b/src/web/app/desktop/tags/pages/messaging-room.tag
@@ -0,0 +1,38 @@
+<mk-messaging-room-page>
+	<mk-messaging-room if={ user } user={ user } isNaked={ true }/>
+
+	<style>
+		:scope
+			display block
+			position fixed
+			width 100%
+			height 100%
+			background #fff
+
+	</style>
+	<script>
+		import Progress from '../../../common/scripts/loading';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.user = null;
+
+		this.on('mount', () => {
+			Progress.start();
+
+			this.api('users/show', {
+				username: this.opts.user
+			}).then(user => {
+				this.update({
+					fetching: false,
+					user: user
+				});
+
+				document.title = 'メッセージ: ' + this.user.name;
+
+				Progress.done();
+			});
+		});
+	</script>
+</mk-messaging-room-page>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index aefb6499b..cc8dc4c1a 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -4,7 +4,10 @@
 		<div class="body">
 			<header ref="header" onmousedown={ onHeaderMousedown }>
 				<h1 data-yield="header"><yield from="header"/></h1>
-				<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+				<div>
+					<button class="popout" if={ popoutOption } onmousedown={ repelMove } onclick={ popout } title="ポップアウト"><i class="fa fa-external-link"></i></button>
+					<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+				</div>
 			</header>
 			<div class="content" data-yield="content"><yield from="content"/></div>
 		</div>
@@ -117,8 +120,12 @@
 					box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
 
 					> header
+						$header-height = 40px
+
 						z-index 128
+						height $header-height
 						overflow hidden
+						white-space nowrap
 						cursor move
 						background #fff
 						border-radius 6px 6px 0 0
@@ -130,39 +137,45 @@
 						> h1
 							pointer-events none
 							display block
-							margin 0
-							height 40px
+							margin 0 auto
+							width s('calc(100% - (%s * 2))', $header-height)
+							overflow hidden
+							text-overflow ellipsis
 							text-align center
 							font-size 1em
-							line-height 40px
+							line-height $header-height
 							font-weight normal
 							color #666
 
-						> .close
-							cursor pointer
-							display block
+						> div:last-child
 							position absolute
 							top 0
 							right 0
+							display block
 							z-index 1
-							margin 0
-							padding 0
-							font-size 1.2em
-							color rgba(#000, 0.4)
-							border none
-							outline none
-							background transparent
 
-							&:hover
-								color rgba(#000, 0.6)
-
-							&:active
-								color darken(#000, 30%)
-
-							> i
+							> *
+								display inline-block
+								margin 0
 								padding 0
-								width 40px
-								line-height 40px
+								cursor pointer
+								font-size 1.2em
+								color rgba(#000, 0.4)
+								border none
+								outline none
+								background transparent
+
+								&:hover
+									color rgba(#000, 0.6)
+
+								&:active
+									color darken(#000, 30%)
+
+								> i
+									padding 0
+									width $header-height
+									line-height $header-height
+									text-align center
 
 					> .content
 						height 100%
@@ -181,6 +194,8 @@
 
 		this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
 		this.canClose = this.opts.canClose != null ? this.opts.canClose : true;
+		this.popoutOption = this.opts.popoutOption;
+		console.log(this.popoutOption);
 		this.isFlexible = this.opts.height == null;
 		this.canResize = !this.isFlexible;
 
@@ -247,6 +262,19 @@
 			}, 300);
 		};
 
+		this.popout = () => {
+			const position = this.refs.main.getBoundingClientRect();
+
+			const x = window.screenX + position.left;
+			const y = window.screenY + position.top;
+
+			window.open(this.popoutOption.url,
+				this.popoutOption.url,
+				`height=${this.popoutOption.height},width=${this.popoutOption.width},left=${x},top=${y}`);
+
+			this.close();
+		};
+
 		this.close = () => {
 			this.trigger('closing');