From 0390820f0737f5838d557984651fca833a439e30 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 20 Mar 2017 05:13:13 +0900
Subject: [PATCH] =?UTF-8?q?[Client]=20=E8=89=AF=E3=81=84=E6=84=9F=E3=81=98?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                |  2 +-
 src/web/app/common/tags/reaction-picker.tag | 21 +++++++++++++++++++--
 src/web/app/desktop/tags/post-detail.tag    |  4 +---
 src/web/app/desktop/tags/timeline-post.tag  |  4 +---
 src/web/app/mobile/tags/post-detail.tag     |  4 +---
 src/web/app/mobile/tags/timeline-post.tag   |  4 +---
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 6f489a933..ac386ad45 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "misskey",
   "author": "syuilo <i@syuilo.com>",
-  "version": "0.0.1387",
+  "version": "0.0.1388",
   "license": "MIT",
   "description": "A miniblog-based SNS",
   "bugs": "https://github.com/syuilo/misskey/issues",
diff --git a/src/web/app/common/tags/reaction-picker.tag b/src/web/app/common/tags/reaction-picker.tag
index ed2beb0d2..194c9d7b4 100644
--- a/src/web/app/common/tags/reaction-picker.tag
+++ b/src/web/app/common/tags/reaction-picker.tag
@@ -25,24 +25,41 @@
 			> .popover
 				position absolute
 				z-index 10001
+				padding 4px
 				background #fff
 				border 1px solid rgba(27, 31, 35, 0.15)
 				border-radius 4px
 				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
 
 				> button
+					width 40px
+					height 40px
 					font-size 24px
+					border-radius 2px
+
+					&:hover
+						background #eee
+
+					&:active
+						background $theme-color
+						box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
 	</style>
 	<script>
 		this.mixin('api');
 
 		this.post = this.opts.post;
+		this.source = this.opts.source;
 
 		this.on('mount', () => {
+			const rect = this.source.getBoundingClientRect();
+			const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+			const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+
 			const width = this.refs.popover.offsetWidth;
-			this.refs.popover.style.top = this.opts.top + 'px';
-			this.refs.popover.style.left = (this.opts.left - (width / 2)) + 'px';
+			const height = this.refs.popover.offsetHeight;
+			this.refs.popover.style.left = (x - (width / 2)) + 'px';
+			this.refs.popover.style.top = (y - (height / 2)) + 'px';
 		});
 
 		this.react = reaction => {
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index b1bec9f7e..d232cbaa5 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -329,10 +329,8 @@
 		};
 
 		this.react = () => {
-			const rect = this.refs.reactButton.getBoundingClientRect();
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				top: rect.top + window.pageYOffset,
-				left: rect.left + window.pageXOffset,
+				source: this.refs.reactButton,
 				post: this.p
 			});
 		};
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index ccd5f2570..998def6e4 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -377,10 +377,8 @@
 		};
 
 		this.react = () => {
-			const rect = this.refs.reactButton.getBoundingClientRect();
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				top: rect.top + window.pageYOffset,
-				left: rect.left + window.pageXOffset,
+				source: this.refs.reactButton,
 				post: this.p
 			});
 		};
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 5dfbd0ce6..b89f0d6cd 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -335,10 +335,8 @@
 		};
 
 		this.react = () => {
-			const rect = this.refs.reactButton.getBoundingClientRect();
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				top: rect.top + window.pageYOffset,
-				left: rect.left + window.pageXOffset,
+				source: this.refs.reactButton,
 				post: this.p
 			});
 		};
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index 9f861961a..064cdcda9 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -356,10 +356,8 @@
 		};
 
 		this.react = () => {
-			const rect = this.refs.reactButton.getBoundingClientRect();
 			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-				top: rect.top + window.pageYOffset,
-				left: rect.left + window.pageXOffset,
+				source: this.refs.reactButton,
 				post: this.p
 			});
 		};