Spike Mail

[rauldipeas]

Could you make a css to get Spike unread messages count on custom service?

[AXeL-dev]

Hey,

Try this custom js code

function checkUnread() {
    var e = document.querySelectorAll('div.thread:not(.nobadge) div.badge');
    var t = 0;
    for (i = 0; i < e.length; i++) {
        t += e[i].innerHTML.trim() != '' ? parseInt(e[i].innerHTML.trim()) : 1;
    }
    updateBadge(t);
}

function updateBadge(e) {
    e && e >= 1 ? rambox.setUnreadCount(e) : rambox.clearUnreadCount();
}

setInterval(checkUnread, 3000);

If it works i'll make a pull request.

[rauldipeas]

Work's like a charm! Thanks!

[AXeL-dev]

Great! ;)

[rauldipeas]

Could you make a dark theme too?

[AXeL-dev]

Right now i don't really have time to, but its not a big deal, you only need to create some custom css & inject it the same way you did with the js code. try to do it by yourself it's a good learning exercise :+1:

[rauldipeas]

Thanks, i'll try!

[rauldipeas]

I made my own dark theme to Spike, using filter: invert...

function applycss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.appendChild(document.createTextNode(css));
    head.appendChild(s);
 }
applycss(`
body {filter: invert(100%)}
iframe {filter: invert(100%)}
img {
   -webkit-filter: invert(1);
   filter: invert(1)
   }
img.icon {filter: invert(0%)}
#oWIP {filter: invert(100%)}
.attachemoji {filter: invert(100%)}
.bubble .body .emojitext {filter: invert(100%)}
.bubble a {filter: invert(100%)}
.bubble div div div div {filter: invert(100%)}
.bubble-wrapper {filter: invert(100%)}
.button {filter: invert(100%)}
.button img {filter: invert(0%)}
.button .icon {filter: invert(100%)}
.checkbox {filter: invert(100%)}
.emojiCategory {filter: invert(100%)}
.emojiCategory.emojiCategory {filter: invert(100%)}
.emojiCategory.selected {filter: invert(100%)}
.on {filter: invert(100%)}
.person .name {filter: invert(100%)}
.separatorBottom div {filter: invert(100%)}
.separatorBottom .picture-border {filter: invert(100%)}
.separatorBottom .title {filter: invert(0%)}
.separatorBottom .subtitle {filter: invert(0%)}
.status {filter: invert(100%)}
`);

[rauldipeas]

I have another issue with Spike, maybe you could help me...

When I click on a link in email, it's suppose to be opened directly on my default web browser, but it open a small popup first, before the browser...