summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2017-05-16 12:01:13 +0100
committerPhil Hughes <me@iamphill.com>2017-05-16 12:01:13 +0100
commit9b93a3f2773135d9cbac3c16a5f66c42916e1f65 (patch)
treec5b12f640bd73d4c63e3246d24bf16ecf0892766
parentf53d703f44a52fc4eb50fda9ad30e5227fa8e84a (diff)
downloadgitlab-ce-9b93a3f2773135d9cbac3c16a5f66c42916e1f65.tar.gz
[ci skip]
-rw-r--r--app/assets/javascripts/vue_shared/components/markdown/field.vue2
-rw-r--r--app/assets/javascripts/vue_shared/components/markdown/header.vue8
-rw-r--r--app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue16
-rw-r--r--app/assets/javascripts/vue_shared/mixins/tooltip.js12
4 files changed, 30 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index f08ebac260e..68bbd263f02 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -60,7 +60,7 @@
},
mounted() {
/*
- GLForm class handles all the toolbar buttons etc.
+ GLForm class handles all the toolbar buttons
*/
return new gl.GLForm($(this.$refs['gl-form']));
},
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 4c9f112a2ab..7884b25c5ef 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,7 +1,11 @@
<script>
+ import tooltipMixin from '../../mixins/tooltip';
import toolbarButton from './toolbar_button.vue';
export default {
+ mixins: [
+ tooltipMixin,
+ ],
props: {
previewMarkdown: {
type: Boolean,
@@ -82,9 +86,9 @@
class="toolbar-btn js-zen-enter"
data-container="body"
tabindex="-1"
- data-toggle="tooltip"
title="Go full screen"
- type="button">
+ type="button"
+ ref="tooltip">
<i
aria-hidden="true"
class="fa fa-arrows-alt fa-fw">
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index c87a3c1e910..096be507625 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,5 +1,10 @@
<script>
+ import tooltipMixin from '../../mixins/tooltip';
+
export default {
+ mixins: [
+ tooltipMixin,
+ ],
props: {
buttonTitle: {
type: String,
@@ -24,6 +29,11 @@
default: false,
},
},
+ computed: {
+ iconClass() {
+ return `fa-${this.icon}`;
+ },
+ },
};
</script>
@@ -32,17 +42,17 @@
type="button"
class="toolbar-btn js-md hidden-xs"
tabindex="-1"
+ ref="tooltip"
+ data-container="body"
:data-md-tag="tag"
:data-md-block="tagBlock"
:data-md-prepend="prepend"
- data-container="body"
- data-toggle="tooltip"
:title="buttonTitle"
:aria-label="buttonTitle">
<i
aria-hidden="true"
class="fa fa-fw"
- :class="'fa-' + icon">
+ :class="iconClass">
</i>
</button>
</template>
diff --git a/app/assets/javascripts/vue_shared/mixins/tooltip.js b/app/assets/javascripts/vue_shared/mixins/tooltip.js
index 9bb948bff66..2e3b716a36c 100644
--- a/app/assets/javascripts/vue_shared/mixins/tooltip.js
+++ b/app/assets/javascripts/vue_shared/mixins/tooltip.js
@@ -1,9 +1,17 @@
export default {
mounted() {
- $(this.$refs.tooltip).tooltip();
+ this.$nextTick(() => {
+ $(this.$refs.tooltip).tooltip();
+ });
},
updated() {
- $(this.$refs.tooltip).tooltip('fixTitle');
+ this.$nextTick(() => {
+ $(this.$refs.tooltip).tooltip('fixTitle');
+ });
+ },
+
+ beforeDestroy() {
+ $(this.$refs.tooltip).tooltip('destroy');
},
};