profectus/TMT-Demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add notif component

Browse source
This commit is contained in:
thepaperpilot 2022-07-09 18:42:16 -05:00
parent 863c70222b
commit 6a7b411b93
2 changed files with 51 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Node.vue
View file

@ -17,24 +17,21 @@ const unregister = inject(UnregisterNodeInjectionKey, () => {});
const node = ref<HTMLElement | null>(null); const node = ref<HTMLElement | null>(null);
const parentNode = computed(() => node.value && node.value.parentElement); const parentNode = computed(() => node.value && node.value.parentElement);
if (register && unregister) { watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
if (prevNode) { if (prevNode) {
unregister(unref(prevID)); unregister(unref(prevID));
} }
if (newNode) { if (newNode) {
register(newID, newNode); register(newID, newNode);
} }
}); });
onUnmounted(() => unregister(unref(props.id))); onUnmounted(() => unregister(unref(props.id)));
}
</script> </script>
<style scoped> <style scoped>
.node { .node {
position: absolute; position: absolute;
z-index: -10;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;

42
src/components/Notif.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div class="notif">!</div>
</template>
<script setup lang="ts"></script>
<style scoped>
.notif {
position: absolute;
top: 0;
left: 5px;
z-index: 10;
pointer-events: none;
color: var(--accent3);
font-size: x-large;
animation: 1s linear infinite bounce;
border-radius: var(--border-radius);
background: var(--locked);
}
@keyframes bounce {
0% {
animation-timing-function: cubic-bezier(0.1361, 0.2514, 0.2175, 0.8786);
transform: translate(0, 0px) scaleY(1);
}
37% {
animation-timing-function: cubic-bezier(0.7674, 0.1844, 0.8382, 0.7157);
transform: translate(0, -20px) scaleY(1);
}
72% {
animation-timing-function: cubic-bezier(0.1118, 0.2149, 0.2172, 0.941);
transform: translate(0, 0px) scaleY(1);
}
87% {
animation-timing-function: cubic-bezier(0.7494, 0.2259, 0.8209, 0.6963);
transform: translate(0, 10px) scaleY(0.602);
}
100% {
transform: translate(0, 0px) scaleY(1);
}
}
</style>