root
/
gitlab-ce
mirror of https://gitlab.com/free-releases/gitlab-ce.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Replaces tooltip directive with gl-tooltip directive

This commit is contained in:
Filipa Lacerda 2018-11-08 15:02:49 +00:00 committed by Clement Ho
parent bd3a793fb7
commit dd98ce272a
11 changed files with 41 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/environments/components/environment_external_url.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import { s__ } from '~/locale';
import { s__ } from '../../locale';
/** /**
* Renders the external url link in environments table. * Renders the external url link in environments table.
@ -11,7 +11,7 @@ export default {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
externalUrl: { externalUrl: {
@ -28,12 +28,11 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="externalUrl" :href="externalUrl"
class="btn external-url" class="btn external-url"
data-container="body"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
> >

6
app/assets/javascripts/environments/components/environment_item.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import Timeago from 'timeago.js'; import Timeago from 'timeago.js';
import _ from 'underscore'; import _ from 'underscore';
import tooltip from '~/vue_shared/directives/tooltip'; import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import { humanize } from '~/lib/utils/text_utility'; import { humanize } from '~/lib/utils/text_utility';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
@ -36,7 +36,7 @@ export default {
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
@ -455,7 +455,7 @@ export default {
class="gl-responsive-table-row" class="gl-responsive-table-row"
role="row"> role="row">
<div <div
v-tooltip v-gl-tooltip
:title="model.name" :title="model.name"
class="table-section section-wrap section-15 text-truncate" class="table-section section-wrap section-15 text-truncate"
role="gridcell" role="gridcell"

8
app/assets/javascripts/environments/components/environment_monitoring.vue
View File

@ -2,9 +2,8 @@
/** /**
* Renders the Monitoring (Metrics) link in environments table. * Renders the Monitoring (Metrics) link in environments table.
*/ */
import { GlButton } from '@gitlab-org/gitlab-ui'; import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
@ -12,7 +11,7 @@ export default {
GlButton, GlButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
monitoringUrl: { monitoringUrl: {
@ -29,12 +28,11 @@ export default {
</script> </script>
<template> <template>
<gl-button <gl-button
v-tooltip v-gl-tooltip
:href="monitoringUrl" :href="monitoringUrl"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
class="monitoring-url d-none d-sm-none d-md-block" class="monitoring-url d-none d-sm-none d-md-block"
data-container="body"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
variant="default" variant="default"
> >

17
app/assets/javascripts/environments/components/environment_rollback.vue
View File

@ -6,21 +6,18 @@
* Makes a post request when the button is clicked. * Makes a post request when the button is clicked.
*/ */
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
export default { export default {
components: { components: {
Icon, Icon,
GlLoadingIcon, GlLoadingIcon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
retryUrl: { retryUrl: {
type: String, type: String,
@ -57,21 +54,21 @@ export default {
</script> </script>
<template> <template>
<button <button
v-tooltip v-gl-tooltip
:disabled="isLoading" :disabled="isLoading"
:title="title" :title="title"
type="button" type="button"
class="btn d-none d-sm-none d-md-block" class="btn d-none d-sm-none d-md-block"
@click="onClick" @click="onClick"
> >
<icon <icon
v-if="isLastDeployment" v-if="isLastDeployment"
name="repeat" /> name="repeat"
/>
<icon <icon
v-else v-else
name="redo"/> name="redo"
/>
<gl-loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</button> </button>
</template> </template>

14
app/assets/javascripts/environments/components/environment_stop.vue
View File

@ -5,49 +5,42 @@
*/ */
import $ from 'jquery'; import $ from 'jquery';
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import LoadingButton from '../../vue_shared/components/loading_button.vue'; import LoadingButton from '../../vue_shared/components/loading_button.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
Icon, Icon,
LoadingButton, LoadingButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
environment: { environment: {
type: Object, type: Object,
required: true, required: true,
}, },
}, },
data() { data() {
return { return {
isLoading: false, isLoading: false,
}; };
}, },
computed: { computed: {
title() { title() {
return s__('Environments|Stop environment'); return s__('Environments|Stop environment');
}, },
}, },
mounted() { mounted() {
eventHub.$on('stopEnvironment', this.onStopEnvironment); eventHub.$on('stopEnvironment', this.onStopEnvironment);
}, },
beforeDestroy() { beforeDestroy() {
eventHub.$off('stopEnvironment', this.onStopEnvironment); eventHub.$off('stopEnvironment', this.onStopEnvironment);
}, },
methods: { methods: {
onClick() { onClick() {
$(this.$el).tooltip('dispose'); $(this.$el).tooltip('dispose');
@ -63,12 +56,11 @@ export default {
</script> </script>
<template> <template>
<loading-button <loading-button
v-tooltip v-gl-tooltip
:loading="isLoading" :loading="isLoading"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
container-class="btn btn-danger d-none d-sm-none d-md-block" container-class="btn btn-danger d-none d-sm-none d-md-block"
data-container="body"
data-toggle="modal" data-toggle="modal"
data-target="#stop-environment-modal" data-target="#stop-environment-modal"
@click="onClick" @click="onClick"

7
app/assets/javascripts/environments/components/environment_terminal_button.vue
View File

@ -3,15 +3,15 @@
* Renders a terminal button to open a web terminal. * Renders a terminal button to open a web terminal.
* Used in environments table. * Used in environments table.
*/ */
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
components: { components: {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
terminalPath: { terminalPath: {
@ -29,12 +29,11 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="terminalPath" :href="terminalPath"
class="btn terminal-button d-none d-sm-none d-md-block" class="btn terminal-button d-none d-sm-none d-md-block"
data-container="body"
> >
<icon name="terminal" /> <icon name="terminal" />
</a> </a>

6
app/assets/javascripts/environments/components/stop_environment_modal.vue
View File

@ -1,7 +1,7 @@
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import GlModal from '~/vue_shared/components/gl_modal.vue'; import GlModal from '~/vue_shared/components/gl_modal.vue';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
@ -15,7 +15,7 @@ export default {
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
@ -67,7 +67,7 @@ export default {
> >
Stopping Stopping
<span <span
v-tooltip v-gl-tooltip
:title="environment.name" :title="environment.name"
class="text-truncate ml-1 mr-1 flex-fill" class="text-truncate ml-1 mr-1 flex-fill"
>{{ environment.name }}</span> >{{ environment.name }}</span>

8
app/assets/javascripts/vue_shared/components/changed_file_icon.vue
View File

@ -1,5 +1,5 @@
<script> <script>
import tooltip from '~/vue_shared/directives/tooltip'; import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import { pluralize } from '~/lib/utils/text_utility'; import { pluralize } from '~/lib/utils/text_utility';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
@ -10,7 +10,7 @@ export default {
Icon, Icon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
file: { file: {
@ -79,10 +79,8 @@ export default {
<template> <template>
<span <span
v-tooltip v-gl-tooltip.right
:title="tooltipTitle" :title="tooltipTitle"
data-container="body"
data-placement="right"
class="file-changed-icon ml-auto" class="file-changed-icon ml-auto"
> >
<icon <icon

6
app/assets/javascripts/vue_shared/components/ci_badge_link.vue
View File

@ -1,6 +1,6 @@
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import CiIcon from './ci_icon.vue'; import CiIcon from './ci_icon.vue';
import tooltip from '../directives/tooltip';
/** /**
* Renders CI Badge link with CI icon and status text based on * Renders CI Badge link with CI icon and status text based on
* API response shared between all places where it is used. * API response shared between all places where it is used.
@ -27,7 +27,7 @@ export default {
CiIcon, CiIcon,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
status: { status: {
@ -50,7 +50,7 @@ export default {
</script> </script>
<template> <template>
<a <a
v-tooltip v-gl-tooltip
:href="status.details_path" :href="status.details_path"
:class="cssClass" :class="cssClass"
:title="!showText ? status.text : ''" :title="!showText ? status.text : ''"

7
app/assets/javascripts/vue_shared/components/commit.vue
View File

@ -1,11 +1,11 @@
<script> <script>
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
import UserAvatarLink from './user_avatar/user_avatar_link.vue'; import UserAvatarLink from './user_avatar/user_avatar_link.vue';
import tooltip from '../directives/tooltip';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
export default { export default {
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
components: { components: {
UserAvatarLink, UserAvatarLink,
@ -124,11 +124,10 @@ export default {
</div> </div>
<a <a
v-tooltip v-gl-tooltip
:href="commitRef.ref_url" :href="commitRef.ref_url"
:title="commitRef.name" :title="commitRef.name"
class="ref-name" class="ref-name"
data-container="body"
> >
{{ commitRef.name }} {{ commitRef.name }}
</a> </a>

6
changelogs/unreleased/51259-ci-cd-tooltips.yml Normal file
View File

@ -0,0 +1,6 @@
---
title: Replaces tooltip directive with the new gl-tooltip directive for consistency
in some ci/cd code
merge_request:
author:
type: other