diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue | 67 |
1 files changed, 43 insertions, 24 deletions
diff --git a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue index 93f21f4fad8..835206ee667 100644 --- a/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue +++ b/app/assets/javascripts/work_items/components/notes/work_item_note_actions.vue @@ -1,5 +1,11 @@ <script> -import { GlButton, GlIcon, GlTooltipDirective, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { + GlButton, + GlIcon, + GlTooltipDirective, + GlDisclosureDropdown, + GlDisclosureDropdownItem, +} from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import { __, s__ } from '~/locale'; import ReplyButton from '~/notes/components/note_actions/reply_button.vue'; @@ -20,9 +26,9 @@ export default { components: { GlButton, GlIcon, + GlDisclosureDropdown, + GlDisclosureDropdownItem, ReplyButton, - GlDropdown, - GlDropdownItem, EmojiPicker: () => import('~/emoji/components/picker.vue'), }, directives: { @@ -75,6 +81,7 @@ export default { : this.$options.i18n.assignUserText; }, }, + methods: { async setAwardEmoji(name) { try { @@ -98,6 +105,10 @@ export default { Sentry.captureException(error); } }, + emitEvent(eventName) { + this.$emit(eventName); + this.$refs.dropdown.close(); + }, }, }; </script> @@ -135,46 +146,54 @@ export default { :aria-label="$options.i18n.editButtonText" @click="$emit('startEditing')" /> - <gl-dropdown + <gl-disclosure-dropdown + ref="dropdown" v-gl-tooltip data-testid="work-item-note-actions" icon="ellipsis_v" text-sr-only - right - :text="$options.i18n.moreActionsText" + placement="right" + :toggle-text="$options.i18n.moreActionsText" :title="$options.i18n.moreActionsText" category="tertiary" no-caret > - <gl-dropdown-item + <gl-disclosure-dropdown-item v-if="canReportAbuse" data-testid="abuse-note-action" - @click="$emit('reportAbuse')" + @action="emitEvent('reportAbuse')" > - {{ $options.i18n.reportAbuseText }} - </gl-dropdown-item> - <gl-dropdown-item + <template #list-item> + {{ $options.i18n.reportAbuseText }} + </template> + </gl-disclosure-dropdown-item> + <gl-disclosure-dropdown-item data-testid="copy-link-action" :data-clipboard-text="noteUrl" - @click="$emit('notifyCopyDone')" + @action="emitEvent('notifyCopyDone')" > - <span>{{ $options.i18n.copyLinkText }}</span> - </gl-dropdown-item> - <gl-dropdown-item + <template #list-item> + {{ $options.i18n.copyLinkText , }} + </template> + </gl-disclosure-dropdown-item> + <gl-disclosure-dropdown-item v-if="showAssignUnassign" data-testid="assign-note-action" - @click="$emit('assignUser')" + @action="emitEvent('assignUser')" > - {{ assignUserActionText }} - </gl-dropdown-item> - <gl-dropdown-item + <template #list-item> + {{ assignUserActionText }} + </template> + </gl-disclosure-dropdown-item> + <gl-disclosure-dropdown-item v-if="showEdit" - variant="danger" data-testid="delete-note-action" - @click="$emit('deleteNote')" + @action="emitEvent('deleteNote')" > - {{ $options.i18n.deleteNoteText }} - </gl-dropdown-item> - </gl-dropdown> + <template #list-item> + <span class="gl-text-red-500">{{ $options.i18n.deleteNoteText }}</span> + </template> + </gl-disclosure-dropdown-item> + </gl-disclosure-dropdown> </div> </template> |