diff options
Diffstat (limited to 'app/assets/javascripts/issuable_type_selector/components/info_popover.vue')
-rw-r--r-- | app/assets/javascripts/issuable_type_selector/components/info_popover.vue | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable_type_selector/components/info_popover.vue b/app/assets/javascripts/issuable_type_selector/components/info_popover.vue new file mode 100644 index 00000000000..3a20ccba814 --- /dev/null +++ b/app/assets/javascripts/issuable_type_selector/components/info_popover.vue @@ -0,0 +1,41 @@ +<script> +import { GlIcon, GlPopover } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + i18n: { + issueTypes: __('Issue types'), + issue: __('Issue'), + incident: __('Incident'), + issueHelpText: __('For general work'), + incidentHelpText: __('For investigating IT service disruptions or outages'), + }, + components: { + GlIcon, + GlPopover, + }, +}; +</script> + +<template> + <span id="popovercontainer"> + <gl-icon id="issuable-type-info" name="question-o" class="gl-ml-5 gl-text-gray-500" /> + <gl-popover + target="issuable-type-info" + container="popovercontainer" + :title="$options.i18n.issueTypes" + triggers="focus hover" + > + <ul class="gl-list-style-none gl-p-0 gl-m-0"> + <li class="gl-mb-3"> + <div class="gl-font-weight-bold">{{ $options.i18n.issue }}</div> + <span>{{ $options.i18n.issueHelpText }}</span> + </li> + <li> + <div class="gl-font-weight-bold">{{ $options.i18n.incident }}</div> + <span>{{ $options.i18n.incidentHelpText }}</span> + </li> + </ul> + </gl-popover> + </span> +</template> |