diff options
5 files changed, 29 insertions, 26 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index b4a7fbec5f9..f0b44dfa6d8 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -25,17 +25,21 @@ 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>`, + }; }, }, }; </script> <template> - <div class="table-section section-15 hidden-xs hidden-sm"> + <div class="table-section section-15 hidden-xs hidden-sm pipeline-tags"> <a :href="pipeline.path" class="js-pipeline-url-link"> @@ -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-badge" + v-popover="popoverOptions" + role="button"> Auto DevOps </a> <span diff --git a/app/assets/javascripts/pipelines/components/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines.vue index 75e40da6d28..5ce4fe58e55 100644 --- a/app/assets/javascripts/pipelines/components/pipelines.vue +++ b/app/assets/javascripts/pipelines/components/pipelines.vue @@ -27,7 +27,7 @@ endpoint: pipelinesData.endpoint, cssClass: pipelinesData.cssClass, helpPagePath: pipelinesData.helpPagePath, - autoDevopsPath: pipelinesData.helpautoDevopsPath, + autoDevopsPath: pipelinesData.helpAutoDevopsPath, newPipelinePath: pipelinesData.newPipelinePath, canCreatePipeline: pipelinesData.canCreatePipeline, allPath: pipelinesData.allPath, diff --git a/app/assets/javascripts/vue_shared/directives/popover.js b/app/assets/javascripts/vue_shared/directives/popover.js index ac78231a347..05fa563cbd0 100644 --- a/app/assets/javascripts/vue_shared/directives/popover.js +++ b/app/assets/javascripts/vue_shared/directives/popover.js @@ -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) { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 525e1d57fee..bfa2a155cdf 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -220,12 +220,20 @@ .commit, .generic_commit_status { - a:not(.label):not(.autodevops-link), + a, button { color: $gl-text-color; vertical-align: baseline; } + a.autodevops-badge { + color: $white-light; + } + + a.autodevops-link { + color: $gl-link-color; + } + .commit-row-description { font-size: 14px; padding: 10px 15px; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 883f7b392c0..8e1550d4113 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -202,6 +202,10 @@ .btn-group.open .dropdown-toggle { box-shadow: none; } + + .pipeline-tags .label-container { + white-space: normal; + } } .stage-cell { @@ -935,7 +939,3 @@ button.mini-pipeline-graph-dropdown-toggle { font-weight: $gl-font-weight-normal; line-height: 1.5; } - -.autodevops-link { - color: $gl-link-color; -} |