Skip to content
Snippets Groups Projects
Commit bee62238 authored by Nicolas Pomepuy's avatar Nicolas Pomepuy
Browse files

Remote access: improve tooltips lifecycle

Fixes #3032
parent 9dbd9b9e
No related branches found
No related tags found
1 merge request!1833Implement the video grouping in the remote access
......@@ -31,9 +31,9 @@
</div>
<div class="d-flex flex1 justify-content-end">
<ImageButton type="cloud_off" class="blink" v-show="!appStore.socketOpened" v-on:click.stop="disconnectedClicked"
data-bs-toggle="tooltip" data-bs-placement="bottom" :title="$t('DISCONNECTED')" />
v-tooltip data-bs-placement="bottom" :title="$t('DISCONNECTED')" />
<RouterLink :to="{ name: 'SearchList' }">
<ImageButton type="search" data-bs-toggle="tooltip" data-bs-placement="bottom" :title="$t('SEARCH')" />
<ImageButton type="search" v-tooltip data-bs-placement="bottom" :title="$t('SEARCH')" />
</RouterLink>
<div class="dropdown dropstart">
<ImageButton type="more_vert" data-bs-toggle="dropdown" aria-expanded="false" />
......@@ -50,12 +50,10 @@
</div>
<div class="navtabs-container border-top" v-show="this.$route.meta.showDisplayBar">
<div class="flex1 d-flex align-items-center">
<ImageButton type="grid_view" v-on:click.stop="this.appStore.toggleDisplayType(this.$route.name)"
v-show="this.appStore.displayType[this.$route.name]" data-bs-toggle="tooltip" data-bs-placement="bottom"
:title="$t('DISPLAY_GRID')" />
<ImageButton type="view_list" v-show="!this.appStore.displayType[this.$route.name]" data-bs-toggle="tooltip"
data-bs-placement="bottom" :title="$t('DISPLAY_LIST')" aria-expanded="false"
v-on:click.stop="this.appStore.toggleDisplayType(this.$route.name)" />
<ImageButton :type="(this.appStore.displayType[this.$route.name]) ? 'grid_view' : 'view_list'" v-on:click.stop="this.appStore.toggleDisplayType(this.$route.name)"
v-tooltip data-bs-placement="bottom"
:title="$t((this.appStore.displayType[this.$route.name]) ? 'DISPLAY_GRID': 'DISPLAY_LIST')" />
<div class="dropdown" v-show="this.$route.meta.showGrouping">
<button class="btn btn-lg image-button hidden-arrow" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
......@@ -116,12 +114,12 @@
<div class="flex1 d-flex justify-content-end align-items-center">
<button class="btn btn-lg image-button" v-show="this.$route.meta.showFAB"
v-on:click.stop="$playAll(this.$route)" data-bs-toggle="tooltip" data-bs-placement="bottom"
v-on:click.stop="$playAll(this.$route)" v-tooltip data-bs-placement="bottom"
:title="$t('PLAY_ALL')">
<img class="image-button-image" v-bind:src="$getAppAsset('ic_ctx_play_all', 24)">
</button>
<button class="btn btn-lg image-button" v-show="this.$route.meta.showResume"
v-on:click.stop="$resumePlayback(this.$route.meta.isAudio)" data-bs-toggle="tooltip" data-bs-placement="bottom"
v-on:click.stop="$resumePlayback(this.$route.meta.isAudio)" v-tooltip data-bs-placement="bottom"
:title="$t('RESUME_PLAYBACK')">
<img class="image-button-image" v-bind:src="$getAppAsset('ic_resume_playback', 24)">
</button>
......@@ -134,7 +132,6 @@
import { useAppStore } from '../stores/AppStore'
import { useBrowserStore } from '../stores/BrowserStore'
import { mapStores } from 'pinia'
import { Tooltip } from 'bootstrap';
import ImageButton from './ImageButton.vue'
export default {
......@@ -166,14 +163,6 @@ export default {
...mapStores(useAppStore),
...mapStores(useBrowserStore),
},
mounted() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
trigger: 'hover'
})
})
}
}
</script>
......
<template>
<td class="align-middle text-center" :class="{ 'current-log': logfile.path == '' }">
<img class="image-button-image" :src="(this.getImageByType(logfile.type))" width="24" data-bs-toggle="tooltip"
<img class="image-button-image" :src="(this.getImageByType(logfile.type))" width="24" v-tooltip
data-bs-placement="bottom" :title="$t(this.getTitleByType(logfile.type))" />
</td>
<td class="align-middle w-auto" :class="{ 'current-log': logfile.path == '' }">
......@@ -9,9 +9,9 @@
</td>
<td class="text-center col-1" :class="{ 'current-log': logfile.path == '' }">
<a :href="href" class="" v-if="logfile.path != ''">
<ImageButton type="file_download" data-bs-toggle="tooltip" data-bs-placement="bottom" :title="$t('DOWNLOAD')" />
<ImageButton type="file_download" v-tooltip data-bs-placement="bottom" :title="$t('DOWNLOAD')" />
</a>
<ImageButton v-else-if="!sending" type="file_upload" v-on:click="downloadLocalLog" data-bs-toggle="tooltip"
<ImageButton v-else-if="!sending" type="file_upload" v-on:click.stop="downloadLocalLog" v-tooltip
data-bs-placement="bottom" :title="$t('SEND_LOGS')" />
<div v-else class="spinner-border text-primary send-spinner" role="status">
<span class="visually-hidden">Loading...</span>
......@@ -68,7 +68,8 @@ export default {
return `LOG_TYPE_MOBILE`
}
},
downloadLocalLog() {
downloadLocalLog(e) {
Tooltip.getInstance(e.target).hide()
this.sending = true
sendLogs().then(() => {
this.sending = false
......@@ -76,14 +77,6 @@ export default {
})
}
},
mounted: function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
trigger: 'hover'
})
})
}
}
</script>
......
......@@ -9,6 +9,7 @@ import vlcUtils from './plugins/vlcUtils'
import VueLazyload from 'vue-lazyload'
import { usePlayerStore } from './stores/PlayerStore'
import logger from './plugins/logger'
import { tooltip } from './plugins/tooltip'
const router = createRouter({
history: createWebHashHistory(),
......@@ -31,7 +32,7 @@ router.beforeEach((to, from, next) => {
const pinia = createPinia()
initI18n().then(function (i18n) {
createApp(App).use(i18n).use(VueLazyload).use(router).use(pinia).use(logger).use(vlcUtils).mount('#app')
createApp(App).directive('tooltip', tooltip).use(i18n).use(VueLazyload).use(router).use(pinia).use(logger).use(vlcUtils).mount('#app')
})
export default router;
......
import { Tooltip } from 'bootstrap'
export const tooltip = {
mounted(el) {
new Tooltip(el)
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment