diff options
author | Fatih Acet <acetfatih@gmail.com> | 2017-07-08 12:19:39 +0300 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-07-21 22:35:25 +0300 |
commit | 7edc1bc3a62769f5186d237ca716b321a4a88d56 (patch) | |
tree | b3c487b988655c568bc96936a4895e29016b3ac8 | |
parent | 575544f6d5477504821a0f73b9ec3407a6242170 (diff) |
IssueNotesRefactor: Implement awarding emoji from emoji dropdown.
4 files changed, 41 insertions, 2 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index 18cd04b176a..177904543b6 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -2,6 +2,7 @@ /* global Flash */ import Cookies from 'js-cookie'; +import issueNotesEventHub from './notes/event_hub'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; @@ -234,12 +235,23 @@ class AwardsHandler { } addAward(votesBlock, awardUrl, emoji, checkMutuality, callback) { + if (this.isInIssuePage()) { + const id = votesBlock[0].id.replace('note_', ''); + + $('.emoji-menu').removeClass('is-visible'); + $('.js-add-award.is-active').removeClass('is-active'); + + return issueNotesEventHub.$emit('toggleAward', { awardName: emoji, noteId: id }); + } + const normalizedEmoji = this.emoji.normalizeEmojiName(emoji); const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent(); + this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => { this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality); return typeof callback === 'function' ? callback() : undefined; }); + $('.emoji-menu').removeClass('is-visible'); $('.js-add-award.is-active').removeClass('is-active'); } @@ -267,7 +279,18 @@ class AwardsHandler { } } + isInIssuePage() { + const page = gl.utils.getPagePath(1); + const action = gl.utils.getPagePath(2); + + return page === 'issues' && action === 'show'; + } + getVotesBlock() { + if (this.isInIssuePage()) { + return $('.js-add-award.is-active').closest('.note.timeline-entry'); + } + const currentBlock = $('.js-awards-block.current'); let resultantVotesBlock = currentBlock; if (currentBlock.length === 0) { diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue index 3f861341f52..f84442f15c1 100644 --- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue +++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue @@ -73,6 +73,9 @@ export default { return orderedAwards; }, + isAuthoredByMe() { + return this.noteAuthorId === window.gon.current_user_id; + }, }, methods: { getAwardHTML(name) { @@ -178,10 +181,11 @@ export default { v-if="canAward" class="award-menu-holder"> <button + :class="{ 'js-user-authored': isAuthoredByMe }" + class="award-control btn has-tooltip js-add-award" + title="Add reaction" aria-label="Add reaction" - class="award-control btn has-tooltip" data-placement="bottom" - title="Add reaction" type="button"> <span v-html="emojiSmiling" diff --git a/app/assets/javascripts/notes/components/issue_notes.vue b/app/assets/javascripts/notes/components/issue_notes.vue index 4aa8bd1d1d8..4dea00a7dd9 100644 --- a/app/assets/javascripts/notes/components/issue_notes.vue +++ b/app/assets/javascripts/notes/components/issue_notes.vue @@ -4,6 +4,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import storeOptions from '../stores/issue_notes_store'; +import eventHub from '../event_hub'; import IssueNote from './issue_note.vue'; import IssueDiscussion from './issue_discussion.vue'; import IssueSystemNote from './issue_system_note.vue'; @@ -29,6 +30,7 @@ export default { computed: { ...Vuex.mapGetters([ 'notes', + 'notesById', ]), }, methods: { @@ -87,6 +89,13 @@ export default { new Flash('Something went wrong while fetching latest comments.'); // eslint-disable-line }); }, 6000); + + eventHub.$on('toggleAward', (data) => { + const { awardName, noteId } = data; + const endpoint = this.notesById[noteId].toggle_award_path; + + this.$store.dispatch('toggleAward', { endpoint, awardName, noteId }); + }); }, }; </script> diff --git a/app/assets/javascripts/notes/event_hub.js b/app/assets/javascripts/notes/event_hub.js new file mode 100644 index 00000000000..0948c2e5352 --- /dev/null +++ b/app/assets/javascripts/notes/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); |