git ssb - Merge remote-tracking branch 'origin/threadNew'

Commit 682cd150893709ec579d59c1835f2c86e1a71029

Merge remote-tracking branch 'origin/threadNew'

Dominic Tarr committed on 8/17/2017, 5:24:27 AM
Parent: 17795d6b64c14a6b4619d142e0f05e3e8e3b2562
Parent: a0e32e0e1ccf94a033e936e93954f133b8dc45a3

Files changed

app/html/thread.js	changed
app/html/thread.mcss	changed
app/page/page.mcss	changed
app/page/threadNew.js	changed
app/page/threadShow.js	changed
app/page/threadNew.mcss	added
message/html/compose.js	changed
message/html/compose.mcss	changed
styles/button.mcss	changed
styles/global.mcss	changed
styles/mixins.js	changed
translations/sync.js	changed

app/html/thread.jsView
		@@ -50,8 +50,11 @@
50	50
51	51	return h('div.msg', api.message.html.markdown(raw))
52	52	}
53	53
	54	+ threadView.subject = computed(thread.messages, msgs => {
	55	+ return get(msgs, '[0].value.content.subject')
	56	+ })
54	57	return threadView
55	58	}
56	59	}
57	60

app/html/thread.mcssView
		@@ -13,9 +13,9 @@
13	13
14	14	div.msgs {
15	15	div.msg-row {
16	16	div.msg {
17		- $primaryColor
	17	+ $colorPrimary
18	18
19	19	(a) { color: #4d3568 }
20	20	$roundLeft
21	21	}

app/page/page.mcssView
		@@ -1,23 +1,17 @@
1	1	Page {
2		- h1 {
3		- margin-left: 1rem
4		- }
	2	+ $primaryBackground
5	3
6		- div.Nav {}
7		-
8	4	div.container {
9		- $primaryBackground
	5	+ $maxWidth
10	6	padding: 1rem
	7	+ margin: 0 auto
11	8
12	9	div.Thread {
13		- $maxWidth
14		- margin: 0 auto 1rem
	10	+ margin-bottom: 1rem
15	11	}
16	12
17	13	div.Compose {
18		- $maxWidth
19		- margin: 0 auto
20	14	}
21	15	}
22	16	}
23	17

app/page/threadNew.jsView
		@@ -1,28 +1,61 @@
1	1	const nest = require('depnest')
2		-const { h } = require('mutant')
	2	+const { h, Struct, Value, computed } = require('mutant')
3	3
4	4	exports.gives = nest('app.page.threadNew')
5	5
6	6	exports.needs = nest({
7	7	'translations.sync.strings': 'first',
8	8	'about.html.image': 'first',
9	9	'about.obs.name': 'first',
10	10	'app.html.thread': 'first',
	11	+ 'history.sync.push': 'first',
	12	+ 'keys.sync.id': 'first',
	13	+ 'message.html.compose': 'first'
11	14	})
12	15
13	16	exports.create = (api) => {
14		- var strings = api.translations.sync.strings()
15	17
16	18	return nest('app.page.threadNew', threadNew)
17	19
18	20	function threadNew (location) {
	21	+ const strings = api.translations.sync.strings()
19	22	const { feed } = location
	23	+ const name = api.about.obs.name(feed)
20	24
21		- return h('Page -threadNew', {title: strings.threadNew}, [
22		- h('h1', ['New thread with ', api.about.obs.name(feed)]),
23		- api.about.html.image(feed),
24		- h('div', 'compose box') // a special one which takes us to threadShow
	25	+ const meta = Struct({
	26	+ type: 'post',
	27	+ recps: [
	28	+ api.keys.sync.id(),
	29	+ { link: feed, name }
	30	+ ],
	31	+ subject: Value()
	32	+ })
	33	+ const composer = api.message.html.compose(
	34	+ { meta, shrink: false },
	35	+ (err, msg) => api.history.sync.push(err ? err : msg)
	36	+ )
	37	+
	38	+ return h('Page -threadNew', {title: strings.threadNew.pageTitle}, [
	39	+ h('div.container', [
	40	+ h('div.field -to', [
	41	+ h('div.label', strings.threadNew.field.to),
	42	+ h('div.recps', [
	43	+ h('div.recp', [
	44	+ api.about.html.image(feed),
	45	+ h('div.name', name)
	46	+ ])
	47	+ ])
	48	+ ]),
	49	+ h('div.field -subject', [
	50	+ h('div.label', strings.threadNew.field.subject),
	51	+ h('input', {
	52	+ 'ev-input': e => meta.subject.set(e.target.value),
	53	+ placeholder: strings.optionalField
	54	+ }),
	55	+ ]),
	56	+ composer
	57	+ ])
25	58	])
26	59	}
27	60	}
28	61

app/page/threadShow.jsView
		@@ -1,6 +1,6 @@
1	1	const nest = require('depnest')
2		-const { h } = require('mutant')
	2	+const { h, computed } = require('mutant')
3	3	const last = require('lodash/last')
4	4	const get = require('lodash/get')
5	5
6	6	exports.gives = nest('app.page.threadShow')
		@@ -30,11 +30,13 @@
30	30	channel: channel,
31	31	recps: get(location, 'value.content.recps')
32	32	}
33	33	const composer = api.message.html.compose({ meta, shrink: false })
	34	+ const subject = computed(thread.subject, subject => subject \|\| strings.threadShow)
34	35
35		- return h('Page -threadShow', {title: strings.threadShow}, [
	36	+ return h('Page -threadShow', [
36	37	h('div.container', [
	38	+ h('h1', subject),
37	39	thread,
38	40	composer
39	41	]),
40	42	])

app/page/threadNew.mcssView
		@@ -1,0 +1,52 @@
	1	+Page -threadNew {
	2	+
	3	+ div.container {
	4	+ div.field {
	5	+ margin-bottom: .5rem
	6	+
	7	+ display: flex
	8	+ align-items: center
	9	+
	10	+ div.label {
	11	+ flex-basis: 4rem
	12	+ padding-left: 1rem
	13	+ margin-right: 1rem
	14	+ }
	15	+
	16	+ input {
	17	+ flex-grow: 1
	18	+ $fontBasic
	19	+ padding: .6rem
	20	+ }
	21	+
	22	+ div.recps {
	23	+ display: flex
	24	+
	25	+ div.recp {
	26	+ padding: .3rem
	27	+ $borderSubtle
	28	+ border-radius: 6rem
	29	+ background-color: #fff
	30	+
	31	+ margin-right: 1rem
	32	+
	33	+ display: flex
	34	+ align-items: center
	35	+
	36	+ img {
	37	+ width: 2rem
	38	+ height: 2rem
	39	+ border-radius: 2rem
	40	+
	41	+ margin-right: .5rem
	42	+ }
	43	+
	44	+ div.name {
	45	+ margin-right: .5rem
	46	+ }
	47	+ }
	48	+ }
	49	+
	50	+ }
	51	+ }
	52	+}

message/html/compose.jsView
		@@ -13,14 +13,17 @@
13	13	'emoji.sync.names': 'first',
14	14	'emoji.sync.url': 'first',
15	15	'message.async.publish': 'first',
16	16	// 'message.html.confirm': 'first'
	17	+ 'translations.sync.strings': 'first'
17	18	})
18	19
19	20	exports.create = function (api) {
20	21	return nest('message.html.compose', compose)
21	22
22	23	function compose ({ shrink = true, meta, prepublish, placeholder = 'Write a message' }, cb) {
	24	+ const strings = api.translations.sync.strings()
	25	+
23	26	var files = []
24	27	var filesById = {}
25	28	var channelInputFocused = Value(false)
26	29	var textAreaFocused = Value(false)
		@@ -79,9 +82,9 @@
79	82	})
80	83
81	84	fileInput.onclick = () => hasContent.set(true)
82	85
83		- var publishBtn = h('button', { 'ev-click': publish }, 'Publish')
	86	+ var publishBtn = h('Button -primary', { 'ev-click': publish }, strings.sendMessage)
84	87
85	88	var actions = h('section.actions', [
86	89	fileInput,
87	90	publishBtn
		@@ -165,21 +168,25 @@
165	168	content = prepublish(content)
166	169	}
167	170	} catch (err) {
168	171	publishBtn.disabled = false
169		- if (cb) cb(err)
170		- else throw err
	172	+ handleErr(err)
171	173	}
172	174
173	175	return api.message.async.publish(content, done)
174	176	// return api.message.html.confirm(content, done)
175	177
176	178	function done (err, msg) {
177	179	publishBtn.disabled = false
178		- if (err) throw err
	180	+ if (err) handleErr(err)
179	181	else if (msg) textArea.value = ''
180	182	if (cb) cb(err, msg)
181	183	}
	184	+
	185	+ function handleErr (err) {
	186	+ if (cb) cb(err)
	187	+ else throw err
	188	+ }
182	189	}
183	190	}
184	191	}
185	192

message/html/compose.mcssView
		@@ -2,18 +2,18 @@
2	2	display: flex
3	3	flex-direction: column
4	4
5	5	textarea {
6		- $basicText
	6	+ $fontBasic
7	7
8	8	padding: .6rem
9		- border: 1px solid gainsboro
	9	+ $borderSubtle
10	10	border-top-left-radius: 0
11	11	border-top-right-radius: 0
12	12	}
13	13
14	14	input.channel {
15		- border: 1px solid gainsboro
	15	+ $borderSubtle
16	16	border-bottom: none
17	17	border-bottom-left-radius: 0
18	18	border-bottom-right-radius: 0
19	19	padding: .5rem
		@@ -48,9 +48,9 @@
48	48	visibility: hidden
49	49	}
50	50
51	51	::before {
52		- $composeButton
	52	+ $attachButton
53	53	padding-top: .3rem
54	54
55	55	content: '📎'
56	56	font-size: 1rem
		@@ -65,14 +65,9 @@
65	65	box-shadow: none
66	66	}
67	67	}
68	68
69		- button {
70		- $composeButton
71		-
72		- text-transform: uppercase
73		- font-weight: bold
74		- font-size: .7rem
	69	+ div.Button {
75	70	}
76	71	}
77	72
78	73	-expanded {
		@@ -106,14 +101,12 @@
106	101	}
107	102
108	103	}
109	104
110		-$composeButton {
	105	+$attachButton {
111	106	background: #fff
112	107	color: #666
113		- border: 1px solid #bbb
114		- border-radius: .5rem
	108	+ border: 1px solid #b9b9b9
115	109	padding: .5rem
116	110	margin: 0
117	111	cursor: pointer
118	112	}
119		-

styles/button.mcssView
		@@ -14,9 +14,9 @@
14	14	color: #222
15	15	}
16	16	}
17	17	-primary {
18		- $primaryColor
	18	+ $colorPrimary
19	19
20	20	:hover {
21	21	opacity: .9
22	22	}

styles/global.mcssView
		@@ -1,6 +1,6 @@
1	1	body {
2		- $basicText
	2	+ $fontBasic
3	3	background-color: #fff
4	4
5	5	margin: 0
6	6
		@@ -17,7 +17,4 @@
17	17	img {
18	18	max-width: 100%
19	19	}
20	20
21		-button {
22		- width: 100%
23		-}

styles/mixins.jsView
		@@ -9,18 +9,18 @@
9	9	})
10	10	}
11	11
12	12	const mainMixins = `
13		-$basicText {
	13	+$fontBasic {
14	14	font-family: arial
15	15	font-size: 1rem
16	16	}
17	17
18	18	$maxWidth {
19	19	max-width: 1200px
20	20	}
21	21
22		-$primaryColor {
	22	+$colorPrimary {
23	23	color: white
24	24	background-color: #3dc8c3
25	25	}
26	26
		@@ -63,8 +63,12 @@
63	63	}
64	64	}
65	65	}
66	66
	67	+$borderSubtle {
	68	+ border: 1px solid #b9b9b9
	69	+}
	70	+
67	71	$roundLeft {
68	72	border-top-left-radius: 1.2rem
69	73	border-bottom-left-radius: 1.2rem
70	74	}

translations/sync.jsView
		@@ -7,8 +7,10 @@
7	7	}
8	8
9	9	const en = {
10	10	loading: 'Loading...',
	11	+ optionalField: 'optional',
	12	+ sendMessage: 'Send',
11	13	showMore: 'Show More',
12	14	channels: 'Channels',
13	15	directMessages: 'Direct Messages',
14	16	replySymbol: '> ',
		@@ -20,9 +22,16 @@
20	22	groupIndex: "Group Index",
21	23	//stub: should not be shown on released software!
22	24	stub: "this page is a stub",
23	25	settings: "Settings",
24		- threadNew: 'New Thread',
	26	+ threadNew: {
	27	+ pageTitle: 'New Thread',
	28	+ field: {
	29	+ to: 'To',
	30	+ subject: 'Subject'
	31	+ }
	32	+
	33	+ },
25	34	threadShow: "Direct Messages",
26	35	userShow: {
27	36	action: {
28	37	follow: 'Follow',

Built with git-ssb-web

mixmix / ticktack

Commit 682cd150893709ec579d59c1835f2c86e1a71029

Merge remote-tracking branch 'origin/threadNew'

Files changed