diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_discussions.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_discussions.vue | 31 |
1 files changed, 19 insertions, 12 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index 5e05ec87f84..47a05ce11cc 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -1,12 +1,14 @@ <script> import { GlIcon } from '@gitlab/ui'; import { mapActions } from 'vuex'; +import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; import noteableDiscussion from '../../notes/components/noteable_discussion.vue'; export default { components: { noteableDiscussion, GlIcon, + DesignNotePin, }, props: { discussions: { @@ -62,20 +64,22 @@ export default { <ul :data-discussion-id="discussion.id" class="notes"> <template v-if="shouldCollapseDiscussions"> <button - :class="{ - 'diff-notes-collapse': discussion.expanded, - 'btn-transparent badge badge-pill': !discussion.expanded, - }" + v-if="discussion.expanded" + class="diff-notes-collapse js-diff-notes-toggle" type="button" - class="js-diff-notes-toggle" :aria-label="__('Show comments')" @click="toggleDiscussion({ discussionId: discussion.id })" > - <gl-icon v-if="discussion.expanded" name="collapse" class="collapse-icon" /> - <template v-else> - {{ index + 1 }} - </template> + <gl-icon name="collapse" class="collapse-icon" /> </button> + <design-note-pin + v-else + :label="index + 1" + :is-resolved="discussion.resolved" + size="sm" + class="js-diff-notes-toggle gl-translate-x-n50" + @click="toggleDiscussion({ discussionId: discussion.id })" + /> </template> <noteable-discussion v-show="isExpanded(discussion)" @@ -87,9 +91,12 @@ export default { @noteDeleted="deleteNoteHandler" > <template v-if="renderAvatarBadge" #avatar-badge> - <span class="badge badge-pill"> - {{ index + 1 }} - </span> + <design-note-pin + :label="index + 1" + class="user-avatar" + :is-resolved="discussion.resolved" + size="sm" + /> </template> </noteable-discussion> </ul> |