[Android] Remote access: improve tooltips lifecycle
Nicolas Pomepuy
git at videolan.org
Thu Feb 22 13:29:25 UTC 2024
vlc-android | branch: master | Nicolas Pomepuy <nicolas at videolabs.io> | Wed Feb 7 13:40:32 2024 +0100| [bee62238278a572a8647e8ef809697dbcf5b3200] | committer: Nicolas Pomepuy
Remote access: improve tooltips lifecycle
Fixes #3032
> https://code.videolan.org/videolan/vlc-android/commit/bee62238278a572a8647e8ef809697dbcf5b3200
---
.../src/components/AppHeader.vue | 27 +++++++---------------
.../src/components/LogItem.vue | 17 ++++----------
buildsystem/network-sharing-server/src/main.js | 3 ++-
.../network-sharing-server/src/plugins/tooltip.js | 9 ++++++++
4 files changed, 24 insertions(+), 32 deletions(-)
diff --git a/buildsystem/network-sharing-server/src/components/AppHeader.vue b/buildsystem/network-sharing-server/src/components/AppHeader.vue
index c2c437562b..1393f16333 100644
--- a/buildsystem/network-sharing-server/src/components/AppHeader.vue
+++ b/buildsystem/network-sharing-server/src/components/AppHeader.vue
@@ -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>
diff --git a/buildsystem/network-sharing-server/src/components/LogItem.vue b/buildsystem/network-sharing-server/src/components/LogItem.vue
index a97eb9d0ff..58712dd9f3 100644
--- a/buildsystem/network-sharing-server/src/components/LogItem.vue
+++ b/buildsystem/network-sharing-server/src/components/LogItem.vue
@@ -1,6 +1,6 @@
<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>
diff --git a/buildsystem/network-sharing-server/src/main.js b/buildsystem/network-sharing-server/src/main.js
index d62bdbd88d..b1b37219f6 100644
--- a/buildsystem/network-sharing-server/src/main.js
+++ b/buildsystem/network-sharing-server/src/main.js
@@ -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;
diff --git a/buildsystem/network-sharing-server/src/plugins/tooltip.js b/buildsystem/network-sharing-server/src/plugins/tooltip.js
new file mode 100644
index 0000000000..50226a775d
--- /dev/null
+++ b/buildsystem/network-sharing-server/src/plugins/tooltip.js
@@ -0,0 +1,9 @@
+import { Tooltip } from 'bootstrap'
+
+export const tooltip = {
+
+ mounted(el) {
+ new Tooltip(el)
+ }
+
+}
\ No newline at end of file
More information about the Android
mailing list