diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 16:25:15 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 16:25:15 +0300 |
commit | 64e23d75406188ab318c3727a38582bc496687c8 (patch) | |
tree | 52c9639de86bfee848c4e86b1434dc2515c746ef /app/assets/javascripts/pipelines/components/pipeline_url.vue | |
parent | 1c4d39c16940795054a886fbc59fc13a00ebfe40 (diff) |
Improves popover to show on focus
CSS improvements after review
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipeline_url.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_url.vue | 25 |
1 files changed, 12 insertions, 13 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index b4a7fbec5f9..db10abdae83 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -25,11 +25,15 @@ user() { return this.pipeline.user; }, - autoDevOpsTitle() { - return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>'; - }, - autoDevOpsContent() { - return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`; + popoverOptions() { + return { + html: true, + delay: { hide: 600 }, + trigger: 'hover', + placement: 'top', + title: '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>', + content: `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`, + }; }, }, }; @@ -71,14 +75,9 @@ </span> <a v-if="pipeline.flags.auto_devops" - class="js-pipeline-url-autodevops label label-info" - v-popover:html - tabindex="0" - role="button" - data-trigger="focus" - data-placement="top" - :title="autoDevOpsTitle" - :data-content="autoDevOpsContent"> + class="js-pipeline-url-autodevops label label-info autodevops-link" + v-popover="popoverOptions" + role="button"> Auto DevOps </a> <span |