diff --git a/package.json b/package.json index 6f489a9330..ac386ad459 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 ed2beb0d2a..194c9d7b4a 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 b1bec9f7ef..d232cbaa5e 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 ccd5f25703..998def6e42 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 5dfbd0ce64..b89f0d6cde 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 9f861961a9..064cdcda90 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 }); };