git ssb - add avatars thread, additional styling

mix irving committed on 8/8/2017, 12:22:27 PM
Parent: 964f30d756aca5cfd83467fe5cfea951e981f4b7

app/html/thread.jsView
		@@ -6,8 +6,9 @@
6	6
7	7	exports.gives = nest('app.html.thread')
8	8
9	9	exports.needs = nest({
	10	+ 'about.html.image': 'first',
10	11	'app.sync.goTo': 'first',
11	12	'message.html.markdown': 'first'
12	13	})
13	14
		@@ -25,28 +26,32 @@
25	26	const { goTo } = api.app.sync
26	27	const threadView = h('Thread',
27	28	map(chunkedThread, chunk => {
28	29
29		- return computed(chunk, chunk => get(chunk, '[0].value.author') === myId
30		- ? h('div.my-chunk', [
	30	+ return computed(chunk, chunk => {
	31	+ const author = get(chunk, '[0].value.author')
	32	+ if (author === myId) {
	33	+ return h('div.my-chunk', [
31	34	h('div.avatar'),
32	35	h('div.msgs', map(chunk, msg => {
33	36	return h('div.msg-row', [
34	37	h('div.spacer'),
35	38	message(msg)
36	39	])
37	40	}))
38	41	])
39		- : h('div.other-chunk', [
40		- h('div.avatar', 'other'),
	42	+ } else {
	43	+ return h('div.other-chunk', [
	44	+ h('div.avatar', api.about.html.image(author)),
41	45	h('div.msgs', map(chunk, msg => {
42	46	return h('div.msg-row', [
43	47	message(msg),
44	48	h('div.spacer')
45	49	])
46	50	}))
47	51	])
48		- )
	52	+ }
	53	+ })
49	54	})
50	55	)
51	56
52	57	function message (msg) {

app/html/thread.mcssView
		@@ -21,19 +21,19 @@
21	21	div.msg-row {
22	22	div.msg {
23	23	$primaryColor
24	24
25		- border-bottom-left-radius: .7rem
26		- border-top-left-radius: .7rem
	25	+ border-bottom-left-radius: .9rem
	26	+ border-top-left-radius: .9rem
27	27	}
28	28	:first-child {
29	29	div.msg {
30		- border-top-right-radius: .7rem
	30	+ border-top-right-radius: .9rem
31	31	}
32	32	}
33	33	:last-child {
34	34	div.msg {
35		- border-bottom-right-radius: .7rem
	35	+ border-bottom-right-radius: .9rem
36	36	}
37	37	}
38	38	}
39	39	}
		@@ -46,19 +46,19 @@
46	46
47	47	div.msg-row {
48	48	div.msg {
49	49	border: 1.5px #ddd solid
50		- border-bottom-right-radius: .7rem
51		- border-top-right-radius: .7rem
	50	+ border-bottom-right-radius: .9rem
	51	+ border-top-right-radius: .9rem
52	52	}
53	53	:first-child {
54	54	div.msg {
55		- border-top-left-radius: .7rem
	55	+ border-top-left-radius: .9rem
56	56	}
57	57	}
58	58	:last-child {
59	59	div.msg {
60		- border-bottom-left-radius: .7rem
	60	+ border-bottom-left-radius: .9rem
61	61	}
62	62	}
63	63	}
64	64	}
		@@ -69,13 +69,15 @@
69	69	display: flex
70	70	margin-bottom: .5rem
71	71
72	72	div.avatar {
73		- background-color: grey
74		- width: 2rem
75		- height: 2rem
76		- border-radius: 1rem
	73	+ background-color: #333
	74	+ $smallAvatar
77	75
	76	+ img {
	77	+ $smallAvatar
	78	+ }
	79	+
78	80	margin-right: 1rem
79	81	}
80	82
81	83	div.msgs {
		@@ -86,9 +88,9 @@
86	88	div.msg {
87	89	line-height: 1.2rem
88	90	background-color: #fff
89	91	padding: 0 .7rem
90		- margin-bottom: .3rem
	92	+ margin-bottom: .1rem
91	93	border-radius: .3rem
92	94	}
93	95	div.msg-spacer {
94	96	flex-grow: grow

blob/sync/url.jsView
		@@ -1,0 +1,13 @@
	1	+const nest = require('depnest')
	2	+
	3	+exports.gives = nest('blob.sync.url')
	4	+
	5	+exports.create = function (api) {
	6	+ return nest('blob.sync.url', function (id) {
	7	+ // return id
	8	+
	9	+ return 'http://localhost:8989/blobs/get/' + id
	10	+ })
	11	+}
	12	+
	13	+

mixmix / ticktack