ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: use popper.js v2 vue3 version of v-tooltip (#1038)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1038
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen
2021-11-23 07:08:21 +00:00
committed by konrad
parent d95fc32d67
commit 91580f97a1
5 changed files with 34 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/directives/tooltip.js
View File

@ -1,83 +0,0 @@
const calculateTop = (coords, tooltip) => {
// Bottom tooltip use the exact inverse calculation compared to the default.
if (tooltip.classList.contains('bottom')) {
return coords.top + tooltip.offsetHeight + 5
}
// The top position of the tooltip is the coordinates of the bound element - the height of the tooltip -
// 5px spacing for the arrow (which is exactly 5px high)
return coords.top - tooltip.offsetHeight - 5
}
const calculateArrowTop = (top, tooltip) => {
if (tooltip.classList.contains('bottom')) {
return `${top - 5}px` // 5px arrow height
}
return `${top + tooltip.offsetHeight}px`
}
// This global object holds all created tooltip elements (and their arrows) using the element they were created for as
// key. This allows us to find the tooltip elements if the element the tooltip was created for is unbound so that
// we can remove the tooltip element.
const createdTooltips = {}
export default {
mounted(el, {value, modifiers}) {
// First, we create the tooltip and arrow elements
const tooltip = document.createElement('div')
tooltip.style.position = 'fixed'
tooltip.innerText = value
tooltip.classList.add('tooltip')
const arrow = document.createElement('div')
arrow.classList.add('tooltip-arrow')
arrow.style.position = 'fixed'
if (typeof modifiers.bottom !== 'undefined') {
tooltip.classList.add('bottom')
arrow.classList.add('bottom')
}
// We don't append the element until hovering over it because that's the most reliable way to determine
// where the parent elemtent is located at the time the user hovers over it.
el.addEventListener('mouseover', () => {
// Appending the element right away because we can only calculate the height of the element if it is
// already in the DOM.
document.body.appendChild(tooltip)
document.body.appendChild(arrow)
const coords = el.getBoundingClientRect()
const top = calculateTop(coords, tooltip)
// The left position of the tooltip is calculated so that the middle point of the tooltip
// (where the arrow will be) is the middle of the bound element
const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
// Now setting all the values
tooltip.style.top = `${top}px`
tooltip.style.left = `${coords.left}px`
tooltip.style.left = `${left}px`
arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}px`
arrow.style.top = calculateArrowTop(top, tooltip)
// And finally make it visible to the user. This will also trigger a nice fade-in animation through
// css transitions
tooltip.classList.add('visible')
arrow.classList.add('visible')
})
el.addEventListener('mouseout', () => {
tooltip.classList.remove('visible')
arrow.classList.remove('visible')
})
createdTooltips[el] = {
tooltip: tooltip,
arrow: arrow,
}
},
unmounted(el) {
if (typeof createdTooltips[el] !== 'undefined') {
createdTooltips[el].tooltip.remove()
createdTooltips[el].arrow.remove()
}
},
}

11
src/main.ts
View File

@ -55,20 +55,21 @@ app.use(Notifications)
// directives
import focus from '@/directives/focus'
import tooltip from '@/directives/tooltip'
import { VTooltip } from 'v-tooltip'
import 'v-tooltip/dist/v-tooltip.css'
import shortcut from '@/directives/shortcut'
import cypress from '@/directives/cypress'
app.directive('focus', focus)
app.directive('tooltip', tooltip)
app.directive('tooltip', VTooltip)
app.directive('shortcut', shortcut)
app.directive('cy', cypress)
// global components
import FontAwesomeIcon from './icons'
import Button from './components/input/button.vue'
import Modal from './components/modal/modal.vue'
import Card from './components/misc/card.vue'
import Button from '@/components/input/button.vue'
import Modal from '@/components/modal/modal.vue'
import Card from '@/components/misc/card.vue'
app.component('icon', FontAwesomeIcon)
app.component('x-button', Button)

48
src/styles/components/tooltip.scss
View File

@ -1,42 +1,12 @@
// FIXME: https://www.bram.us/2021/09/13/dont-attach-tooltips-to-document-body/
.tooltip {
visibility: collapse;
z-index: 10000;
font-size: 0.8rem;
text-align: center;
.v-popper--theme-tooltip .v-popper__inner {
padding: 5px 10px;
font-size: 0.8rem;
background: var(--dark);
color: white;
color: var(--white);
border-radius: 5px;
padding: 5px 10px 5px;
opacity: 0;
transition: opacity $transition;
// If the tooltip is multiline, it would make the height calculations needed to properly position it a lot harder.
white-space: nowrap;
overflow: hidden;
&-arrow {
opacity: 0;
content: '';
visibility: collapse;
position: absolute;
transition: opacity $transition;
z-index: 10000;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--dark);
&.bottom {
transform: rotate(180deg);
}
}
&.visible, &-arrow.visible {
opacity: 1;
visibility: visible;
}
}
.dark .v-popper--theme-tooltip .v-popper__inner {
background: var(--white);
color: var(--dark);
}