git ssb - mark people you follow on profile lists

closes #475

Matt McKegg committed on 4/8/2017, 11:25:23 AM
Parent: b0fea93657f2867c9c1bcefd95d6f067af29d40e

modules/page/html/render/profile.js	changed
styles/profile-list.mcss	changed

modules/page/html/render/profile.jsView
		@@ -175,11 +175,11 @@
175	175	]),
176	176	h('div.side.-right', [
177	177	when(friendsLoaded,
178	178	h('div', [
179		- renderContactBlock('Friends', friends),
180		- renderContactBlock('Followers', followers),
181		- renderContactBlock('Following', following)
	179	+ renderContactBlock('Friends', friends, yourFollows),
	180	+ renderContactBlock('Followers', followers, yourFollows),
	181	+ renderContactBlock('Following', following, yourFollows)
182	182	]),
183	183	h('div', {className: 'Loading'})
184	184	)
185	185	])
		@@ -189,18 +189,22 @@
189	189	container.reload = feedView.reload
190	190	return container
191	191	})
192	192
193		- function renderContactBlock (title, profiles) {
	193	+ function renderContactBlock (title, profiles, yourFollows) {
194	194	profiles = api.profile.obs.rank(profiles)
195	195	return [
196	196	when(computed(profiles, x => x.length), h('h2', title)),
197	197	h('div', {
198	198	classList: 'ProfileList'
199	199	}, [
200	200	map(profiles, (id) => {
	201	+ var following = computed(yourFollows, f => f.has(id))
201	202	return h('a.profile', {
202		- href: id
	203	+ href: id,
	204	+ classList: [
	205	+ when(following, '-following')
	206	+ ]
203	207	}, [
204	208	h('div.avatar', [api.about.html.image(id)]),
205	209	h('div.main', [
206	210	h('div.name', [ api.about.obs.name(id) ])

styles/profile-list.mcssView
		@@ -12,8 +12,12 @@
12	12
13	13	background-repeat: no-repeat
14	14	background-position: right
15	15
	16	+ -following {
	17	+ background-image: svg(following)
	18	+ }
	19	+
16	20	-connected {
17	21	background-image: svg(connected)
18	22	}
19	23
		@@ -22,8 +26,14 @@
22	26	height: 12px
23	27	content: "<circle cx='6' stroke='none' fill='green' cy='6' r='5' />"
24	28	}
25	29
	30	+ @svg following {
	31	+ width: 20px
	32	+ height: 12px
	33	+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
	34	+ }
	35	+
26	36	:hover {
27	37	background-color: rgba(255, 255, 255, 0.4);
28	38	}
29	39

alanz / patchwork