git ssb - basic chunked DOM + style · mixmix/ticktack@314000ba

Commit 314000baff3b2045fe13f8edf6519b9bdd1779d5

basic chunked DOM + style

mix irving committed on 8/8/2017, 11:54:48 AM
Parent: fd90a69c5a2931ed4ec735c57c4b2ebb42bcfe42

Files changed

app/html/app.js	changed
app/html/thread.js	changed
app/html/thread.mcss	changed
styles/mixins.js	changed
test/fixtures/thread.js	changed

app/html/app.jsView
		@@ -15,7 +15,8 @@
15	15	function app () {
16	16	const css = values(api.styles.css()).join('\n')
17	17	insertCss(css)
18	18
19		- return api.app.sync.goTo({ page: 'home' })
	19	+ // return api.app.sync.goTo({ page: 'home' })
	20	+ return api.app.sync.goTo({key: "%fXXZgQrwnj7F+Y19H0IXxNriuvPFoahvusih3UzpkfA=.sha256"})
20	21	}
21	22	}

app/html/thread.jsView
		@@ -1,9 +1,9 @@
1	1	const nest = require('depnest')
2		-const { h, Array: MutantArray, map } = require('mutant')
	2	+const { h, Array: MutantArray, map, computed, when } = require('mutant')
3	3	const pull = require('pull-stream')
4	4	const last = require('lodash/last')
5		-const get = require('lodash/last')
	5	+const get = require('lodash/get')
6	6
7	7	exports.gives = nest('app.html.thread')
8	8
9	9	exports.needs = nest({
		@@ -17,23 +17,44 @@
17	17	// location here can expected to be: { page: 'home' }
18	18
19	19	const chunkedThread = buildChunkedThreadObs(source)
20	20
	21	+ var myId = '@EMovhfIrFk4NihAKnRNhrfRaqIhBv1Wj8pTxJNgvCCY=.ed25519'
	22	+ // TODO (mix) use keys.sync.id
	23	+
21	24	const { goTo } = api.app.sync
22	25	const threadView = h('Thread',
23	26	map(chunkedThread, chunk => {
24		- return h('div' , [
25		- h('div', '---'),
26	27
27		- map(chunk, msg => {
28		- return h('div', {style: { margin: '10px', background: 'white' }}, msg.value.content.text) // TODO (mix): use lodash/get
29		- })
30		- ])
	28	+ return computed(chunk, chunk => get(chunk, '[0].value.author') === myId
	29	+ ? h('div.my-chunk', [
	30	+ h('div.avatar'),
	31	+ h('div.msgs', map(chunk, msg => {
	32	+ return h('div.msg-row', [
	33	+ h('div.spacer'),
	34	+ h('div.msg', get(msg, 'value.content.text'))
	35	+ ])
	36	+ }))
	37	+ ])
	38	+ : h('div.other-chunk', [
	39	+ h('div.avatar', 'other'),
	40	+ h('div.msgs', map(chunk, msg => {
	41	+ return h('div.msg-row', [
	42	+ h('div.msg', get(msg, 'value.content.text')),
	43	+ h('div.spacer')
	44	+ ])
	45	+ }))
	46	+ ])
	47	+ )
31	48	})
32	49	)
33	50
34	51	return threadView
35	52	}
	53	+
	54	+ function isByMe (msg) {
	55	+ return msg && msg.value.author === myId
	56	+ }
36	57	}
37	58
38	59	function buildChunkedThreadObs (source) {
39	60	var chunkedThread = MutantArray()
		@@ -67,4 +88,5 @@
67	88	// TODO (mix) use lodash/get
68	89	return msgA.value.author === msgB.value.author
69	90	}
70	91
	92	+

app/html/thread.mcssView
		@@ -1,5 +1,98 @@
1	1	Thread {
2		- background-color: lightgrey
	2	+ background-color: #eee
3	3	padding: 1rem
	4	+ font-family: 'arial'
	5	+
	6	+ max-width: 1400px
	7	+
	8	+ display: flex
	9	+ flex-direction: column
	10	+
	11	+ div.my-chunk {
	12	+ $chunk
	13	+
	14	+ justify-content: space-between
	15	+
	16	+ div.avatar {
	17	+ visibility: hidden
	18	+ }
	19	+
	20	+ div.msgs {
	21	+ div.msg-row {
	22	+ div.msg {
	23	+ $primaryColor
	24	+
	25	+ border-bottom-left-radius: .7rem
	26	+ border-top-left-radius: .7rem
	27	+ }
	28	+ :first-child {
	29	+ div.msg {
	30	+ border-top-right-radius: .7rem
	31	+ }
	32	+ }
	33	+ :last-child {
	34	+ div.msg {
	35	+ border-bottom-right-radius: .7rem
	36	+ }
	37	+ }
	38	+ }
	39	+ }
	40	+ }
	41	+
	42	+ div.other-chunk {
	43	+ $chunk
	44	+
	45	+ div.msgs {
	46	+
	47	+ div.msg-row {
	48	+ div.msg {
	49	+ border-bottom-right-radius: .7rem
	50	+ border-top-right-radius: .7rem
	51	+ }
	52	+ :first-child {
	53	+ div.msg {
	54	+ border-top-left-radius: .7rem
	55	+ }
	56	+ }
	57	+ :last-child {
	58	+ div.msg {
	59	+ border-bottom-left-radius: .7rem
	60	+ }
	61	+ }
	62	+ }
	63	+ }
	64	+ }
4	65	}
5	66
	67	+$chunk {
	68	+ display: flex
	69	+ margin-bottom: .5rem
	70	+
	71	+ div.avatar {
	72	+ background-color: grey
	73	+ width: 2rem
	74	+ height: 2rem
	75	+ border-radius: 1rem
	76	+
	77	+ margin-right: 1rem
	78	+ }
	79	+
	80	+ div.msgs {
	81	+ max-width: 80%
	82	+ div.msg-row {
	83	+ display: flex
	84	+
	85	+ div.msg {
	86	+ line-height: 1.2rem
	87	+ background-color: #fff
	88	+ padding: .7rem
	89	+ margin-bottom: .3rem
	90	+ border-radius: .3rem
	91	+ }
	92	+ div.msg-spacer {
	93	+ flex-grow: grow
	94	+ }
	95	+ }
	96	+ }
	97	+}
	98	+

styles/mixins.jsView
		@@ -9,14 +9,15 @@
9	9	})
10	10	}
11	11
12	12	const mainMixins = `
13		-$colorPrimary {
14		- color: green
	13	+$primaryColor {
	14	+ color: white
	15	+ background-color: #3dc8c3
15	16	}
16	17
17	18	$colorSubtle {
18		- color: gray
	19	+ color: #222
19	20	}
20	21
21	22	$avatarSmall {
22	23	width: 32px

test/fixtures/thread.jsView
		@@ -1,7 +1,7 @@
1	1	// an arrage of messages in a thread
2	2	// can stream by making a source with pull.values()
3		-// If you assume you're Dominic, your key is : %IAkSWeMycouc4MM7eakTTIC+TITDNtvfpFp3Jgz4LiU=.sha256
	3	+// If you assume you're Dominic, your key is : @EMovhfIrFk4NihAKnRNhrfRaqIhBv1Wj8pTxJNgvCCY=.ed25519
4	4
5	5	module.exports = [{
6	6	"key": "%fXXZgQrwnj7F+Y19H0IXxNriuvPFoahvusih3UzpkfA=.sha256",
7	7	"value": {

Built with git-ssb-web

mixmix / ticktack

Commit 314000baff3b2045fe13f8edf6519b9bdd1779d5

basic chunked DOM + style

Files changed