From 066a71e4d0b1e49ae6bd17601fc377031017a30d Mon Sep 17 00:00:00 2001 From: brunosimon Date: Thu, 7 Sep 2017 14:11:22 +0200 Subject: [PATCH] :sparkles: Favicon > Add favicon with notification --- site/index.html | 1 + site/src/components/application/script.js | 4 +- site/src/components/application/template.html | 3 + site/src/components/chat/script.js | 27 ++---- site/src/components/favicon/index.vue | 3 + site/src/components/favicon/script.js | 85 ++++++++++++++++++ site/src/components/favicon/style.styl | 0 site/src/components/favicon/template.html | 2 + site/src/store/modules/chat.js | 12 ++- site/static/images/favicon-32x32.png | Bin 0 -> 1866 bytes 10 files changed, 115 insertions(+), 22 deletions(-) create mode 100644 site/src/components/favicon/index.vue create mode 100644 site/src/components/favicon/script.js create mode 100644 site/src/components/favicon/style.styl create mode 100644 site/src/components/favicon/template.html create mode 100644 site/static/images/favicon-32x32.png diff --git a/site/index.html b/site/index.html index 0bd86b4..a49a708 100644 --- a/site/index.html +++ b/site/index.html @@ -3,6 +3,7 @@ Keppler +
diff --git a/site/src/components/application/script.js b/site/src/components/application/script.js index 432f47c..12bfdf4 100644 --- a/site/src/components/application/script.js +++ b/site/src/components/application/script.js @@ -1,6 +1,7 @@ import Connexion from '@/components/connexion' import ProjectsHub from '@/components/projects-hub' import Project from '@/components/project' +import Favicon from '@/components/favicon' export default { @@ -10,7 +11,8 @@ export default { Connexion, ProjectsHub, - Project + Project, + Favicon }, computed: diff --git a/site/src/components/application/template.html b/site/src/components/application/template.html index 6f34de3..973cba8 100644 --- a/site/src/components/application/template.html +++ b/site/src/components/application/template.html @@ -2,6 +2,9 @@ + + + diff --git a/site/src/components/chat/script.js b/site/src/components/chat/script.js index 92ab924..8225bc5 100644 --- a/site/src/components/chat/script.js +++ b/site/src/components/chat/script.js @@ -6,8 +6,7 @@ export default { return { userName: '', - messageText: '', - unreadCount: 0 + messageText: '' } }, @@ -36,6 +35,11 @@ export default scrollbarWidth() { return this.$store.state.scrollbarWidth + }, + + unreadCount() + { + return this.$store.state.chat.unreadCount } }, @@ -48,11 +52,6 @@ export default messages() { - if(!this.atBottom || !this.open) - { - this.unreadCount++ - } - window.requestAnimationFrame(() => { if(this.atBottom) @@ -107,12 +106,6 @@ export default onHeaderClick() { this.$store.commit('toggleChat') - - // Reset unread count - if(this.open) - { - this.unreadCount = 0 - } }, onUserNameChange() @@ -167,12 +160,6 @@ export default onMessagesScroll() { this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15 - - // Reset unread count - if(this.atBottom) - { - this.unreadCount = 0 - } }, onQuestionRemoveClick() @@ -204,7 +191,7 @@ export default scrollToBottom() { - this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 10 + this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 15 }, formatMinutes(time) diff --git a/site/src/components/favicon/index.vue b/site/src/components/favicon/index.vue new file mode 100644 index 0000000..246515d --- /dev/null +++ b/site/src/components/favicon/index.vue @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/site/src/components/favicon/script.js b/site/src/components/favicon/script.js new file mode 100644 index 0000000..bc99bbf --- /dev/null +++ b/site/src/components/favicon/script.js @@ -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()) + } + } +} \ No newline at end of file diff --git a/site/src/components/favicon/style.styl b/site/src/components/favicon/style.styl new file mode 100644 index 0000000..e69de29 diff --git a/site/src/components/favicon/template.html b/site/src/components/favicon/template.html new file mode 100644 index 0000000..094418b --- /dev/null +++ b/site/src/components/favicon/template.html @@ -0,0 +1,2 @@ +
+
\ No newline at end of file diff --git a/site/src/store/modules/chat.js b/site/src/store/modules/chat.js index 6acae63..ec40f9a 100644 --- a/site/src/store/modules/chat.js +++ b/site/src/store/modules/chat.js @@ -7,7 +7,8 @@ export default { messages: [], pendingMessage: null, pendingAlert: null, - question: null + question: null, + unreadCount: 0 }, mutations: @@ -16,6 +17,13 @@ export default { { 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) { state.messages.splice(0, state.messages.length - 100) @@ -50,6 +58,7 @@ export default { openChat(state) { + state.unreadCount = 0 state.open = true }, @@ -60,6 +69,7 @@ export default { toggleChat(state) { + state.unreadCount = 0 state.open = !state.open } } diff --git a/site/static/images/favicon-32x32.png b/site/static/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..7adffd06a0d7e5fee9499a2dc07cc0937c99f516 GIT binary patch literal 1866 zcmaJ?X;c$e6b@h%5d;@3h?O}JF;d86CL|;w0nLI0NyJDo*h&e>KmsHaCIboBMW9$z zTqv8g6!nzif~AUrZE*ow7ZxclwWJoBR&&zUVo?-VY9|P`Kdf`k%zN*i@4NTA%R93< zPPW3sZN3|cMDmbCi{!)#I9}JO#MhXYcb8avaj^nlgQnspC5DietI-q$km!_Yh#XO> zbF(@T9*N{a)y6Aug*29{LUlBy14A?G3v7e11U(FR?nyW)q0u&Xw`hm zTBejPH3$)nHaZVO*5t|JRe2dIj+zn~0r1RR!hsIKm4I27sW)=Xe9E|AF0pr*K?*Pq z!87=jXQC9+I6#PE2*9MVLR1h00bv{(#AGvIW-tKLAtp%YfDk=|4sjtm7p4Of4~2+^ zsZ+UfQPe~%;>4$DaNNKJL6gZuGcjl=mIgu`4hN*eAPk2Ph!A709#@(}^u|S#9z=*y zg=r1A7S#g|kIED@8|PC9rO#5(8KlzZj`hZgLJ=hc%}N6Z(deK~=g4auZN%lszcOBk zHpb@~5KxX7(QHgb^doiAB$=q)%L6%pgc`00Rb}fCJuVUPDTIZl)~dM-7HhefDH5^; zVmbtg!vrua;s{}uIFtp!Y!-8pE72QqrCxYP&nQ#fGSn0w0ehesiVLXdJ#;UgQ%l0R0oV#h^u{p3W&`S3x#2fFisTPkpUZK zv&9^yNF;#6=!{SnWrC}ILG}~e(EsIvgc#7#-v6|F(nQRVWBYt~iNo{pNA$$ZW5jTG z$%Yz;JM*PPv^?JYSLEG6+V)GoovQ<0Brhb$J(Njv}EwTSR4d(Fs`TDyra ztLnCSO`qUSCan0IvMje>QzdO?$a^VcrNmn|qJeKGL%WzWz;PvED4ndU^r!ys90 zvJxwu=SA*l+gsc3RF%JetX)C5USaiK+qjv1V_u*ClVdmEmsscfkOwzf_ISC&t6Q9c z$);s*^_?y5Y|1EL?kO$XI#RK5a8IW-F%ba`ehcbcDhoW;ORci}fV^hU{uz~pBrn%H z750S}gJG7(pQKaPP#^sd)6}00CBxB9jJ8Bj=8fM^avTfm2LJ zwd<)r&R#2LKdtv`NW=cH-lK;HKDeNwp0DRPm*1Xy_Qd(Tf!5YG&L>SR9mCL2$aEx} z?cQ6E?DfTlQQr$YUAJGJwe_nFPC4@1(cIku<=-XGGdm?P+`E0!lkSrJADxLAo)XV^ z+wb@A`z3+U8td%n`mx2M$B%SLDqGzf;|`>M6m#cP<}Y!EsqRy3HRiA{y9a6-cU`?Q z1v!+d1yT^$ckD$Ol5o;Xl#?xmJRBdUGEQGdDqwHdVOO!Cu{oU zEHCLr%bD<$+JyQca-8+^2se!VkTOGBv{G_1g!dOdvRxzy@a~1(ghRZ+!i9UcH8cfn z=C$}O-RZ`?3Sfb`Cm7()>hXQ+oe6llyh@! zLDe6Y<-Rkp-T8XIC0*X53cM*Of^)VfUTQyFV$1#L(qT650C{HAH~zLqi%j2E;fGUC zr0om%-r)Rn*L=(VZ!gYmS=Tgz@7LIp0;PM#JQg3dciV6HS$3um)toQ7b^!Ks zNxeGiwdrTCmYct-$xlA$t1H*l91V{Qgt|}#`!(dm?8nSEn}uPy^d;bL2i`i`sP@nJ zJG}O3a+G(`Ilmj5^<%GoED0XTKYeLQ0JT(gur1PQDoO1YaJQBBUZ>;lCK1a-je_KY Fe*jMx-UR>v literal 0 HcmV?d00001