Added support for custom components in tooltips
This commit is contained in:
parent
87e43ed873
commit
2cd367eebe
7 changed files with 156 additions and 99 deletions
|
|
@ -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 }">
|
||||
|
|
|
|||
|
|
@ -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 }"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<tooltip display="<span>Info</span>" bottom yoffset="4px">
|
||||
<div class="info" @click="openDialog('Info')"><br/>i</div>
|
||||
<img class="options" src="images/options_wheel.png" @click="openDialog('Saves')" />
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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] {
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ svg,
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
z-index: -10;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<tooltip :text="tooltip" :class="{
|
||||
forceTooltip,
|
||||
<tooltip :display="tooltip" :force="forceTooltip" :class="{
|
||||
ghost: layer.layerShown === 'ghost',
|
||||
treeNode: true,
|
||||
[id]: true,
|
||||
|
|
|
|||
Loading…
Reference in a new issue