1
0
mirror of https://github.com/axllent/mailpit.git synced 2024-12-26 22:56:43 +02:00

UI: Add favicon unread message counter

This commit is contained in:
Ralph Slooten 2022-09-14 22:37:47 +12:00
parent 4e2e59ec87
commit f6a8de3215
3 changed files with 41 additions and 4 deletions

11
package-lock.json generated
View File

@ -13,6 +13,7 @@
"bootstrap-icons": "^1.9.1",
"moment": "^2.29.4",
"prismjs": "^1.29.0",
"tinycon": "^0.6.8",
"vue": "^3.2.13"
},
"devDependencies": {
@ -1124,6 +1125,11 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"node_modules/tinycon": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
"integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
},
"node_modules/tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@ -1902,6 +1908,11 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"tinycon": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
"integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
},
"tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

View File

@ -13,6 +13,7 @@
"bootstrap-icons": "^1.9.1",
"moment": "^2.29.4",
"prismjs": "^1.29.0",
"tinycon": "^0.6.8",
"vue": "^3.2.13"
},
"devDependencies": {

View File

@ -1,7 +1,8 @@
<script>
import commonMixins from './mixins.js'
import commonMixins from './mixins.js';
import Message from './templates/Message.vue';
import moment from 'moment'
import moment from 'moment';
import Tinycon from 'tinycon';
export default {
mixins: [commonMixins],
@ -26,7 +27,8 @@ export default {
messageNext: false,
notificationsSupported: false,
notificationsEnabled: false,
selected: []
selected: [],
tcStatus: 0
}
},
watch: {
@ -36,6 +38,17 @@ export default {
} else {
this.message = false;
}
},
unread(v, old) {
if (v == this.tcStatus) {
return;
}
this.tcStatus = v;
if (v == 0) {
Tinycon.reset();
} else {
Tinycon.setBubble(v);
}
}
},
computed: {
@ -56,6 +69,12 @@ export default {
&& ("Notification" in window && Notification.permission !== "denied");
this.notificationsEnabled = this.notificationsSupported && Notification.permission == "granted";
Tinycon.setOptions({
height: 11,
background: '#dd0000',
fallback: false
});
this.connect();
this.loadMessages();
},
@ -192,6 +211,7 @@ export default {
let self = this;
let uri = 'api/delete'
self.get(uri, false, function(response) {
window.location.hash = "";
self.reloadMessages();
});
},
@ -206,7 +226,6 @@ export default {
window.location.hash = "";
self.scrollInPlace = true;
self.loadMessages();
});
},
@ -388,6 +407,12 @@ export default {
let selecting = false;
let lastSelected = this.selected.length > 0 && this.selected[this.selected.length - 1];
if (lastSelected == id) {
this.selected = this.selected.filter(function(ele){
return ele != id;
});
return
}
if (lastSelected === false) {
this.selected.push(id);