From e7e5af2c65b5f3d657c34aae6bfbe244c0b7c4c8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 28 Aug 2017 10:11:23 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E6=8A=95=E7=A8=BF=E3=82=92=E3=83=80=E3=83=96?=
 =?UTF-8?q?=E3=83=AB=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=81=93=E3=81=A8=E3=81=A7=E8=A9=B3=E7=B4=B0=E3=81=AA=E6=83=85?=
 =?UTF-8?q?=E5=A0=B1=E3=81=8C=E8=A6=8B=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  3 +-
 .../app/desktop/tags/detailed-post-window.tag | 80 +++++++++++++++++++
 src/web/app/desktop/tags/index.js             |  1 +
 src/web/app/desktop/tags/timeline-post.tag    |  8 +-
 4 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 src/web/app/desktop/tags/detailed-post-window.tag

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b819cd27f..d850457df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,8 @@ ChangeLog
 
 unreleased
 ----------
-* Improvement: 投稿ページに次の投稿/前の投稿リンクを作成 (#734)
+* Improve: 投稿ページに次の投稿/前の投稿リンクを作成 (#734)
+* Improve: タイムラインの投稿をダブルクリックすることで詳細な情報が見れるように
 * Fix: モバイル版でおすすめユーザーをフォローしてもタイムラインが更新されない (#736)
 
 2380
diff --git a/src/web/app/desktop/tags/detailed-post-window.tag b/src/web/app/desktop/tags/detailed-post-window.tag
new file mode 100644
index 000000000..04f9acf97
--- /dev/null
+++ b/src/web/app/desktop/tags/detailed-post-window.tag
@@ -0,0 +1,80 @@
+<mk-detailed-post-window>
+	<div class="bg" ref="bg" onclick={ bgClick }></div>
+	<div class="main" ref="main" if={ !fetching }>
+		<mk-post-detail ref="detail" post={ post }/>
+	</div>
+	<style>
+		:scope
+			display block
+			opacity 0
+
+			> .bg
+				display block
+				position fixed
+				z-index 1000
+				top 0
+				left 0
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.7)
+
+			> .main
+				display block
+				position fixed
+				z-index 1000
+				top 20%
+				left 0
+				right 0
+				margin 0 auto 0 auto
+				padding 0
+				width 638px
+				text-align center
+
+				> mk-post-detail
+					margin 0 auto
+
+	</style>
+	<script>
+		import anime from 'animejs';
+
+		this.mixin('api');
+
+		this.fetching = true;
+		this.post = null;
+
+		this.on('mount', () => {
+			anime({
+				targets: this.root,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			this.api('posts/show', {
+				post_id: this.opts.post
+			}).then(post => {
+
+				this.update({
+					fetching: false,
+					post: post
+				});
+			});
+		});
+
+		this.close = () => {
+			this.refs.bg.style.pointerEvents = 'none';
+			this.refs.main.style.pointerEvents = 'none';
+			anime({
+				targets: this.root,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear',
+				complete: () => this.unmount()
+			});
+		};
+
+		this.bgClick = () => {
+			this.close();
+		};
+	</script>
+</mk-detailed-post-window>
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index 177ba4129..11243c00a 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -91,3 +91,4 @@ require('./user-following-window.tag');
 require('./user-followers-window.tag');
 require('./list-user.tag');
 require('./ui-notification.tag');
+require('./detailed-post-window.tag');
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index 150b928df..0438b146c 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -1,4 +1,4 @@
-<mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown }>
+<mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown } dblclick={ onDblClick }>
 	<div class="reply-to" if={ p.reply_to }>
 		<mk-timeline-post-sub post={ p.reply_to }/>
 	</div>
@@ -473,6 +473,12 @@
 			if (shouldBeCancel) e.preventDefault();
 		};
 
+		this.onDblClick = () => {
+			riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
+				post: this.p.id
+			});
+		};
+
 		function focus(el, fn) {
 			const target = fn(el);
 			if (target) {