surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Fixed Image avatar user list, q-qvatar rounded image

Browse Source
This commit is contained in:
Paolo Arena
2019-10-25 19:07:56 +02:00
parent 44305d8778
commit 345cf7381f
23 changed files with 333 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/layouts/toolbar/messagePopover/messagePopover.ts
View File

@@ -9,10 +9,14 @@ import { tools } from '@src/store/Modules/tools'
import { toolsext } from '@src/store/Modules/toolsext'
import { ITodo, ITodosState } from '../../../model'
import { Getter } from 'vuex-class'
import { UserStore } from '../../../store/Modules'
import MixinUsers from '../../../mixins/mixin-users'
const namespace = 'UserModule'
@Component({
mixins: [MixinUsers]
})
export default class MessagePopover extends Vue {
@@ -25,6 +29,20 @@ export default class MessagePopover extends Vue {
// }
}
get getNumMsg() {
return UserStore.getters.getlasts_messages().length
}
get getNumMsgUnread() {
// return UserStore.getters.getlasts_messages().length
return UserStore.getters.getnumMsgUnread()
}
get getNumNotifUnread() {
// return UserStore.getters.getlasts_messages().length
return 0
}
public randomDate(): Date {
let myval = Math.floor(Math.random() * 10000000000)
return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))

76
src/layouts/toolbar/messagePopover/messagePopover.vue
View File

@@ -1,45 +1,49 @@
<template>
<button class="relative-position animate-bounce">
<i class="fa fa-2x fa-envelope-o"></i>
<span class="floating label bg-dark">5</span>
<q-menu self="top right">
<q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
<q-item-label header>{{$t('msgs.messages')}}</q-item-label>
<div>
<q-btn flat round dense icon="fas fa-comment" class="q-mx-xs" >
<q-badge floating color="red">{{getNumMsgUnread}}</q-badge>
<q-menu self="top right">
<q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
<q-item-label header>{{$t('msgs.messages')}}</q-item-label>
<q-separator inset="item"/>
<q-separator/>
<div v-if="lasts_messages().length === 0">
<q-item>
{{$t('msgs.nomessage')}}
<div v-if="getNumMsg === 0">
<q-item>
{{$t('msgs.nomessage')}}
</q-item>
</div>
<q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index">
<q-item-section avatar>
<q-avatar>
{{msg.origin.username}}
<img :src="getImgByUsername(msg.dest.username)">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">{{getUserByUsername(msg.dest.username)}}</q-item-label>
<q-item-label caption lines="2">
{{msg.message}}
</q-item-label>
</q-item-section>
<q-item-section side top>
{{tools.getstrDateTimeShort(msg.datemsg)}}
</q-item-section>
</q-item>
</div>
<q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index">
<q-item-section avatar>
<q-avatar>
{{msg.origin.username}}
<img src="https://cdn.quasar.dev/img/avatar2.jpg">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">{{msg.message}}</q-item-label>
<q-item-label caption lines="2">
</q-item-label>
</q-item-section>
<q-item-section side top>
{{tools.getstrDateTime(msg.datemsg)}}
</q-item-section>
</q-item>
<q-separator inset="item"/>
</q-list>
</q-menu>
</button>
<q-separator/>
</q-list>
</q-menu>
</q-btn>
<q-btn v-if="false" flat round dense icon="fas fa-bell">
<q-badge v-if="getNumNotifUnread > 0" floating color="red">{{getNumNotifUnread}}</q-badge>
</q-btn>
</div>
</template>
<script lang="ts" src="./messagePopover.ts">