Fix transition
This commit is contained in:
parent
b4404ed6e4
commit
18a46374f0
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue
Block a user