Commit 02e74971 authored by George Tsiolis's avatar George Tsiolis

Replace tooltip directive with gl-tooltip directive in badges, cycle analytics, and diffs

parent 62e0877d
<script>
import Icon from '~/vue_shared/components/icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
import { GlLoadingIcon } from '@gitlab/ui';
import { GlLoadingIcon, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
export default {
name: 'Badge',
components: {
Icon,
Tooltip,
GlLoadingIcon,
},
directives: {
Tooltip,
GlTooltip: GlTooltipDirective,
},
props: {
imageUrl: {
......@@ -93,7 +92,7 @@ export default {
<button
v-show="hasError"
v-tooltip
v-gl-tooltip
:title="s__('Badges|Reload badge image')"
class="btn btn-transparent btn-sm text-primary"
type="button"
......
<script>
import tooltip from '../../vue_shared/directives/tooltip';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
export default {
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
},
props: {
count: {
......@@ -16,13 +16,12 @@ export default {
<template>
<span v-if="count === 50" class="events-info float-right">
<i
v-tooltip
v-gl-tooltip.top
:title="
n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)
"
class="fa fa-warning"
aria-hidden="true"
data-placement="top"
>
</i>
{{ n__('Showing %d event', 'Showing %d events', 50) }}
......
<script>
import tooltip from '~/vue_shared/directives/tooltip';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import Icon from '~/vue_shared/components/icon.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
......@@ -21,9 +20,6 @@ import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_sta
*
*/
export default {
directives: {
tooltip,
},
components: {
UserAvatarLink,
Icon,
......
<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import Tooltip from '@gitlab/ui/dist/directives/tooltip';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import { __ } from '~/locale';
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
import Icon from '~/vue_shared/components/icon.vue';
......@@ -12,7 +12,7 @@ export default {
Icon,
},
directives: {
Tooltip,
GlTooltip: GlTooltipDirective,
},
props: {
mergeRequestDiffs: {
......@@ -75,7 +75,7 @@ export default {
<div class="mr-version-controls">
<div class="mr-version-menus-container content-block">
<button
v-tooltip.hover
v-gl-tooltip.hover
type="button"
class="btn btn-default append-right-8 js-toggle-tree-list"
:class="{
......
......@@ -4,7 +4,7 @@ import { mapActions, mapGetters } from 'vuex';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import { truncateSha } from '~/lib/utils/text_utility';
import { __, s__, sprintf } from '~/locale';
import EditButton from './edit_button.vue';
......@@ -17,7 +17,7 @@ export default {
FileIcon,
},
directives: {
Tooltip,
GlTooltip: GlTooltipDirective,
},
props: {
discussionPath: {
......@@ -161,23 +161,22 @@ export default {
/>
<span v-if="diffFile.renamed_file">
<strong
v-tooltip
v-gl-tooltip
:title="diffFile.old_path"
class="file-title-name"
data-container="body"
v-html="diffFile.old_path_html"
></strong>
<strong
v-tooltip
v-gl-tooltip
:title="diffFile.new_path"
class="file-title-name"
data-container="body"
v-html="diffFile.new_path_html"
></strong>
</span>
<strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
<strong v-else v-gl-tooltip :title="filePath" class="file-title-name" data-container="body">
{{ filePath }}
</strong>
</a>
......@@ -233,7 +232,7 @@ export default {
<a
v-if="diffFile.external_url"
v-tooltip
v-gl-tooltip
:href="diffFile.external_url"
:title="`View on ${diffFile.formatted_external_url}`"
target="_blank"
......
<script>
import tooltip from '../directives/tooltip';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import timeagoMixin from '../mixins/timeago';
import '../../lib/utils/datetime_utility';
......@@ -9,7 +9,7 @@ import '../../lib/utils/datetime_utility';
export default {
directives: {
tooltip,
GlTooltip: GlTooltipDirective,
},
mixins: [timeagoMixin],
props: {
......@@ -34,11 +34,10 @@ export default {
</script>
<template>
<time
v-tooltip
v-gl-tooltip="{ placement: tooltipPlacement }"
:class="cssClass"
:title="tooltipTitle(time)"
:data-placement="tooltipPlacement"
data-container="body"
v-text="timeFormated(time)"
>
</time>
......
---
title: Replace tooltip directive with gl-tooltip diretive in badges, cycle analytics, and diffs
merge_request: 22770
author: George Tsiolis
type: performance
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment