Commit fe537775 authored by Enrique Alcántara's avatar Enrique Alcántara

Merge branch '225242-use-pointer-crosshair-when-hovering-on-the-design-view' into 'master'

Use crosshair cursor when hovering on the design view

See merge request gitlab-org/gitlab!39671
parents 191d1f65 9c25100f
<script>
import { __ } from '~/locale';
import activeDiscussionQuery from '../graphql/queries/active_discussion.query.graphql';
import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
import DesignNotePin from './design_note_pin.vue';
......@@ -242,12 +243,15 @@ export default {
return { inactive: this.isNoteInactive(note), resolved: note.resolved };
},
},
i18n: {
newCommentButtonLabel: __('Add comment to design'),
},
};
</script>
<template>
<div
class="position-absolute image-diff-overlay frame"
class="gl-absolute gl-top-0 gl-left-0 frame"
:style="overlayStyle"
@mousemove="onOverlayMousemove"
@mouseleave="onNoteMouseup"
......@@ -255,26 +259,28 @@ export default {
<button
v-show="!disableCommenting"
type="button"
class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
role="button"
:aria-label="$options.i18n.newCommentButtonLabel"
class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent design-detail-overlay-add-comment"
data-qa-selector="design_image_button"
@mouseup="onAddCommentMouseup"
></button>
<template v-for="note in notes">
<design-note-pin
v-if="resolvedDiscussionsExpanded || !note.resolved"
:key="note.id"
:label="note.index"
:repositioning="isMovingNote(note.id)"
:position="
isMovingNote(note.id) && movingNoteNewPosition
? getNotePositionStyle(movingNoteNewPosition)
: getNotePositionStyle(note.position)
"
:class="designPinClass(note)"
@mousedown.stop="onNoteMousedown($event, note)"
@mouseup.stop="onNoteMouseup(note)"
/>
</template>
<design-note-pin
v-for="note in notes"
v-if="resolvedDiscussionsExpanded || !note.resolved"
:key="note.id"
:label="note.index"
:repositioning="isMovingNote(note.id)"
:position="
isMovingNote(note.id) && movingNoteNewPosition
? getNotePositionStyle(movingNoteNewPosition)
: getNotePositionStyle(note.position)
"
:class="designPinClass(note)"
@mousedown.stop="onNoteMousedown($event, note)"
@mouseup.stop="onNoteMouseup(note)"
/>
<design-note-pin
v-if="currentCommentForm"
......
......@@ -34,6 +34,10 @@
background-color: $gray-500;
}
}
.design-detail-overlay-add-comment {
cursor: crosshair;
}
}
.design-presentation-wrapper {
......
---
title: Use pointer:crosshair when hovering on the design view
merge_request: 39671
author:
type: changed
......@@ -1524,6 +1524,9 @@ msgstr ""
msgid "Add comment now"
msgstr ""
msgid "Add comment to design"
msgstr ""
msgid "Add deploy freeze"
msgstr ""
......
......@@ -11,7 +11,6 @@ describe('Design overlay component', () => {
const mockDimensions = { width: 100, height: 100 };
const findOverlay = () => wrapper.find('.image-diff-overlay');
const findAllNotes = () => wrapper.findAll('.js-image-badge');
const findCommentBadge = () => wrapper.find('.comment-indicator');
const findFirstBadge = () => findAllNotes().at(0);
......@@ -56,9 +55,7 @@ describe('Design overlay component', () => {
it('should have correct inline style', () => {
createComponent();
expect(wrapper.find('.image-diff-overlay').attributes().style).toBe(
'width: 100px; height: 100px; top: 0px; left: 0px;',
);
expect(wrapper.attributes().style).toBe('width: 100px; height: 100px; top: 0px; left: 0px;');
});
it('should emit `openCommentForm` when clicking on overlay', () => {
......@@ -69,7 +66,7 @@ describe('Design overlay component', () => {
};
wrapper
.find('.image-diff-overlay-add-comment')
.find('[data-qa-selector="design_image_button"]')
.trigger('mouseup', { offsetX: newCoordinates.x, offsetY: newCoordinates.y });
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('openCommentForm')).toEqual([
......@@ -309,7 +306,7 @@ describe('Design overlay component', () => {
it.each`
element | getElementFunc | event
${'overlay'} | ${findOverlay} | ${'mouseleave'}
${'overlay'} | ${() => wrapper} | ${'mouseleave'}
${'comment badge'} | ${findCommentBadge} | ${'mouseup'}
`(
'should emit `openCommentForm` event when $event fired on $element element',
......
......@@ -42,7 +42,7 @@ describe('Design management design presentation component', () => {
wrapper.element.scrollTo = jest.fn();
}
const findOverlayCommentButton = () => wrapper.find('.image-diff-overlay-add-comment');
const findOverlayCommentButton = () => wrapper.find('[data-qa-selector="design_image_button"]');
/**
* Spy on $refs and mock given values
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment