escapee/profectus-template
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Releases Activity Actions

Added support for custom components in tooltips

Browse source
This commit is contained in:
thepaperpilot 2021-06-23 19:48:41 -05:00
parent 87e43ed873
commit 2cd367eebe
7 changed files with 156 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/features/Achievement.vue
View file

@ -1,5 +1,5 @@
<template>
<tooltip v-if="achievement.unlocked" :text="tooltip">
<tooltip v-if="achievement.unlocked" :display="tooltip">
<div :style="style"
:class="{ [layer || tab.layer]: true, feature: true, achievement: true, locked: !achievement.earned,
bought: achievement.earned }">

2
src/components/features/RespecButton.vue
View file

@ -1,6 +1,6 @@
<template>
<div style="display: flex">
<tooltip text="Disable respec confirmation">
<tooltip display="Disable respec confirmation">
<Toggle :value="confirmRespec" @change="setConfirmRespec" />
</tooltip>
<button @click="respec" :class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }"

2
src/components/fields/Slider.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="field">
<span class="field-title" v-if="title">{{ title }}</span>
<tooltip :text="`${value}`" :class="{ fullWidth: !title }">
<tooltip :display="`${value}`" :class="{ fullWidth: !title }">
<input type="range" :value="value" @input="e => $emit('change', parseInt(e.target.value))" :min="min" :max="max" />
</tooltip>
</div>

50
src/components/system/Nav.vue
View file

@ -3,7 +3,7 @@
<div class="nav" v-if="useHeader">
<img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div>
<div class="version" @click="openDialog('Changelog')">v{{ version }}</div>
<tooltip display="Changelog" bottom><div class="version" @click="openDialog('Changelog')">v{{ version }}</div></tooltip>
<div style="flex-grow: 1"></div>
<div class="discord">
<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
@ -16,9 +16,15 @@
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
</ul>
</div>
<div class="info" @click="openDialog('Info')"><br/>i</div>
<img class="options" src="images/options_wheel.png" @click="openDialog('Saves')" />
<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
<tooltip display="<span>Info</span>" bottom yoffset="4px">
<div class="info" @click="openDialog('Info')"><br/>i</div>
</tooltip>
<tooltip display="Saves" bottom xoffset="-24px" style="margin-top: 6px">
<div class="material-icons saves" @click="openDialog('Saves')">library_books</div>
</tooltip>
<tooltip display="<span>Options</span>" bottom xoffset="-64px" yoffset="-8px">
<img class="options" src="images/options_wheel.png" @click="openDialog('Options')" />
</tooltip>
</div>
<div v-else>
<div class="discord overlay">
@ -33,9 +39,18 @@
</ul>
</div>
<div class="info overlay" @click="openDialog('Info')"><br/>i</div>
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
<div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</div>
<tooltip display="<span>Info</span>" right>
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Saves')" />
</tooltip>
<tooltip display="Saves" right>
<div class="material-icons saves overlay" @click="openDialog('Saves')">library_books</div>
</tooltip>
<tooltip display="<span>Options</span>" right>
<img class="options overlay" src="images/options_wheel.png" @click="openDialog('Options')" />
</tooltip>
<tooltip display="Changelog" right>
<div class="version overlay" @click="openDialog('Changelog')">v{{ version }}</div>
</tooltip>
</div>
<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
<SavesManager :show="showSaves" @closeDialog="closeDialog" />
@ -68,6 +83,7 @@ export default {
},
openDialog(dialog) {
this[`show${dialog}`] = true;
console.log(`show${dialog}`, this[`show${dialog}`]);
},
closeDialog(dialog) {
this[`show${dialog}`] = false;
@ -166,6 +182,17 @@ export default {
-3px 0 12px var(--link);
}
.saves {
font-size: 36px;
cursor: pointer;
}
.saves:hover {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color),
-3px 0 12px var(--color);
}
.options {
height: 50px;
width: 50px;
@ -184,9 +211,6 @@ export default {
}
.version {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 5px;
color: var(--points);
cursor: pointer;
}
@ -201,4 +225,10 @@ export default {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
}
.nav > .title + .tooltip-container {
margin-left: 12px;
margin-right: 12px;
margin-bottom: 5px;
}
</style>

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

@ -1,115 +1,143 @@
<template>
<div :tooltip="text">
<div class="tooltip-container" :class="{ force }">
<div class="tooltip" :class="{ top, left, right, bottom }"
:style="{ '--xoffset': xoffset, '--yoffset': yoffset }">
<component :is="tooltipDisplay" />
</div>
<slot />
</div>
</template>
<script>
import { coerceComponent } from '../../util/vue';
export default {
name: 'tooltip',
props: {
text: String
force: Boolean,
display: String,
top: Boolean,
left: Boolean,
right: Boolean,
bottom: Boolean,
xoffset: String,
yoffset: String
},
computed: {
tooltipDisplay() {
return coerceComponent(this.display);
}
},
provide: {
tab() {
return {};
}
}
};
</script>
<style scoped>
[tooltip] {
position: relative;
.tooltip-container {
position: relative;
--xoffset: 0px;
--yoffset: 0px;
}
[tooltip]:before,
[tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
.tooltip, .tooltip::after {
pointer-events: none;
white-space: pre-wrap;
position: absolute;
}
.tooltip {
text-align: center;
width: 150px;
font-size: 14px;
line-height: 1.2;
bottom: calc(100% + var(--yoffset));
left: calc(50% + var(--xoffset));
margin-bottom: 5px;
transform: translateX(-50%);
padding: 7px;
border-radius: 3px;
opacity: 0;
background-color: var(--background-tooltip);
color: var(--points);
}
.tooltip-container:hover,
.force {
z-index: 1;
}
.tooltip-container:hover > .tooltip,
.force > .tooltip {
opacity: 1;
z-index: 100 !important;
}
[tooltip]:before {
position: absolute;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: var(--background-tooltip);
color: var(--points);
content: attr(tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
white-space: pre-wrap;
}
[tooltip]:after {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid var(--background-tooltip);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
.tooltip::after {
content: " ";
font-size: 0;
line-height: 0;
white-space: pre-wrap;
position: absolute;
top: 100%;
bottom: 100%;
left: calc(50% - var(--xoffset));
width: 0;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--background-tooltip) transparent transparent transparent;
}
[tooltip]:hover:before,
[tooltip].forceTooltip:before,
[tooltip]:hover:after,
[tooltip].forceTooltip:after {
animation: tooltip 0.25s linear 1;
animation-fill-mode: forwards;
white-space: pre-wrap;
}
@keyframes tooltip {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
visibility: visible;
}
}
.tooltip-left[tooltip]:before,
.side-nodes [tooltip]:before {
bottom: unset;
.tooltip.left,
.side-nodes .tooltip:not(.right):not(.bottom):not(.top) {
bottom: calc(50% + var(--yoffset));
left: unset;
right: 100%;
top: 50%;
margin-left: unset;
right: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-right: 5px;
transform: translateY(-50%);
transform: translateY(50%);
}
.tooltip-left[tooltip]:after,
.side-nodes [tooltip]:after {
.tooltip.left::after,
.side-nodes .tooltip:not(.right):not(.bottom):not(.top)::after {
top: calc(50% + var(--yoffset));
bottom: unset;
left: unset;
left: 100%;
right: 100%;
top: 50%;
transform: translateY(-50%);
border-left: 5px solid var(--background-tooltip);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: unset;
margin-left: unset;
margin-top: -5px;
border-color: transparent transparent transparent var(--background-tooltip);
}
.tooltip.right {
bottom: calc(50% + var(--yoffset));
left: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-left: 5px;
transform: translateY(50%);
}
.tooltip.right::after {
top: calc(50% + var(--yoffset));
left: 0;
right: 100%;
margin-left: -10px;
margin-top: -5px;
border-color: transparent var(--background-tooltip) transparent transparent;
}
.tooltip.bottom {
top: calc(100% + var(--yoffset));
bottom: unset;
left: calc(50% + var(--xoffset));
margin-bottom: unset;
margin-top: 5px;
transform: translateX(-50%);
}
.tooltip.bottom::after {
top: 0;
margin-top: -10px;
border-color: transparent transparent var(--background-tooltip) transparent;
}
</style>

2
src/components/tree/Branches.vue
View file

@ -95,7 +95,7 @@ svg,
left: 0;
width: 100%;
height: 100%;
z-index: -1;
z-index: -10;
pointer-events: none;
}
</style>

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

@ -1,6 +1,5 @@
<template>
<tooltip :text="tooltip" :class="{
forceTooltip,
<tooltip :display="tooltip" :force="forceTooltip" :class="{
ghost: layer.layerShown === 'ghost',
treeNode: true,
[id]: true,