Change presence layout

This commit is contained in:
Douglas Barone 2020-12-04 09:39:48 -04:00
parent 3dfbbe9264
commit 7f763020c7
2 changed files with 57 additions and 43 deletions

View File

@ -1,47 +1,61 @@
<template> <template>
<div v-if="!loading"> <div v-if="!loading">
<v-list three-line> <transition-group
<v-fade-transition group hide-on-leave appear> name="scale-transition"
<v-list-item tag="div"
v-for="userPresence in userPresences" class="d-flex flex-wrap"
:key="userPresence.user.id" >
> <v-col
<v-list-item-avatar size="52px" style="overflow: visible"> v-for="userPresence in userPresences"
<v-badge :key="userPresence.user.id"
:color=" cols="12"
userPresence.wifiDevices.some(wifiDevice => wifiDevice.isOnline) md="6"
? 'green' >
: 'grey' <v-card rounded outlined>
" <v-list three-line>
bottom <v-list-item>
offset-x="18px" <v-list-item-avatar size="52px" style="overflow: visible">
offset-y="18px" <v-badge
> :color="
<Avatar :src="userPresence.user.thumbnailPhoto" size="52px" /> userPresence.wifiDevices.some(
</v-badge> wifiDevice => wifiDevice.isOnline
</v-list-item-avatar> )
? 'green'
: 'grey'
"
bottom
offset-x="18px"
offset-y="18px"
>
<Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
</v-badge>
</v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title> <v-list-item-title>
{{ userPresence.user.displayName }} {{ userPresence.user.displayName }}
</v-list-item-title> </v-list-item-title>
<v-list-item-subtitle v-if="!userPresence.wifiDevices[0].isOnline"> <v-list-item-subtitle
<span class="font-weight-medium">Off-line.</span> v-if="!userPresence.wifiDevices[0].isOnline"
Visto {{ userPresence.wifiDevices[0].lastSeen | from }} >
</v-list-item-subtitle> <span class="font-weight-medium">Off-line.</span>
<v-list-item-subtitle v-else> Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
<span class="font-weight-medium">On-line</span> </v-list-item-subtitle>
</v-list-item-subtitle> <v-list-item-subtitle v-else>
<v-list-item-subtitle> <span class="font-weight-medium">On-line</span>
Próximo ao AP </v-list-item-subtitle>
<span class="font-weight-medium" <v-list-item-subtitle>
>{{ userPresence.wifiDevices[0].apName }} Próximo ao AP
</span> <span class="font-weight-medium"
</v-list-item-subtitle> >{{ userPresence.wifiDevices[0].apName }}
</v-list-item-content> </span>
</v-list-item> </v-list-item-subtitle>
</v-fade-transition> </v-list-item-content>
</v-list> </v-list-item>
</v-list>
</v-card>
</v-col>
</transition-group>
</div> </div>
<v-list v-else> <v-list v-else>
<v-divider /> <v-divider />

View File

@ -29,7 +29,7 @@
text text
large large
block block
@click="resultSize = resultSize + 5" @click="resultSize += 10"
> >
Mostrar mais Mostrar mais
</v-btn> </v-btn>
@ -56,7 +56,7 @@ export default {
components: { UserPresenceStatusList }, components: { UserPresenceStatusList },
data: () => ({ data: () => ({
search: '', search: '',
resultSize: 5 resultSize: 10
}), }),
apollo: { apollo: {
userPresence: { userPresence: {