Commit 64e23d75 authored by Filipa Lacerda's avatar Filipa Lacerda

Improves popover to show on focus

CSS improvements after review
parent 1c4d39c1
...@@ -25,11 +25,15 @@ ...@@ -25,11 +25,15 @@
user() { user() {
return this.pipeline.user; return this.pipeline.user;
}, },
autoDevOpsTitle() { popoverOptions() {
return '<div class="autodevops-title">This pipeline makes use of a predefined CI/CD configuration enabled by <b>Auto DevOps.</b></div>'; return {
}, html: true,
autoDevOpsContent() { delay: { hide: 600 },
return `<a class="autodevops-link" href="${this.autoDevopsHelpPath}" target="_blank" rel="noopener noreferrer nofollow">Learn more about Auto DevOps</a>`; 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 @@ ...@@ -71,14 +75,9 @@
</span> </span>
<a <a
v-if="pipeline.flags.auto_devops" v-if="pipeline.flags.auto_devops"
class="js-pipeline-url-autodevops label label-info" class="js-pipeline-url-autodevops label label-info autodevops-link"
v-popover:html v-popover="popoverOptions"
tabindex="0" role="button">
role="button"
data-trigger="focus"
data-placement="top"
:title="autoDevOpsTitle"
:data-content="autoDevOpsContent">
Auto DevOps Auto DevOps
</a> </a>
<span <span
......
...@@ -7,15 +7,11 @@ ...@@ -7,15 +7,11 @@
* { * {
* directives: [popover] * directives: [popover]
* } * }
* <a v-popover>popover</a> * <a v-popover="{options}">popover</a>
*/ */
export default { export default {
bind(el, binding) { bind(el, binding) {
const renderHTML = binding.arg === 'html'; $(el).popover(binding.value);
$(el).popover({
html: renderHTML,
});
}, },
unbind(el) { unbind(el) {
......
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
.commit, .commit,
.generic_commit_status { .generic_commit_status {
a:not(.label):not(.autodevops-link), a:not(.autodevops-link),
button { button {
color: $gl-text-color; color: $gl-text-color;
vertical-align: baseline; vertical-align: baseline;
......
...@@ -936,7 +936,3 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -936,7 +936,3 @@ button.mini-pipeline-graph-dropdown-toggle {
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
line-height: 1.5; line-height: 1.5;
} }
.autodevops-link {
color: $gl-link-color;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment