diff options
author | Bryce Johnson <bryce@gitlab.com> | 2017-04-15 19:38:07 -0400 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2017-05-18 16:37:48 -0400 |
commit | 3c668fa04fd7e0a1d925e9666eb727ed3e83d145 (patch) | |
tree | 556d553c9b8915eee0337527f6f8feae0217d3e9 /app/assets/javascripts/diff_notes | |
parent | a3eabcc20c422db7032e31397c21dbc6ca3166de (diff) | |
download | gitlab-ce-3c668fa04fd7e0a1d925e9666eb727ed3e83d145.tar.gz |
Consolidate user avatar Vue logic
Diffstat (limited to 'app/assets/javascripts/diff_notes')
-rw-r--r-- | app/assets/javascripts/diff_notes/components/diff_note_avatars.js | 28 |
1 files changed, 17 insertions, 11 deletions
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js index 5f533b5761c..517bdb6be09 100644 --- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js +++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js @@ -3,6 +3,7 @@ import Vue from 'vue'; import collapseIcon from '../icons/collapse_icon.svg'; +import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; const DiffNoteAvatars = Vue.extend({ props: ['discussionId'], @@ -15,22 +16,24 @@ const DiffNoteAvatars = Vue.extend({ collapseIcon, }; }, + components: { + userAvatarImage, + }, template: ` <div class="diff-comment-avatar-holders" v-show="notesCount !== 0"> <div v-if="!isVisible"> - <img v-for="note in notesSubset" - class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar" - width="19" - height="19" - role="button" - data-container="body" - data-placement="top" - data-html="true" + <!-- FIXME: Pass an alt attribute here for accessibility --> + <user-avatar-image + v-for="note in notesSubset" + class="diff-comment-avatar js-diff-comment-avatar" + @click.native="clickedAvatar($event)" + :img-src="note.authorAvatar" + :tooltip-text="getTooltipText(note)" :data-line-type="lineType" - :title="note.authorName + ': ' + note.noteTruncated" - :src="note.authorAvatar" - @click="clickedAvatar($event)" /> + :size="19" + data-html="true" + /> <span v-if="notesCount > shownAvatars" class="diff-comments-more-count has-tooltip js-diff-comment-avatar" data-container="body" @@ -150,6 +153,9 @@ const DiffNoteAvatars = Vue.extend({ setDiscussionVisible() { this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible'); }, + getTooltipText(note) { + return `${note.authorName}: ${note.noteTruncated}`; + }, }, }); |