git ssb - teach about/html/avatar to be able to be able to make different sized avatars

mixmix committed on 9/26/2018, 10:27:07 PM
Parent: c4488f18986b2f896e7c2655b025def9a2f8c7a2

about/html/avatar.js	changed
about/html/avatar.mcss	changed

about/html/avatar.jsView
		@@ -13,17 +13,20 @@
13	13 …
14	14 …	exports.create = function (api) {
15	15 …	return nest('about.html.avatar', avatar)
16	16 …
17		- function avatar (id) {
	17 …	+ function avatar (id, size = 4) {
18	18 …	const src = api.about.obs.imageUrl(id)
19	19 …	const color = computed(src, src => src.match(/^http/) ? 'rgba(0,0,0,0)' : api.about.obs.color(id))
WritePreview
20	20 …
21		- return api.about.html.link(id,
	21 …	+ const avatar = api.about.html.link(id,
22	22 …	h('img', {
23		- className: 'Avatar',
24	23 …	style: { 'background-color': color },
25	24 …	src
26	25 …	})
27	26 …	)
	27 …	+ avatar.classList.add('Avatar')
	28 …	+ avatar.style.setProperty('--avatar-size', Number.isNaN(size) ? size : `${size}rem`)
	29 …	+
	30 …	+ return avatar
28	31 …	}
29	32 …	}

about/html/avatar.mcssView
		@@ -1,6 +1,13 @@
1	1 …	Avatar {
2		- width: 4rem
3		- height: 4rem
	2 …	+ --avatar-size: 4rem
4	3 …
	4 …	+ width: var(--avatar-size)
	5 …	+ height: var(--avatar-size)
	6 …	+
5	7 …	transition: background-color .15s ease-out
	8 …	+
	9 …	+ img {
	10 …	+ width: var(--avatar-size)
	11 …	+ height: var(--avatar-size)
	12 …	+ }
6	13 …	}

Dominic / patchbay