From b05bee58d28c3209d7f86a909f877c1e121c12ed Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 20 Mar 2017 04:24:19 +0900 Subject: #298 --- src/web/app/common/tags/index.js | 3 + src/web/app/common/tags/reaction-icon.tag | 12 ++ src/web/app/common/tags/reaction-picker.tag | 58 ++++++++++ src/web/app/common/tags/reactions-viewer.tag | 29 +++++ src/web/app/desktop/tags/notifications.tag | 38 ++++--- src/web/app/desktop/tags/post-detail.tag | 138 +++-------------------- src/web/app/desktop/tags/timeline-post.tag | 36 +++--- src/web/app/dev/tags/new-app-form.tag | 4 +- src/web/app/mobile/tags/notification-preview.tag | 29 ++--- src/web/app/mobile/tags/notification.tag | 10 +- src/web/app/mobile/tags/post-detail.tag | 137 +++------------------- src/web/app/mobile/tags/timeline-post.tag | 31 ++--- 12 files changed, 201 insertions(+), 324 deletions(-) create mode 100644 src/web/app/common/tags/reaction-icon.tag create mode 100644 src/web/app/common/tags/reaction-picker.tag create mode 100644 src/web/app/common/tags/reactions-viewer.tag (limited to 'src/web') diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js index 85b34ab363..567f2ffd78 100644 --- a/src/web/app/common/tags/index.js +++ b/src/web/app/common/tags/index.js @@ -26,3 +26,6 @@ require('./messaging/form.tag'); require('./stream-indicator.tag'); require('./public-timeline.tag'); require('./activity-table.tag'); +require('./reaction-picker.tag'); +require('./reactions-viewer.tag'); +require('./reaction-icon.tag'); diff --git a/src/web/app/common/tags/reaction-icon.tag b/src/web/app/common/tags/reaction-icon.tag new file mode 100644 index 0000000000..5cf357cbd4 --- /dev/null +++ b/src/web/app/common/tags/reaction-icon.tag @@ -0,0 +1,12 @@ + + 👍 + ❤️ + 😆 + 🤔 + 😮 + 🎉 + + diff --git a/src/web/app/common/tags/reaction-picker.tag b/src/web/app/common/tags/reaction-picker.tag new file mode 100644 index 0000000000..ed2beb0d2a --- /dev/null +++ b/src/web/app/common/tags/reaction-picker.tag @@ -0,0 +1,58 @@ + +
+
+ + + + + + +
+ + + diff --git a/src/web/app/common/tags/reactions-viewer.tag b/src/web/app/common/tags/reactions-viewer.tag new file mode 100644 index 0000000000..b289d89e85 --- /dev/null +++ b/src/web/app/common/tags/reactions-viewer.tag @@ -0,0 +1,29 @@ + + + { reactions.like } + { reactions.love } + { reactions.laugh } + { reactions.hmm } + { reactions.surprise } + { reactions.congrats } + + + + diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag index d459b7f31a..2a038b5e08 100644 --- a/src/web/app/desktop/tags/notifications.tag +++ b/src/web/app/desktop/tags/notifications.tag @@ -3,44 +3,58 @@
- - avatar + + + avatar +
-

{ notification.user.name }

{ getPostSummary(notification.post) } +

{ notification.user.name }

{ getPostSummary(notification.post) }
- avatar + + avatar +

{ notification.post.user.name }

{ getPostSummary(notification.post.repost) }
- avatar + + avatar +

{ notification.post.user.name }

{ getPostSummary(notification.post) }
- avatar + + avatar +

{ notification.user.name }

 - avatar + + avatar +

{ notification.post.user.name }

{ getPostSummary(notification.post) }
- avatar + + avatar +

{ notification.post.user.name }

{ getPostSummary(notification.post) }
- avatar + + avatar +

{ notification.user.name }

{ getPostSummary(notification.post) }
@@ -105,7 +119,7 @@ p margin 0 - i + i, mk-reaction-icon margin-right 4px .post-preview @@ -128,10 +142,6 @@ &:after content "\f10e" - &.like - .text p i - color #FFAC33 - &.repost, &.quote .text p i color #77B255 diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index 0495c5c6ec..b1bec9f7ef 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -45,42 +45,18 @@
+ - - +
-
-
0 }> -
- { p.repost_count } -

Repost

-
-
    -
  1. - - -
    2. -
