Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Avatars use current app font #888

Browse source
This commit is contained in:
the-djmaze 2023-02-01 13:02:37 +01:00
parent cefe679c98
commit 094609102d
3 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

20
plugins/avatars/avatars.js
View file

@ -1,8 +1,6 @@
(rl => { (rl => {
const size = 50; window.identiconSvg = (hash, txt, font) => {
window.identiconSvg = (hash, txt) => {
// color defaults to last 7 chars as hue at 70% saturation, 50% brightness // color defaults to last 7 chars as hue at 70% saturation, 50% brightness
// hsl2rgb adapted from: https://gist.github.com/aemkei/1325937 // hsl2rgb adapted from: https://gist.github.com/aemkei/1325937
let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5, let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5,
@ -22,10 +20,10 @@
].map(Math.round).join(',') + ')'; ].map(Math.round).join(',') + ')';
if (txt) { if (txt) {
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}px" height="${size}px" viewBox="0 0 ${size} ${size}" version="1.1"> return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" version="1.1">
<circle fill="${color}" width="${size}" height="${size}" cx="${size/2}" cy="${size/2}" r="${size/2}"/> <circle fill="${color}" width="${size}" height="${size}" cx="${size/2}" cy="${size/2}" r="${size/2}"/>
<text x="${size}%" y="${size}%" style="color:#FFF" alignment-baseline="middle" text-anchor="middle" <text x="${size}%" y="${size}%" style="color:#FFF" alignment-baseline="middle" text-anchor="middle"
font-weight="bold" font-size="${Math.round(size*0.5)}" font-weight="bold" font-size="${Math.round(size*0.5)}" font-family="${font.replace(/"/g, "'")}"
dy=".1em" dominant-baseline="middle" fill="#FFF">${txt}</text> dy=".1em" dominant-baseline="middle" fill="#FFF">${txt}</text>
</svg>`; </svg>`;
} }
@ -37,6 +35,8 @@
let isMobile; let isMobile;
const const
size = 50,
getEl = id => document.getElementById(id),
queue = [], queue = [],
avatars = new Map, avatars = new Map,
ncAvatars = new Map, ncAvatars = new Map,
@ -63,7 +63,11 @@
.slice(0,2) .slice(0,2)
.toUpperCase(), .toUpperCase(),
setIdenticon = (from, fn) => hash(from.email).then(hash => setIdenticon = (from, fn) => hash(from.email).then(hash =>
fn('data:image/svg+xml;base64,' + btoa(window.identiconSvg(hash, fromChars(from)))) fn('data:image/svg+xml;base64,' + btoa(window.identiconSvg(
hash,
fromChars(from),
window.getComputedStyle(getEl('rl-app'), null).getPropertyValue('font-family')
)))
), ),
addQueue = (msg, fn) => { addQueue = (msg, fn) => {
msg.from?.[0] && setIdenticon(msg.from[0], fn); msg.from?.[0] && setIdenticon(msg.from[0], fn);
@ -190,7 +194,7 @@
if (templateId === e.detail.viewModelTemplateID) { if (templateId === e.detail.viewModelTemplateID) {
const const
template = document.getElementById(templateId), template = getEl(templateId),
messageItemHeader = template.content.querySelector('.messageItemHeader'); messageItemHeader = template.content.querySelector('.messageItemHeader');
if (messageItemHeader) { if (messageItemHeader) {
@ -228,7 +232,7 @@
if ('MailMessageList' === e.detail.viewModelTemplateID) { if ('MailMessageList' === e.detail.viewModelTemplateID) {
isMobile = e.detail.isMobile; isMobile = e.detail.isMobile;
document.getElementById('MailMessageList').content.querySelectorAll('.messageCheckbox') getEl('MailMessageList').content.querySelectorAll('.messageCheckbox')
.forEach(el => el.append(Element.fromHTML(`<img class="fromPic" data-bind="fromPic:$data" loading="lazy">`))); .forEach(el => el.append(Element.fromHTML(`<img class="fromPic" data-bind="fromPic:$data" loading="lazy">`)));
} }
}); });

6
plugins/avatars/identicon.js
View file

@ -4,7 +4,7 @@
const size = 50, const size = 50,
margin = 0.08; margin = 0.08;
window.identiconSvg = (hash, txt) => { window.identiconSvg = (hash, txt, font) => {
// color defaults to last 7 chars as hue at 70% saturation, 50% brightness // color defaults to last 7 chars as hue at 70% saturation, 50% brightness
// hsl2rgb adapted from: https://gist.github.com/aemkei/1325937 // hsl2rgb adapted from: https://gist.github.com/aemkei/1325937
let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5, let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5,
@ -24,10 +24,10 @@ window.identiconSvg = (hash, txt) => {
].map(Math.round).join(',') + ')'; ].map(Math.round).join(',') + ')';
if (txt) { if (txt) {
txt = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}px" height="${size}px" viewBox="0 0 ${size} ${size}" version="1.1"> txt = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" version="1.1">
<circle fill="${color}" width="${size}" height="${size}" cx="${size/2}" cy="${size/2}" r="${size/2}"/> <circle fill="${color}" width="${size}" height="${size}" cx="${size/2}" cy="${size/2}" r="${size/2}"/>
<text x="${size}%" y="${size}%" style="color:#FFF" alignment-baseline="middle" text-anchor="middle" <text x="${size}%" y="${size}%" style="color:#FFF" alignment-baseline="middle" text-anchor="middle"
font-weight="bold" font-size="${Math.round(size*0.5)}" font-weight="bold" font-size="${Math.round(size*0.5)}" font-family="${font.replace(/"/g, "'")}"
dy=".1em" dominant-baseline="middle" fill="#FFF">${txt}</text> dy=".1em" dominant-baseline="middle" fill="#FFF">${txt}</text>
</svg>`; </svg>`;
} else { } else {

4
plugins/avatars/index.php
View file

@ -10,8 +10,8 @@ class AvatarsPlugin extends \RainLoop\Plugins\AbstractPlugin
NAME = 'Avatars', NAME = 'Avatars',
AUTHOR = 'SnappyMail', AUTHOR = 'SnappyMail',
URL = 'https://snappymail.eu/', URL = 'https://snappymail.eu/',
VERSION = '1.8', VERSION = '1.9',
RELEASE = '2023-01-23', RELEASE = '2023-02-01',
REQUIRED = '2.25.0', REQUIRED = '2.25.0',
CATEGORY = 'Contacts', CATEGORY = 'Contacts',
LICENSE = 'MIT', LICENSE = 'MIT',