summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJustin Boyson <jboyson@gitlab.com>2019-06-01 02:12:45 +0000
committerMike Greiling <mike@pixelcog.com>2019-06-01 02:12:45 +0000
commit3c6dc87ea8d0a467642da2ac4fc0037ff220af89 (patch)
tree65ea738998d507b04b81c7a96e9baffa1b26af25
parent15916ad55920ca582a9124f7f0737b0373432a99 (diff)
downloadgitlab-ce-3c6dc87ea8d0a467642da2ac4fc0037ff220af89.tar.gz
Make tooltips consistently render on top
On edit-button simply set position to top. Made this change directly in template since edit-button is only used in one place. Had to wrap the comments toggle button in span tag to make tooltip show even when disabled as per bootstrap-vue docs. https://bootstrap-vue.js.org/docs/components/tooltip#overview Note: Also changexc button to gl-buttonto be consistent with rest of file.
-rw-r--r--app/assets/javascripts/diffs/components/diff_file_header.vue21
-rw-r--r--app/assets/javascripts/diffs/components/edit_button.vue2
-rw-r--r--changelogs/unreleased/61821-tooltip-consistency.yml5
3 files changed, 17 insertions, 11 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index d26b58d461a..eb9f1465945 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -254,16 +254,17 @@ export default {
<diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
<div class="btn-group" role="group">
<template v-if="diffFile.blob && diffFile.blob.readable_text">
- <button
- :disabled="!diffHasDiscussions(diffFile)"
- :class="{ active: hasExpandedDiscussions }"
- :title="s__('MergeRequests|Toggle comments for this file')"
- class="js-btn-vue-toggle-comments btn"
- type="button"
- @click="handleToggleDiscussions"
- >
- <icon name="comment" />
- </button>
+ <span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')">
+ <gl-button
+ :disabled="!diffHasDiscussions(diffFile)"
+ :class="{ active: hasExpandedDiscussions }"
+ class="js-btn-vue-toggle-comments btn"
+ type="button"
+ @click="handleToggleDiscussions"
+ >
+ <icon name="comment" />
+ </gl-button>
+ </span>
<edit-button
v-if="!diffFile.deleted_file"
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index f0cc5de4b33..dcb79cd5e16 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -38,7 +38,7 @@ export default {
<template>
<gl-button
- v-gl-tooltip.bottom
+ v-gl-tooltip.top
:href="editPath"
:title="__('Edit file')"
class="js-edit-blob"
diff --git a/changelogs/unreleased/61821-tooltip-consistency.yml b/changelogs/unreleased/61821-tooltip-consistency.yml
new file mode 100644
index 00000000000..9b131907ebf
--- /dev/null
+++ b/changelogs/unreleased/61821-tooltip-consistency.yml
@@ -0,0 +1,5 @@
+---
+title: Resolve Tooltip Consistency
+merge_request: 28839
+author:
+type: fixed