diff options
| author | Justin Boyson <jboyson@gitlab.com> | 2019-06-01 02:12:45 +0000 |
|---|---|---|
| committer | Mike Greiling <mike@pixelcog.com> | 2019-06-01 02:12:45 +0000 |
| commit | 3c6dc87ea8d0a467642da2ac4fc0037ff220af89 (patch) | |
| tree | 65ea738998d507b04b81c7a96e9baffa1b26af25 | |
| parent | 15916ad55920ca582a9124f7f0737b0373432a99 (diff) | |
| download | gitlab-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.
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 |