From 094609102df80bc2fd879d206058dbe70bde65da Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Wed, 1 Feb 2023 13:02:37 +0100
Subject: [PATCH] Avatars use current app font #888

---
 plugins/avatars/avatars.js   | 20 ++++++++++++--------
 plugins/avatars/identicon.js |  6 +++---
 plugins/avatars/index.php    |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/plugins/avatars/avatars.js b/plugins/avatars/avatars.js
index 71fd99e22..8b969b51c 100644
--- a/plugins/avatars/avatars.js
+++ b/plugins/avatars/avatars.js
@@ -1,8 +1,6 @@
 (rl => {
 
-	const size = 50;
-
-	window.identiconSvg = (hash, txt) => {
+	window.identiconSvg = (hash, txt, font) => {
 		// color defaults to last 7 chars as hue at 70% saturation, 50% brightness
 		// hsl2rgb adapted from: https://gist.github.com/aemkei/1325937
 		let h = (parseInt(hash.substr(-7), 16) / 0xfffffff) * 6, s = 0.7, l = 0.5,
@@ -22,10 +20,10 @@
 			].map(Math.round).join(',') + ')';
 
 		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}"/>
 				<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>
 				</svg>`;
 		}
@@ -37,6 +35,8 @@
 	let isMobile;
 
 	const
+		size = 50,
+		getEl = id => document.getElementById(id),
 		queue = [],
 		avatars = new Map,
 		ncAvatars = new Map,
@@ -63,7 +63,11 @@
 			.slice(0,2)
 			.toUpperCase(),
 		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) => {
 			msg.from?.[0] && setIdenticon(msg.from[0], fn);
@@ -190,7 +194,7 @@
 		if (templateId === e.detail.viewModelTemplateID) {
 
 			const
-				template = document.getElementById(templateId),
+				template = getEl(templateId),
 				messageItemHeader = template.content.querySelector('.messageItemHeader');
 
 			if (messageItemHeader) {
@@ -228,7 +232,7 @@
 
 		if ('MailMessageList' === e.detail.viewModelTemplateID) {
 			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">`)));
 		}
 	});
diff --git a/plugins/avatars/identicon.js b/plugins/avatars/identicon.js
index 237c2e574..451f57b96 100644
--- a/plugins/avatars/identicon.js
+++ b/plugins/avatars/identicon.js
@@ -4,7 +4,7 @@
 const size = 50,
 	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
 	// hsl2rgb adapted from: https://gist.github.com/aemkei/1325937
 	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(',') + ')';
 
 	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}"/>
 			<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>
 			</svg>`;
 	} else {
diff --git a/plugins/avatars/index.php b/plugins/avatars/index.php
index 22add4aa4..0eecc9c18 100644
--- a/plugins/avatars/index.php
+++ b/plugins/avatars/index.php
@@ -10,8 +10,8 @@ class AvatarsPlugin extends \RainLoop\Plugins\AbstractPlugin
 		NAME     = 'Avatars',
 		AUTHOR   = 'SnappyMail',
 		URL      = 'https://snappymail.eu/',
-		VERSION  = '1.8',
-		RELEASE  = '2023-01-23',
+		VERSION  = '1.9',
+		RELEASE  = '2023-02-01',
 		REQUIRED = '2.25.0',
 		CATEGORY = 'Contacts',
 		LICENSE  = 'MIT',