profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Improved tooltip performance

Browse source
This commit is contained in:
thepaperpilot 2021-06-27 14:48:43 -05:00
parent 380da5069e
commit beb9e38b92
2 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/system/Tooltip.vue
View file

@ -1,10 +1,13 @@
<template> <template>
<div class="tooltip-container" :class="{ force }"> <div class="tooltip-container" :class="{ shown }" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
<div class="tooltip" :class="{ top, left, right, bottom }" <slot />
<!-- Make sure slot is *before* the transition in case the slot uses v-frag, which messes up the tooltip -->
<transition name="fade">
<div v-if="shown" class="tooltip" :class="{ top, left, right, bottom }"
:style="{ '--xoffset': xoffset, '--yoffset': yoffset }"> :style="{ '--xoffset': xoffset, '--yoffset': yoffset }">
<component :is="tooltipDisplay" /> <component :is="tooltipDisplay" />
</div> </div>
<slot /> </transition>
</div> </div>
</template> </template>
@ -13,6 +16,11 @@ import { coerceComponent } from '../../util/vue';
export default { export default {
name: 'tooltip', name: 'tooltip',
data() {
return {
hover: false
};
},
props: { props: {
force: Boolean, force: Boolean,
display: String, display: String,
@ -26,12 +34,20 @@ export default {
computed: { computed: {
tooltipDisplay() { tooltipDisplay() {
return coerceComponent(this.display); return coerceComponent(this.display);
},
shown() {
return this.force || this.hover;
} }
}, },
provide: { provide: {
tab() { tab() {
return {}; return {};
} }
},
methods: {
setHover(hover) {
this.hover = hover;
}
} }
}; };
</script> </script>
@ -59,20 +75,17 @@ export default {
transform: translateX(-50%); transform: translateX(-50%);
padding: 7px; padding: 7px;
border-radius: 3px; border-radius: 3px;
opacity: 0;
background-color: var(--background-tooltip); background-color: var(--background-tooltip);
color: var(--points); color: var(--points);
z-index: 100 !important;
} }
.tooltip-container:hover, .shown {
.force {
z-index: 1; z-index: 1;
} }
.tooltip-container:hover > .tooltip, .fade-enter, .fade-leave-to {
.force > .tooltip { opacity: 0;
opacity: 1;
z-index: 100 !important;
} }
.tooltip::after { .tooltip::after {

5
src/components/tree/TreeNode.vue
View file

@ -24,7 +24,6 @@
import { layers } from '../../store/layers'; import { layers } from '../../store/layers';
import { player } from '../../store/proxies'; import { player } from '../../store/proxies';
import { coerceComponent } from '../../util/vue'; import { coerceComponent } from '../../util/vue';
import { formatWhole } from '../../util/bignum';
export default { export default {
name: 'tree-node', name: 'tree-node',
@ -73,10 +72,10 @@ export default {
} }
} }
if (player[this.id].unlocked) { if (player[this.id].unlocked) {
return this.layer.tooltip || `${formatWhole(player[this.id].points)} ${this.layer.resource}`; return this.layer.tooltip || `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`;
} else { } else {
return this.layer.tooltipLocked || return this.layer.tooltipLocked ||
`Reach ${formatWhole(this.layer.requires)} ${this.layer.baseResource} to unlock (You have ${formatWhole(this.layer.baseAmount)} ${this.layer.baseResource})`; `Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`;
} }
}, },
components() { components() {