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

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

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

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

@ -24,7 +24,6 @@
import { layers } from '../../store/layers';
import { player } from '../../store/proxies';
import { coerceComponent } from '../../util/vue';
import { formatWhole } from '../../util/bignum';
export default {
name: 'tree-node',
@ -73,10 +72,10 @@ export default {
}
}
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 {
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() {