diff --git a/CHANGELOG.md b/CHANGELOG.md index b819cd27f0..d850457df3 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 0000000000..04f9acf974 --- /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 177ba41293..11243c00a0 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 150b928dfd..0438b146ca 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) {