diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/image_diff_overlay.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/image_diff_overlay.vue | 44 |
1 files changed, 21 insertions, 23 deletions
diff --git a/app/assets/javascripts/diffs/components/image_diff_overlay.vue b/app/assets/javascripts/diffs/components/image_diff_overlay.vue index eede8e52292..8871be1f9af 100644 --- a/app/assets/javascripts/diffs/components/image_diff_overlay.vue +++ b/app/assets/javascripts/diffs/components/image_diff_overlay.vue @@ -1,8 +1,8 @@ <script> -import { GlIcon } from '@gitlab/ui'; import { isArray } from 'lodash'; import { mapActions, mapGetters } from 'vuex'; import imageDiffMixin from 'ee_else_ce/diffs/mixins/image_diff'; +import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; function calcPercent(pos, renderedSize) { return (100 * pos) / renderedSize; @@ -11,7 +11,7 @@ function calcPercent(pos, renderedSize) { export default { name: 'ImageDiffOverlay', components: { - GlIcon, + DesignNotePin, }, mixins: [imageDiffMixin], props: { @@ -36,7 +36,7 @@ export default { badgeClass: { type: String, required: false, - default: 'badge badge-pill', + default: '', }, shouldToggleDiscussion: { type: Boolean, @@ -114,30 +114,28 @@ export default { > <span class="sr-only"> {{ __('Add image comment') }} </span> </button> - <button + + <design-note-pin v-for="(discussion, index) in allDiscussions" :key="discussion.id" - :style="getPosition(discussion)" - :class="[badgeClass, { 'is-draft': discussion.isDraft }]" - :disabled="!shouldToggleDiscussion" - class="js-image-badge" - type="button" + :label="showCommentIcon ? null : toggleText(discussion, index)" + :position="getPosition(discussion)" :aria-label="__('Show comments')" + class="js-image-badge" + :class="badgeClass" + :is-draft="discussion.isDraft" + :is-resolved="discussion.resolved" + is-on-image + :disabled="!shouldToggleDiscussion" @click="clickedToggle(discussion)" - > - <gl-icon v-if="showCommentIcon" name="image-comment-dark" :size="24" /> - <template v-else> - {{ toggleText(discussion, index) }} - </template> - </button> - <button + /> + + <design-note-pin v-if="canComment && currentCommentForm" - :style="{ left: `${currentCommentForm.xPercent}%`, top: `${currentCommentForm.yPercent}%` }" - :aria-label="__('Comment form position')" - class="btn-transparent comment-indicator position-absolute" - type="button" - > - <gl-icon name="image-comment-dark" :size="24" /> - </button> + :position="{ + left: `${currentCommentForm.xPercent}%`, + top: `${currentCommentForm.yPercent}%`, + }" + /> </div> </template> |