ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-23 14:54:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: expand hover trigger area of beat (#5223)

Browse source 
Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Ryo Hanafusa 2024-10-20 22:30:03 +09:00 committed by GitHub
parent d7ffa33950
commit a7e9bdd43e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 53 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/components/HeartbeatBar.vue
View file

@ -4,11 +4,17 @@
<div <div
v-for="(beat, index) in shortBeatList" v-for="(beat, index) in shortBeatList"
:key="index" :key="index"
class="beat" class="beat-hover-area"
:class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }" :class="{ 'empty': (beat === 0) }"
:style="beatStyle" :style="beatHoverAreaStyle"
:title="getBeatTitle(beat)" :title="getBeatTitle(beat)"
/> >
<div
class="beat"
:class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
:style="beatStyle"
/>
</div>
</div> </div>
<div <div
v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'" v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
@ -47,7 +53,7 @@ export default {
beatWidth: 10, beatWidth: 10,
beatHeight: 30, beatHeight: 30,
hoverScale: 1.5, hoverScale: 1.5,
beatMargin: 4, beatHoverAreaPadding: 4,
move: false, move: false,
maxBeat: -1, maxBeat: -1,
}; };
@ -123,7 +129,7 @@ export default {
barStyle() { barStyle() {
if (this.move && this.shortBeatList.length > this.maxBeat) { if (this.move && this.shortBeatList.length > this.maxBeat) {
let width = -(this.beatWidth + this.beatMargin * 2); let width = -(this.beatWidth + this.beatHoverAreaPadding * 2);
return { return {
transition: "all ease-in-out 0.25s", transition: "all ease-in-out 0.25s",
@ -137,12 +143,17 @@ export default {
}, },
beatHoverAreaStyle() {
return {
padding: this.beatHoverAreaPadding + "px",
"--hover-scale": this.hoverScale,
};
},
beatStyle() { beatStyle() {
return { return {
width: this.beatWidth + "px", width: this.beatWidth + "px",
height: this.beatHeight + "px", height: this.beatHeight + "px",
margin: this.beatMargin + "px",
"--hover-scale": this.hoverScale,
}; };
}, },
@ -152,7 +163,7 @@ export default {
*/ */
timeStyle() { timeStyle() {
return { return {
"margin-left": this.numPadding * (this.beatWidth + this.beatMargin * 2) + "px", "margin-left": this.numPadding * (this.beatWidth + this.beatHoverAreaPadding * 2) + "px",
}; };
}, },
@ -219,20 +230,20 @@ export default {
if (this.size !== "big") { if (this.size !== "big") {
this.beatWidth = 5; this.beatWidth = 5;
this.beatHeight = 16; this.beatHeight = 16;
this.beatMargin = 2; this.beatHoverAreaPadding = 2;
} }
// Suddenly, have an idea how to handle it universally. // Suddenly, have an idea how to handle it universally.
// If the pixel * ratio != Integer, then it causes render issue, round it to solve it!! // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
const actualWidth = this.beatWidth * window.devicePixelRatio; const actualWidth = this.beatWidth * window.devicePixelRatio;
const actualMargin = this.beatMargin * window.devicePixelRatio; const actualHoverAreaPadding = this.beatHoverAreaPadding * window.devicePixelRatio;
if (!Number.isInteger(actualWidth)) { if (!Number.isInteger(actualWidth)) {
this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio; this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
} }
if (!Number.isInteger(actualMargin)) { if (!Number.isInteger(actualHoverAreaPadding)) {
this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio; this.beatHoverAreaPadding = Math.round(actualHoverAreaPadding) / window.devicePixelRatio;
} }
window.addEventListener("resize", this.resize); window.addEventListener("resize", this.resize);
@ -245,7 +256,7 @@ export default {
*/ */
resize() { resize() {
if (this.$refs.wrap) { if (this.$refs.wrap) {
this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2)); this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));
} }
}, },
@ -273,32 +284,41 @@ export default {
} }
.hp-bar-big { .hp-bar-big {
.beat { .beat-hover-area {
display: inline-block; display: inline-block;
background-color: $primary;
border-radius: $border-radius;
&.empty {
background-color: aliceblue;
}
&.down {
background-color: $danger;
}
&.pending {
background-color: $warning;
}
&.maintenance {
background-color: $maintenance;
}
&:not(.empty):hover { &:not(.empty):hover {
transition: all ease-in-out 0.15s; transition: all ease-in-out 0.15s;
opacity: 0.8; opacity: 0.8;
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
.beat {
background-color: $primary;
border-radius: $border-radius;
/*
pointer-events needs to be changed because
tooltip momentarily disappears when crossing between .beat-hover-area and .beat
*/
pointer-events: none;
&.empty {
background-color: aliceblue;
}
&.down {
background-color: $danger;
}
&.pending {
background-color: $warning;
}
&.maintenance {
background-color: $maintenance;
}
}
} }
} }