Improves popover to show on focus
CSS improvements after review
This commit is contained in:
parent
1c4d39c169
commit
64e23d7540
|
@ -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
|
||||
|
|
|
@ -7,15 +7,11 @@
|
|||
* {
|
||||
* directives: [popover]
|
||||
* }
|
||||
* <a v-popover>popover</a>
|
||||
* <a v-popover="{options}">popover</a>
|
||||
*/
|
||||
export default {
|
||||
bind(el, binding) {
|
||||
const renderHTML = binding.arg === 'html';
|
||||
|
||||
$(el).popover({
|
||||
html: renderHTML,
|
||||
});
|
||||
$(el).popover(binding.value);
|
||||
},
|
||||
|
||||
unbind(el) {
|
||||
|
|
|
@ -220,7 +220,7 @@
|
|||
.commit,
|
||||
.generic_commit_status {
|
||||
|
||||
a:not(.label):not(.autodevops-link),
|
||||
a:not(.autodevops-link),
|
||||
button {
|
||||
color: $gl-text-color;
|
||||
vertical-align: baseline;
|
||||
|
|
|
@ -936,7 +936,3 @@ button.mini-pipeline-graph-dropdown-toggle {
|
|||
font-weight: $gl-font-weight-normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.autodevops-link {
|
||||
color: $gl-link-color;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue