self-hosted/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-16 10:29:33 +02:00
Code Issues Actions 1 Releases Activity

💫 Improve hearbeat animation

Browse Source
This commit is contained in:
Raphael Bernhart 2022-01-21 17:13:38 +01:00
parent c57b2c4d28
commit cd19b9fc49
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/HeartbeatBar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div ref="wrap" class="wrap" :style="wrapStyle"> <div ref="wrap" class="wrap" :style="wrapStyle">
<div class="hp-bar-big" :style="barStyle"> <div class="hp-bar-big d-flex" :style="barStyle">
<div <div
v-for="(beat, index) in shortBeatList" v-for="(beat, index) in shortBeatList"
:key="index" :key="index"
@ -8,7 +8,11 @@
:class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }" :class="{ 'empty' : (beat === 0), 'down' : (beat.status === 0), 'pending' : (beat.status === 2) }"
:style="beatStyle" :style="beatStyle"
:title="getBeatTitle(beat)" :title="getBeatTitle(beat)"
/> @mouseenter="toggleActivateSibling"
@mouseleave="toggleActivateSibling"
>
<div class="beat-inner" />
</div>
</div> </div>
</div> </div>
</template> </template>
@ -168,9 +172,30 @@ export default {
getBeatTitle(beat) { getBeatTitle(beat) {
return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``); return `${this.$root.datetime(beat.time)}` + ((beat.msg) ? ` - ${beat.msg}` : ``);
},
// Toggling the activeSibling class on hover over the current hover item
toggleActivateSibling(e) {
// Variable definition
const element = e.target;
const previous = element.previousSibling;
const next = element.nextSibling;
// Return if the hovered element has empty class
if (element.classList.contains("empty")) {
return;
}
// Check if Previous Sibling is heartbar element and doesn't have the empty class
if (previous.children && !previous.classList.contains("empty")) {
previous.classList.toggle("active-sibling");
}
// Check if Next Sibling is heartbar element and doesn't have the empty class
if (next.children && next.classList.contains("empty")) {
next.classList.toggle("active-sibling");
}
} }
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -184,9 +209,10 @@ export default {
.hp-bar-big { .hp-bar-big {
.beat { .beat {
display: inline-block;
background-color: $primary; background-color: $primary;
border-radius: $border-radius; border-radius: $border-radius;
display: inline-block;
transition: all ease 0.6s;
&.empty { &.empty {
background-color: aliceblue; background-color: aliceblue;
@ -200,11 +226,22 @@ export default {
background-color: $warning; background-color: $warning;
} }
.beat-inner {
border-radius: $border-radius;
display: inline-block;
height: 100%;
width: 5px;
}
&:not(.empty):hover { &:not(.empty):hover {
transition: all ease-in-out 0.15s; transition: all ease 0.15s;
opacity: 0.8; opacity: 0.8;
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
&.active-sibling {
transform: scale(1.3);
transition: all ease 0.15s;
}
} }
} }