Change presence layout
This commit is contained in:
parent
3dfbbe9264
commit
7f763020c7
|
@ -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 />
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user