furk4ngg/keppler
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Favicon > Add favicon with notification

Browse Source
This commit is contained in:
brunosimon
2017-09-07 14:11:22 +02:00
parent 833ff06835
commit 066a71e4d0
10 changed files with 115 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Keppler</title> <title>Keppler</title>
<link class="favicon" rel="icon" type="image/png" href="" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
site/src/components/application/script.js
+3 -1
View File
@@ -1,6 +1,7 @@
import Connexion from '@/components/connexion' import Connexion from '@/components/connexion'
import ProjectsHub from '@/components/projects-hub' import ProjectsHub from '@/components/projects-hub'
import Project from '@/components/project' import Project from '@/components/project'
import Favicon from '@/components/favicon'
export default export default
{ {
@@ -10,7 +11,8 @@ export default
{ {
Connexion, Connexion,
ProjectsHub, ProjectsHub,
Project Project,
Favicon
}, },
computed: computed:
site/src/components/application/template.html
+3
View File
@@ -2,6 +2,9 @@
<!-- Connexion --> <!-- Connexion -->
<connexion></connexion> <connexion></connexion>
<!-- Favicon -->
<favicon></favicon>
<!-- Header --> <!-- Header -->
<a class="application-header" href="#" @click.prevent="onHeaderClick"> <a class="application-header" href="#" @click.prevent="onHeaderClick">
<img class="element background" src="../../../static/svg/header-background.svg" alt=""> <img class="element background" src="../../../static/svg/header-background.svg" alt="">
site/src/components/chat/script.js
+7 -20
View File
@@ -6,8 +6,7 @@ export default
{ {
return { return {
userName: '', userName: '',
messageText: '', messageText: ''
unreadCount: 0
} }
}, },
@@ -36,6 +35,11 @@ export default
scrollbarWidth() scrollbarWidth()
{ {
return this.$store.state.scrollbarWidth return this.$store.state.scrollbarWidth
},
unreadCount()
{
return this.$store.state.chat.unreadCount
} }
}, },
@@ -48,11 +52,6 @@ export default
messages() messages()
{ {
if(!this.atBottom || !this.open)
{
this.unreadCount++
}
window.requestAnimationFrame(() => window.requestAnimationFrame(() =>
{ {
if(this.atBottom) if(this.atBottom)
@@ -107,12 +106,6 @@ export default
onHeaderClick() onHeaderClick()
{ {
this.$store.commit('toggleChat') this.$store.commit('toggleChat')
// Reset unread count
if(this.open)
{
this.unreadCount = 0
}
}, },
onUserNameChange() onUserNameChange()
@@ -167,12 +160,6 @@ export default
onMessagesScroll() onMessagesScroll()
{ {
this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15 this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15
// Reset unread count
if(this.atBottom)
{
this.unreadCount = 0
}
}, },
onQuestionRemoveClick() onQuestionRemoveClick()
@@ -204,7 +191,7 @@ export default
scrollToBottom() scrollToBottom()
{ {
this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 10 this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 15
}, },
formatMinutes(time) formatMinutes(time)
site/src/components/favicon/index.vue
+3
View File
@@ -0,0 +1,3 @@
<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.styl" lang="stylus" scoped></style>
site/src/components/favicon/script.js
+85
View File
@@ -0,0 +1,85 @@
export default
{
name: 'favicon',
computed:
{
chatUnreadCount()
{
return this.$store.state.chat.unreadCount
}
},
watch:
{
chatUnreadCount: 'onChatUnreadCountChange'
},
created()
{
this.$favicon = document.querySelector('.favicon')
this.size = 16 * window.devicePixelRatio
this.notifSize = 0.2
this.canvas = document.createElement('canvas')
this.canvas.width = this.size
this.canvas.height = this.size
this.context = this.canvas.getContext('2d')
this.image = new Image()
this.image.addEventListener('load', () =>
{
this.updateFavicon()
})
this.image.src = require('../../../static/images/favicon-32x32.png')
},
methods:
{
onChatUnreadCountChange()
{
this.updateFavicon()
},
updateFavicon()
{
// Clear
this.context.clearRect(0, 0, this.size, this.size)
// Draw image
this.context.drawImage(this.image, 0, 0, this.size, this.size)
// // Draw file notif
// this.context.beginPath()
// this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
// this.context.fillStyle = '#9B52F5'
// this.context.fill()
// this.context.strokeStyle = '#360079'
// this.context.stroke()
// Draw chat notif
if(this.chatUnreadCount > 0)
{
this.context.beginPath()
this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
// this.context.arc(this.size * (1 - this.notifSize * 2.25), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
this.context.fillStyle = '#ff763d'
this.context.fill()
this.context.strokeStyle = '#ad1d3c'
this.context.stroke()
}
// Add to DOM
this.$favicon.setAttribute('href', this.canvas.toDataURL())
}
}
}
site/src/components/favicon/style.styl
View File
site/src/components/favicon/template.html
+2
View File
@@ -0,0 +1,2 @@
<div>
</div>
site/src/store/modules/chat.js
+11 -1
View File
@@ -7,7 +7,8 @@ export default {
messages: [], messages: [],
pendingMessage: null, pendingMessage: null,
pendingAlert: null, pendingAlert: null,
question: null question: null,
unreadCount: 0
}, },
mutations: mutations:
@@ -16,6 +17,13 @@ export default {
{ {
state.messages.push(data) state.messages.push(data)
// Add to unread count if not open or document is hidden (tab not active)
if(!state.open || document.hidden)
{
state.unreadCount++
}
// Clamp
if(state.messages.length > 100) if(state.messages.length > 100)
{ {
state.messages.splice(0, state.messages.length - 100) state.messages.splice(0, state.messages.length - 100)
@@ -50,6 +58,7 @@ export default {
openChat(state) openChat(state)
{ {
state.unreadCount = 0
state.open = true state.open = true
}, },
@@ -60,6 +69,7 @@ export default {
toggleChat(state) toggleChat(state)
{ {
state.unreadCount = 0
state.open = !state.open state.open = !state.open
} }
} }
site/static/images/favicon-32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB