forked from platypush/platypush
Blink entities body upon update
This commit is contained in:
parent
24f5a8283c
commit
833d908a32
1 changed files with 21 additions and 1 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="row item entity-container">
|
<div class="row item entity-container" :class="{blink: justUpdated}">
|
||||||
<component :is="component"
|
<component :is="component"
|
||||||
:value="value"
|
:value="value"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
@ -22,6 +22,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
component: null,
|
component: null,
|
||||||
|
justUpdated: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -31,6 +32,15 @@ export default {
|
||||||
t[0].toUpperCase() + t.slice(1)
|
t[0].toUpperCase() + t.slice(1)
|
||||||
).join('')
|
).join('')
|
||||||
|
|
||||||
|
this.$watch(
|
||||||
|
() => this.value,
|
||||||
|
() => {
|
||||||
|
this.justUpdated = true
|
||||||
|
const self = this;
|
||||||
|
setTimeout(() => self.justUpdated = false, 1000)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
this.component = defineAsyncComponent(
|
this.component = defineAsyncComponent(
|
||||||
() => import(`@/components/panels/Entities/${type}`)
|
() => import(`@/components/panels/Entities/${type}`)
|
||||||
)
|
)
|
||||||
|
@ -47,4 +57,14 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blink {
|
||||||
|
animation: blink-animation 1s steps(20, start);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-animation {
|
||||||
|
to {
|
||||||
|
background: $active-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue