diff options
Diffstat (limited to 'app/assets/javascripts/issues/show/components/title.vue')
-rw-r--r-- | app/assets/javascripts/issues/show/components/title.vue | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/app/assets/javascripts/issues/show/components/title.vue b/app/assets/javascripts/issues/show/components/title.vue new file mode 100644 index 00000000000..5e92211685a --- /dev/null +++ b/app/assets/javascripts/issues/show/components/title.vue @@ -0,0 +1,90 @@ +<script> +import { GlButton, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import { __ } from '~/locale'; +import eventHub from '../event_hub'; +import animateMixin from '../mixins/animate'; + +export default { + i18n: { + editTitleAndDescription: __('Edit title and description'), + }, + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + SafeHtml, + }, + mixins: [animateMixin], + props: { + issuableRef: { + type: [String, Number], + required: true, + }, + canUpdate: { + required: false, + type: Boolean, + default: false, + }, + titleHtml: { + type: String, + required: true, + }, + titleText: { + type: String, + required: true, + }, + showInlineEditButton: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + preAnimation: false, + pulseAnimation: false, + titleEl: document.querySelector('title'), + }; + }, + watch: { + titleHtml() { + this.setPageTitle(); + this.animateChange(); + }, + }, + methods: { + setPageTitle() { + const currentPageTitleScope = this.titleEl.innerText.split('·'); + currentPageTitleScope[0] = `${this.titleText} (${this.issuableRef}) `; + this.titleEl.textContent = currentPageTitleScope.join('·'); + }, + edit() { + eventHub.$emit('open.form'); + }, + }, +}; +</script> + +<template> + <div class="title-container"> + <h2 + v-safe-html="titleHtml" + :class="{ + 'issue-realtime-pre-pulse': preAnimation, + 'issue-realtime-trigger-pulse': pulseAnimation, + }" + class="title qa-title" + dir="auto" + ></h2> + <gl-button + v-if="showInlineEditButton && canUpdate" + v-gl-tooltip.bottom + icon="pencil" + class="btn-edit js-issuable-edit qa-edit-button" + :title="$options.i18n.editTitleAndDescription" + :aria-label="$options.i18n.editTitleAndDescription" + @click="edit" + /> + </div> +</template> |