Fix transition

This commit is contained in:
Douglas Barone 2020-12-18 09:27:47 -04:00
parent b4404ed6e4
commit 18a46374f0

View File

@ -50,90 +50,90 @@
</v-scale-transition>
</div>
<transition-group
<div
v-if="
!$apollo.queries.userPresence.loading || pagedUserPresences.length
"
name="scale-transition"
tag="div"
class="layout row row--dense wrap"
mode="out-in"
>
<v-col
v-for="userPresence in pagedUserPresences"
:key="userPresence.id"
cols="12"
sm="6"
md="4"
lg="3"
>
<v-card
outlined
class="border-highlight light-shadow"
:class="{
online: userPresence.status == 'ONLINE',
recent: userPresence.status == 'RECENT'
}"
<v-fade-transition class="layout row row--dense wrap" group>
<v-col
v-for="userPresence in pagedUserPresences"
:key="userPresence.id"
cols="12"
sm="6"
md="4"
lg="3"
>
<v-list three-line>
<v-list-item>
<v-list-item-avatar size="52px" style="overflow: visible">
<v-badge
:color="color(userPresence.status)"
bottom
offset-x="18px"
offset-y="18px"
>
<Avatar :src="userPresence.thumbnailPhoto" size="52px" />
</v-badge>
</v-list-item-avatar>
<v-card
outlined
class="border-highlight light-shadow"
:class="{
online: userPresence.status == 'ONLINE',
recent: userPresence.status == 'RECENT'
}"
>
<v-list three-line>
<v-list-item>
<v-list-item-avatar size="52px" style="overflow: visible">
<v-badge
:color="color(userPresence.status)"
bottom
offset-x="18px"
offset-y="18px"
>
<Avatar :src="userPresence.thumbnailPhoto" size="52px" />
</v-badge>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ userPresence.displayName }}
</v-list-item-title>
<v-list-item-content>
<v-list-item-title>
{{ userPresence.displayName }}
</v-list-item-title>
<template v-if="userPresence.status == 'ONLINE'">
<v-list-item-subtitle>
<span class="font-weight-medium">On-line</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
Próximo ao AP
<span class="font-weight-medium">
{{ userPresence.apName }}
</span>
</v-list-item-subtitle>
</template>
<template v-if="userPresence.status == 'ONLINE'">
<v-list-item-subtitle>
<span class="font-weight-medium">On-line</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
Próximo ao AP
<span class="font-weight-medium">
{{ userPresence.apName }}
</span>
</v-list-item-subtitle>
</template>
<template v-if="userPresence.status == 'RECENT'">
<v-list-item-subtitle>
<span class="font-weight-medium">Visto recentemente</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
Próximo ao AP
<span class="font-weight-medium">
{{ userPresence.apName }}
</span>
</v-list-item-subtitle>
</template>
<template v-if="userPresence.status == 'RECENT'">
<v-list-item-subtitle>
<span class="font-weight-medium"
>Visto recentemente</span
>
</v-list-item-subtitle>
<v-list-item-subtitle>
Próximo ao AP
<span class="font-weight-medium">
{{ userPresence.apName }}
</span>
</v-list-item-subtitle>
</template>
<template v-if="userPresence.status == 'OFFLINE'">
<v-list-item-subtitle>
<span class="font-weight-medium">Off-line</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
<span class="font-weight-medium">
Visto
{{ userPresence.lastSeen | from }}
</span>
</v-list-item-subtitle>
</template>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</transition-group>
<template v-if="userPresence.status == 'OFFLINE'">
<v-list-item-subtitle>
<span class="font-weight-medium">Off-line</span>
</v-list-item-subtitle>
<v-list-item-subtitle>
<span class="font-weight-medium">
Visto
{{ userPresence.lastSeen | from }}
</span>
</v-list-item-subtitle>
</template>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-fade-transition>
</div>
<div v-else>
<div class="layout row row--dense wrap">
@ -156,7 +156,6 @@
</v-col>
</div>
</div>
<v-alert
v-if="!pagedUserPresences.length && search"
icon="mdi-account-search"
@ -166,7 +165,7 @@
Sua pesquisa não encontrou nenhum usuário.
</v-alert>
<v-footer class="mt-6 light-shadow" outlined rounded>
<v-footer class="mt-6 light-shadow" absolute>
<span v-if="$vuetify.breakpoint.mdAndUp">
Ordenando por <em>"visto por último"</em>
</span>
@ -239,7 +238,7 @@ export default {
},
apollo: {
userPresence: {
fetchPolicy: 'cache-and-network',
// fetchPolicy: 'cache-and-network',
query: gql`
query($search: String = "") {
userPresence(search: $search) {