diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 14:25:15 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-09-01 14:25:15 +0100 |
commit | 64e23d75406188ab318c3727a38582bc496687c8 (patch) | |
tree | 52c9639de86bfee848c4e86b1434dc2515c746ef /app | |
parent | 1c4d39c16940795054a886fbc59fc13a00ebfe40 (diff) | |
download | gitlab-ce-64e23d75406188ab318c3727a38582bc496687c8.tar.gz |
Improves popover to show on focus
CSS improvements after review
Diffstat (limited to 'app')
4 files changed, 15 insertions, 24 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 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..1fa815970eb 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -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; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 9071e1ca0c8..aaa0b344af5 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -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; -} |