IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove update on click

Browse Source
This commit is contained in:
Wolfgang Huß 2019-09-27 09:37:53 +02:00
parent 01cf5d3e9d
commit a57d228c40
2 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
webapp/components/notifications/NotificationMenu/NotificationMenu.vue
View File

@ -1,15 +1,8 @@
<template> <template>
<div class="notifications-menu-pointer" @mouseover="hoverActive" @mouseleave="hover = false"> <div @mouseover="hoverUpdate" @mouseleave="hover = false">
<!-- Wolle <div <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
v-if="totalNotificationsCount === 0"
class="notifications-menu-pointer"
@click.prevent="updateNotifications"
> -->
<div v-if="totalNotificationsCount === 0" class="notifications-menu-pointer" @click.prevent="">
<ds-button class="notifications-menu" disabled icon="bell">
{{ unreadNotificationsCount }} {{ unreadNotificationsCount }}
</ds-button> </ds-button>
</div>
<dropdown v-else class="notifications-menu" :placement="placement"> <dropdown v-else class="notifications-menu" :placement="placement">
<template slot="default" slot-scope="{ toggleMenu }"> <template slot="default" slot-scope="{ toggleMenu }">
<ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)"> <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
@ -29,7 +22,7 @@
import Dropdown from '~/components/Dropdown' import Dropdown from '~/components/Dropdown'
import { import {
NOTIFICATIONS_POLL_INTERVAL, NOTIFICATIONS_POLL_INTERVAL,
NOTIFICATIONS_UPDATE_CHECK_INTERVAL, NOTIFICATIONS_CHECK_UPDATED_INTERVAL,
NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL, NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
} from '~/constants/notifications' } from '~/constants/notifications'
import { notificationQuery, markAsReadMutation } from '~/graphql/User' import { notificationQuery, markAsReadMutation } from '~/graphql/User'
@ -46,8 +39,8 @@ export default {
displayedNotifications: [], displayedNotifications: [],
notifications: [], notifications: [],
updateOn: false, updateOn: false,
updateTicks: 0, menuDelayTicks: 0,
updateMenuReference: null, menuTimerId: null,
hover: false, hover: false,
} }
}, },
@ -58,7 +51,6 @@ export default {
updateNotifications() { updateNotifications() {
if (this.updateOn) return if (this.updateOn) return
console.log('hover updateNotifications')
this.updateOn = true this.updateOn = true
try { try {
this.$apollo.queries.notifications.refetch() this.$apollo.queries.notifications.refetch()
@ -83,27 +75,25 @@ export default {
throw new Error(err) throw new Error(err)
} }
}, },
hoverActive() { hoverUpdate() {
if (this.hover) return if (this.hover) return
// update is triggered kind of one second before the user clicks
this.hover = true this.hover = true
this.updateNotifications() this.updateNotifications()
}, },
callToggleMenu(toggleMenu) { callToggleMenu(toggleMenu) {
// Wolle this.updateNotifications() if (this.menuTimerId) return
if (this.updateMenuReference) return
this.updateTicks = 0 // open menu after update is done, but latest after delay of "NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL"
this.updateMenuReference = setInterval(() => { this.menuDelayTicks = 0
console.log('check for update: ', this.updateOn, this.updateTicks) this.menuTimerId = setInterval(() => {
if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.menuDelayTicks) {
if (!this.updateOn || NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL <= this.updateTicks) {
console.log('toggleMenu')
toggleMenu() toggleMenu()
clearInterval(this.updateMenuReference) clearInterval(this.menuTimerId)
this.updateMenuReference = null this.menuTimerId = null
} else this.updateTicks += NOTIFICATIONS_UPDATE_CHECK_INTERVAL } else this.menuDelayTicks += NOTIFICATIONS_CHECK_UPDATED_INTERVAL
}, NOTIFICATIONS_UPDATE_CHECK_INTERVAL) }, NOTIFICATIONS_CHECK_UPDATED_INTERVAL)
}, },
equalNotification(a, b) { equalNotification(a, b) {
return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason return a.from.id === b.from.id && a.createdAt === b.createdAt && a.reason === b.reason
@ -150,10 +140,6 @@ export default {
align-items: center; align-items: center;
} }
.notifications-menu-pointer {
cursor: pointer;
}
.notifications-menu-popover { .notifications-menu-popover {
max-width: 500px; max-width: 500px;
} }

2
webapp/constants/notifications.js
View File

@ -1,3 +1,3 @@
export const NOTIFICATIONS_POLL_INTERVAL = 60000 export const NOTIFICATIONS_POLL_INTERVAL = 60000
export const NOTIFICATIONS_UPDATE_CHECK_INTERVAL = 100 export const NOTIFICATIONS_CHECK_UPDATED_INTERVAL = 100
export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000 export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000