diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 09:08:20 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 09:08:20 +0000 |
commit | d80f3cd75e700b6e62910865bfd36734644ffa89 (patch) | |
tree | aa2fa2f2b4385854c13591bef8e74924ef661657 /app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue | |
parent | be81c1578d65f25edfde8aa550f190b8d3e6d976 (diff) | |
download | gitlab-ce-d80f3cd75e700b6e62910865bfd36734644ffa89.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue')
-rw-r--r-- | app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue new file mode 100644 index 00000000000..fa3c19921df --- /dev/null +++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue @@ -0,0 +1,85 @@ +<script> +import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui'; +import Cookies from 'js-cookie'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import { s__ } from '~/locale'; +import { glEmojiTag } from '~/emoji'; + +export default { + components: { + GlPopover, + GlSprintf, + GlIcon, + GlButton, + }, + props: { + target: { + type: String, + required: true, + }, + cssClass: { + type: String, + required: true, + }, + dismissKey: { + type: String, + required: true, + }, + }, + data() { + return { + popoverDismissed: parseBoolean(Cookies.get(this.dismissKey)), + }; + }, + computed: { + suggestTitle() { + return s__(`suggestPipeline|1/2: Choose a template`); + }, + suggestContent() { + return s__( + `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`, + ); + }, + emoji() { + return glEmojiTag('wave'); + }, + }, + methods: { + onDismiss() { + this.popoverDismissed = true; + Cookies.set(this.dismissKey, this.popoverDismissed, { expires: 365 }); + }, + }, +}; +</script> + +<template> + <gl-popover + v-if="!popoverDismissed" + show + :target="target" + placement="rightbottom" + trigger="manual" + container="viewport" + :css-classes="[cssClass]" + > + <template #title> + <gl-button :aria-label="__('Close')" class="btn-blank float-right" @click="onDismiss"> + <gl-icon name="close" aria-hidden="true" /> + </gl-button> + {{ suggestTitle }} + </template> + + <gl-sprintf :message="suggestContent"> + <template #bold="{content}"> + <strong> {{ content }} </strong> + </template> + <template #footer="{content}"> + <div class="mt-3"> + {{ content }} + <span v-html="emoji"></span> + </div> + </template> + </gl-sprintf> + </gl-popover> +</template> |