-
- -
@@ -271,68 +247,9 @@ margin 0 0 0 8px color #999 - &.liked + &.reacted color $theme-color - > .reposts-and-likes - display flex - justify-content center - padding 0 - margin 16px 0 - - &:empty - display none - - > .reposts - > .likes - display flex - flex 1 1 - padding 0 - border-top solid 1px #F2EFEE - - > header - flex 1 1 80px - max-width 80px - padding 8px 5px 0px 10px - - > a - display block - font-size 1.5em - line-height 1.4em - - > p - display block - margin 0 - font-size 0.7em - line-height 1em - font-weight normal - color #a0a2a5 - - > .users - display block - flex 1 1 - margin 0 - padding 10px 10px 10px 5px - list-style none - - > .user - display block - float left - margin 4px - padding 0 - - > .avatar-anchor - display:block - - > .avatar - vertical-align bottom - width 24px - height 24px - border-radius 4px - - > .reposts + .likes - margin-left 16px - > .replies > * border-top 1px solid #eef0f2 @@ -356,6 +273,8 @@ }).then(post => { const isRepost = post.repost != null; const p = isRepost ? post.repost : post; + p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0; + this.update({ fetching: false, post: post, @@ -385,26 +304,6 @@ }); } - // Get likes - this.api('posts/likes', { - post_id: this.p.id, - limit: 8 - }).then(likes => { - this.update({ - likes: likes - }); - }); - - // Get reposts - this.api('posts/reposts', { - post_id: this.p.id, - limit: 8 - }).then(reposts => { - this.update({ - reposts: reposts - }); - }); - // Get replies this.api('posts/replies', { post_id: this.p.id, @@ -429,22 +328,13 @@ }); }; - this.like = () => { - if (this.p.is_liked) { - this.api('posts/likes/delete', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = false; - this.update(); - }); - } else { - this.api('posts/likes/create', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = true; - this.update(); - }); - } + 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, + post: this.p + }); }; this.loadContext = () => { diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag index 0559aaf6a0..ccd5f25703 100644 --- a/src/web/app/desktop/tags/timeline-post.tag +++ b/src/web/app/desktop/tags/timeline-post.tag @@ -46,14 +46,15 @@
+ - - - +
-
-
0 }> -
{ p.repost_count } -

Repost

-
-
    -
  1. - - -
    2. -
-
- -
@@ -273,68 +250,9 @@ margin 0 0 0 8px color #999 - &.liked + &.reacted color $theme-color - > .reposts-and-likes - display flex - justify-content center - padding 0 - margin 16px 0 - - &:empty - display none - - > .reposts - > .likes - display flex - flex 1 1 - padding 0 - border-top solid 1px #F2EFEE - - > header - flex 1 1 80px - max-width 80px - padding 8px 5px 0px 10px - - > a - display block - font-size 1.5em - line-height 1.4em - - > p - display block - margin 0 - font-size 0.7em - line-height 1em - font-weight normal - color #a0a2a5 - - > .users - display block - flex 1 1 - margin 0 - padding 10px 10px 10px 5px - list-style none - - > .user - display block - float left - margin 4px - padding 0 - - > .avatar-anchor - display:block - - > .avatar - vertical-align bottom - width 24px - height 24px - border-radius 4px - - > .reposts + .likes - margin-left 16px - > .replies > * border-top 1px solid #eef0f2 @@ -358,6 +276,8 @@ }).then(post => { const isRepost = post.repost != null; const p = isRepost ? post.repost : post; + p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0; + this.update({ fetching: false, post: post, @@ -387,26 +307,6 @@ }); } - // Get likes - this.api('posts/likes', { - post_id: this.p.id, - limit: 8 - }).then(likes => { - this.update({ - likes: likes - }); - }); - - // Get reposts - this.api('posts/reposts', { - post_id: this.p.id, - limit: 8 - }).then(reposts => { - this.update({ - reposts: reposts - }); - }); - // Get replies this.api('posts/replies', { post_id: this.p.id, @@ -434,22 +334,13 @@ }); }; - this.like = () => { - if (this.p.is_liked) { - this.api('posts/likes/delete', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = false; - this.update(); - }); - } else { - this.api('posts/likes/create', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = true; - this.update(); - }); - } + 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, + post: this.p + }); }; this.loadContext = () => { diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag index c861130b66..9f861961a9 100644 --- a/src/web/app/mobile/tags/timeline-post.tag +++ b/src/web/app/mobile/tags/timeline-post.tag @@ -43,14 +43,15 @@
@@ -300,7 +301,7 @@ margin 0 0 0 8px color #999 - &.liked + &.reacted color $theme-color @@ -314,6 +315,7 @@ this.post = this.opts.post; this.isRepost = this.post.repost != null && this.post.text == null; this.p = this.isRepost ? this.post.repost : this.post; + this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0; this.summary = getPostSummary(this.p); this.url = `/${this.p.user.username}/${this.p.id}`; @@ -353,22 +355,13 @@ }); }; - this.like = () => { - if (this.p.is_liked) { - this.api('posts/likes/delete', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = false; - this.update(); - }); - } else { - this.api('posts/likes/create', { - post_id: this.p.id - }).then(() => { - this.p.is_liked = true; - this.update(); - }); - } + 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, + post: this.p + }); }; -- cgit v1.2.3-freya