diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2017-06-06 23:46:31 +0300 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2017-06-23 10:12:45 +0300 |
commit | 6cb575d612cd2470ee4224159fa16458f5426f73 (patch) | |
tree | da44a611e31d2f694ed8f3e55b1e45aac3703cae /app/assets/javascripts/pipelines | |
parent | bf0b3d835211077cb10ee3aec9ee6e0bca2304b6 (diff) |
Add support for multiple tooltips in the same Vue component
Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33223
Diffstat (limited to 'app/assets/javascripts/pipelines')
10 files changed, 57 insertions, 58 deletions
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue index abcd0c4ecea..16cc0761fc1 100644 --- a/app/assets/javascripts/pipelines/components/async_button.vue +++ b/app/assets/javascripts/pipelines/components/async_button.vue @@ -3,7 +3,7 @@ import eventHub from '../event_hub'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; -import tooltipMixin from '../../vue_shared/mixins/tooltip'; +import tooltip from '../../vue_shared/directives/tooltip'; export default { props: { @@ -28,12 +28,12 @@ export default { required: false, }, }, + directives: { + tooltip, + }, components: { loadingIcon, }, - mixins: [ - tooltipMixin, - ], data() { return { isLoading: false, @@ -58,7 +58,6 @@ export default { makeRequest() { this.isLoading = true; - $(this.$refs.tooltip).tooltip('destroy'); eventHub.$emit('postAction', this.endpoint); }, }, @@ -67,6 +66,7 @@ export default { <template> <button + v-tooltip type="button" @click="onClick" :class="buttonClass" @@ -74,7 +74,6 @@ export default { :aria-label="title" data-container="body" data-placement="top" - ref="tooltip" :disabled="isLoading"> <i :class="iconClass" diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue index 1f9e3d39779..54227425d2a 100644 --- a/app/assets/javascripts/pipelines/components/graph/action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue @@ -1,6 +1,6 @@ <script> import getActionIcon from '../../../vue_shared/ci_action_icons'; - import tooltipMixin from '../../../vue_shared/mixins/tooltip'; + import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders either a cancel, retry or play icon pointing to the given path. @@ -29,9 +29,9 @@ }, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, computed: { actionIconSvg() { @@ -46,12 +46,11 @@ </script> <template> <a + v-tooltip :data-method="actionMethod" :title="tooltipText" :href="link" - ref="tooltip" class="ci-action-icon-container" - data-toggle="tooltip" data-container="body"> <i diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue index 19cafff4e1c..18fe1847eef 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue @@ -1,6 +1,6 @@ <script> import getActionIcon from '../../../vue_shared/ci_action_icons'; - import tooltipMixin from '../../../vue_shared/mixins/tooltip'; + import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders either a cancel, retry or play icon pointing to the given path. @@ -29,9 +29,9 @@ }, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, computed: { actionIconSvg() { @@ -42,13 +42,12 @@ </script> <template> <a + v-tooltip :data-method="actionMethod" :title="tooltipText" :href="link" - ref="tooltip" rel="nofollow" class="ci-action-icon-wrapper js-ci-status-icon" - data-toggle="tooltip" data-container="body" v-html="actionIconSvg" aria-label="Job's action"> diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index d597af8dfb5..2944689a5a7 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -1,7 +1,7 @@ <script> import jobNameComponent from './job_name_component.vue'; import jobComponent from './job_component.vue'; - import tooltipMixin from '../../../vue_shared/mixins/tooltip'; + import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders the dropdown for the pipeline graph. @@ -34,9 +34,9 @@ }, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, components: { jobComponent, @@ -53,12 +53,12 @@ <template> <div> <button + v-tooltip type="button" data-toggle="dropdown" data-container="body" class="dropdown-menu-toggle build-content" - :title="tooltipText" - ref="tooltip"> + :title="tooltipText"> <job-name-component :name="job.name" diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index b39c936101e..1f5ed3f1074 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -2,7 +2,7 @@ import actionComponent from './action_component.vue'; import dropdownActionComponent from './dropdown_action_component.vue'; import jobNameComponent from './job_name_component.vue'; - import tooltipMixin from '../../../vue_shared/mixins/tooltip'; + import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders the badge for the pipeline graph and the job's dropdown. @@ -54,9 +54,9 @@ jobNameComponent, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, computed: { tooltipText() { @@ -77,12 +77,11 @@ <template> <div> <a + v-tooltip v-if="job.status.details_path" :href="job.status.details_path" :title="tooltipText" :class="cssClassJobName" - ref="tooltip" - data-toggle="tooltip" data-container="body"> <job-name-component @@ -93,10 +92,9 @@ <div v-else + v-tooltip :title="tooltipText" :class="cssClassJobName" - ref="tooltip" - data-toggle="tooltip" data-container="body"> <job-name-component diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index 8333ec0fbc3..2ca5ac2912f 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -1,6 +1,6 @@ <script> import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; -import tooltipMixin from '../../vue_shared/mixins/tooltip'; +import tooltip from '../../vue_shared/directives/tooltip'; export default { props: { @@ -12,9 +12,9 @@ export default { components: { userAvatarLink, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, computed: { user() { return this.pipeline.user; @@ -45,16 +45,16 @@ export default { <div class="label-container"> <span v-if="pipeline.flags.latest" + v-tooltip class="js-pipeline-url-latest label label-success" - title="Latest pipeline for this branch" - ref="tooltip"> + title="Latest pipeline for this branch"> latest </span> <span v-if="pipeline.flags.yaml_errors" + v-tooltip class="js-pipeline-url-yaml label label-danger" - :title="pipeline.yaml_errors" - ref="tooltip"> + :title="pipeline.yaml_errors"> yaml invalid </span> <span diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue index a6fc4f04237..01dfe51cc17 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue @@ -4,6 +4,7 @@ import playIconSvg from 'icons/_icon_play.svg'; import eventHub from '../event_hub'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import tooltip from '../../vue_shared/directives/tooltip'; export default { props: { @@ -12,6 +13,9 @@ required: true, }, }, + directives: { + tooltip, + }, components: { loadingIcon, }, @@ -25,8 +29,6 @@ onClickAction(endpoint) { this.isLoading = true; - $(this.$refs.tooltip).tooltip('destroy'); - eventHub.$emit('postAction', endpoint); }, @@ -43,13 +45,13 @@ <template> <div class="btn-group"> <button + v-tooltip type="button" - class="dropdown-new btn btn-default has-tooltip js-pipeline-dropdown-manual-actions" + class="dropdown-new btn btn-default js-pipeline-dropdown-manual-actions" title="Manual job" data-toggle="dropdown" data-placement="top" aria-label="Manual job" - ref="tooltip" :disabled="isLoading"> <span v-html="playIconSvg"></span> <i diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue index b4520481cdc..b19bd509a00 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue @@ -1,5 +1,5 @@ <script> - import tooltipMixin from '../../vue_shared/mixins/tooltip'; + import tooltip from '../../vue_shared/directives/tooltip'; export default { props: { @@ -8,9 +8,9 @@ required: true, }, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, }; </script> <template> @@ -18,12 +18,12 @@ class="btn-group" role="group"> <button + v-tooltip class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download" title="Artifacts" data-placement="top" data-toggle="dropdown" - aria-label="Artifacts" - ref="tooltip"> + aria-label="Artifacts"> <i class="fa fa-download" aria-hidden="true"> diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index c05c76c9a64..e98f35bb58c 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -16,7 +16,7 @@ /* global Flash */ import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; -import tooltipMixin from '../../vue_shared/mixins/tooltip'; +import tooltip from '../../vue_shared/directives/tooltip'; export default { props: { @@ -32,9 +32,9 @@ export default { }, }, - mixins: [ - tooltipMixin, - ], + directives: { + tooltip, + }, data() { return { @@ -132,7 +132,7 @@ export default { <template> <div class="dropdown"> <button - ref="tooltip" + v-tooltip :class="triggerButtonClass" @click="onClickStage" class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button" diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue index be3f32afa09..037684b4e72 100644 --- a/app/assets/javascripts/pipelines/components/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/time_ago.vue @@ -1,7 +1,7 @@ <script> import iconTimerSvg from 'icons/_icon_timer.svg'; import '../../lib/utils/datetime_utility'; - import tooltipMixin from '../../vue_shared/mixins/tooltip'; + import tooltip from '../../vue_shared/directives/tooltip'; import timeagoMixin from '../../vue_shared/mixins/timeago'; export default { @@ -16,9 +16,11 @@ }, }, mixins: [ - tooltipMixin, timeagoMixin, ], + directives: { + tooltip, + }, data() { return { iconTimerSvg, @@ -81,7 +83,7 @@ </i> <time - ref="tooltip" + v-tooltip data-placement="top" data-container="body" :title="tooltipTitle(finishedTime)"> |