git ssb - Merge pull request #35 from ticktackim/onboarding

Commit ef08c9119e733198510e57b49ae441a7d0c8cae7

Merge pull request #35 from ticktackim/onboarding

Onboarding

mix irving authored on 8/28/2017, 12:11:20 AM
GitHub committed on 8/28/2017, 12:11:20 AM
Parent: 0052f2414e13f7d307466526f1eeceabc0d27695
Parent: 6d1b6dfb2973eaadaa459fee0d6bd1716214712f

Files changed

app/html/app.js	changed
app/html/header.js	changed
app/page/groupFind.mcss	changed
app/page/settings.js	changed
app/page/settings.mcss	changed
app/page/userEdit.js	changed
app/page/userEdit.mcss	changed
app/page/userFind.mcss	changed
app/page/userShow.js	changed
app/page/userShow.mcss	changed
package.json	changed
styles/mixins.js	changed
translations/en.js	changed
translations/zh.js	changed

app/html/app.jsView
		@@ -8,20 +8,23 @@
8	8	const h = require('mutant/h')
9	9
10	10	exports.gives = nest({
11	11	'app.html.app': true,
12		- 'history.obs.location': true,
	12	+ 'history.obs.history': true,
13	13	'history.sync.push': true,
14	14	'history.sync.back': true,
15	15	})
16	16
17	17	exports.needs = nest({
	18	+ 'about.async.suggest': 'first',
18	19	'app.html.header': 'first',
19	20	'app.async.catchLinkClick': 'first',
	21	+ 'channel.async.suggest': 'first',
	22	+ 'keys.sync.id': 'first',
20	23	'router.sync.router': 'first',
	24	+ 'settings.sync.get': 'first',
	25	+ 'settings.sync.set': 'first',
21	26	'styles.css': 'reduce',
22		- 'about.async.suggest': 'first',
23		- 'channel.async.suggest': 'first',
24	27	})
25	28
26	29	exports.create = (api) => {
27	30	var nav = null
		@@ -45,14 +48,31 @@
45	48	api.router.sync.router,
46	49	api.app.html.header
47	50	)
48	51
49		- nav.push({page: 'home'})
	52	+ const isOnboarded = api.settings.sync.get('onboarded')
	53	+ if (isOnboarded)
	54	+ nav.push({page: 'home'})
	55	+ else {
	56	+ nav.push({
	57	+ page:'userEdit',
	58	+ feed: api.keys.sync.id(),
	59	+ callback: (err, didEdit) => {
	60	+ if (err) throw new Error ('Error editing profile', err)
	61	+
	62	+ if (didEdit)
	63	+ api.settings.sync.set({ onboarded: true })
	64	+
	65	+ nav.push({ page: 'home' })
	66	+ }
	67	+ })
	68	+ }
	69	+
50	70	return nav
51	71	},
52	72	'history.sync.push': (location) => nav.push(location),
53	73	'history.sync.back': () => nav.back(),
54		- 'history.obs.location': () => nav.history,
	74	+ 'history.obs.history': () => nav.history,
55	75	})
56	76	}
57	77
58	78

app/html/header.jsView
		@@ -16,9 +16,9 @@
16	16	// FUTURE breadcrumb here ?
17	17	// h('h1', computed(nav.location, e => e.element.title)),
18	18
19	19	h('div.tools', [
20		- h('i.fa.fa-user', { 'ev-click': () => nav.push({page:'userEdit', feed: api.keys.sync.id()}) }), // TEMP
	20	+ // h('i.fa.fa-user', { 'ev-click': () => nav.push({page:'userEdit', feed: api.keys.sync.id()}) }), // TEMP
21	21	h('i.fa.fa-address-book', { 'ev-click': () => nav.push({page:'userFind'}) }),
22	22	h('i.fa.fa-hashtag', { 'ev-click': () => nav.push({page:'groupFind'}) }),
23	23	h('i.fa.fa-gear', { 'ev-click': () => nav.push({page:'settings'}) })
24	24	])

app/page/groupFind.mcssView
		@@ -1,7 +1,7 @@
1	1	Page -groupFind {
2	2	div.container {
3		- max-width: 40rem
	3	+ $maxWidthSmaller
4	4	div.search {
5	5	background-color: #fff
6	6
7	7	margin-bottom: 1rem
		@@ -25,9 +25,9 @@
25	25	}
26	26
27	27
28	28	div.results {
29		- max-width: 40rem
	29	+ $maxWidthSmaller
30	30
31	31	div.Link {
32	32	div.result {
33	33	background-color: #fff

app/page/settings.jsView
		@@ -3,31 +3,77 @@
3	3
4	4	exports.gives = nest('app.page.settings')
5	5
6	6	exports.needs = nest({
	7	+ 'about.html.image': 'first',
	8	+ 'about.obs.name': 'first',
	9	+ 'history.sync.push': 'first',
	10	+ 'history.obs.history': 'first',
	11	+ 'keys.sync.id': 'first',
7	12	'settings.sync.get': 'first',
8	13	'settings.sync.set': 'first',
9	14	'settings.obs.get': 'first',
10	15	'translations.sync.strings': 'first',
11	16	})
12	17
13	18	const LANGUAGES = ['zh', 'en']
14		-const DEFAULT_SETTINGS = {
15		- language: 'zh'
16		-}
17	19
	20	+// TODO - this needs moving somewhere upstream
	21	+// const DEFAULT_SETTINGS = {
	22	+// onboarded: false,
	23	+// language: 'zh'
	24	+// }
	25	+
18	26	exports.create = (api) => {
19	27	return nest('app.page.settings', settings)
20	28
21	29	function settings (location) {
	30	+
22	31	// RESET the app when the settings are changed
23		- api.settings.obs.get()(() => {
24		- window.location.reload()
	32	+ api.settings.obs.get('language')(() => {
	33	+ console.log('language changed, resetting view')
	34	+
	35	+ api.history.obs.history().set([]) // wipe nav cache
	36	+ api.history.sync.push({page: 'home'}) // queue up basic pages
	37	+ api.history.sync.push({page: 'settings'})
25	38	})
26	39
	40	+ const feed = api.keys.sync.id()
27	41	const strings = api.translations.sync.strings()
28	42	const currentLanguage = api.settings.sync.get('language')
29	43
	44	+ const editProfile = () => api.history.sync.push({
	45	+ page:'userEdit',
	46	+ feed,
	47	+ callback: (err, didEdit) => {
	48	+ if (err) throw new Error ('Error editing profile', err)
	49	+ api.history.sync.push({ page: 'settings' })
	50	+ }
	51	+ })
	52	+
	53	+ return h('Page -settings', [
	54	+ h('div.container', [
	55	+ h('h1', strings.settingsPage.title),
	56	+ h('section -profile', [
	57	+ h('header', strings.settingsPage.section.profile),
	58	+ h('div.profile', [
	59	+ h('div.name', api.about.obs.name(feed)),
	60	+ api.about.html.image(feed),
	61	+ ]),
	62	+ h('div.actions', [
	63	+ h('Button', { 'ev-click': editProfile }, [
	64	+ strings.settingsPage.action.edit,
	65	+ h('i.fa.fa-pencil')
	66	+ ])
	67	+ ])
	68	+ ]),
	69	+ h('section -language', [
	70	+ h('header', strings.settingsPage.section.language),
	71	+ h('div.languages', LANGUAGES.map(Language))
	72	+ ])
	73	+ ])
	74	+ ])
	75	+
30	76	function Language (lang) {
31	77	const selectLang = () => api.settings.sync.set({ language: lang })
32	78	const className = currentLanguage === lang ? '-primary' : ''
33	79
		@@ -39,13 +85,7 @@
39	85	lang
40	86	)
41	87	}
42	88
43		- return h('Page -settings', [
44		- h('div.container', [
45		- h('h1', strings.settings),
46		- h('div.languages', LANGUAGES.map(Language))
47		- ])
48		- ])
49	89	}
50	90	}
51	91

app/page/settings.mcssView
		@@ -1,15 +1,58 @@
1	1	Page -settings {
	2	+ padding-top: 1rem
	3	+
2	4	div.container {
3		- div.languages {
4		- background: #fff
5		- padding: 1rem
6		- padding-bottom: 14rem
	5	+ background: #fff
	6	+ padding: 1rem
	7	+ $maxWidthSmaller
7	8
8		- display: flex
	9	+ h1 {
	10	+ margin-top: 0
9	11	}
	12	+
	13	+ section {
	14	+ padding-bottom: 2rem
	15	+ margin-bottom: 2rem
	16	+
	17	+ header {
	18	+ font-size: 1.4rem
	19	+ margin-bottom: 1rem
	20	+ }
	21	+
	22	+ -profile {
	23	+ div.profile {
	24	+ display: flex
	25	+ flex-direction: column
	26	+
	27	+ div.name {
	28	+ margin-bottom: .5rem
	29	+ }
	30	+ img.Avatar {
	31	+ width: 8rem
	32	+ height: 8rem
	33	+ }
	34	+ margin-bottom: .5rem
	35	+ }
	36	+
	37	+ div.actions {
	38	+ display:flex
	39	+
	40	+ div.Button {
	41	+ i.fa { margin-left: .4rem }
	42	+ }
	43	+ }
	44	+ }
	45	+
	46	+ -language {
	47	+ div.languages {
	48	+ display: flex
	49	+ }
	50	+ }
	51	+ }
10	52	}
11	53	}
12	54
13	55	Button -language {
14	56	margin-right: 1rem
15	57	}
	58	+

app/page/userEdit.jsView
		@@ -12,10 +12,10 @@
12	12	exports.create = (api) => {
13	13	return nest('app.page.userEdit', userEdit)
14	14
15	15	function userEdit (location) {
16		- // location is an object { feed, page: 'userEdit' }
17		- const { feed } = location
	16	+ // location is an object { feed, page: 'userEdit', callback }
	17	+ var { feed, callback } = location
18	18
19	19	const strings = api.translations.sync.strings()
20	20
21	21	const options = Object.assign({}, location, {
		@@ -29,13 +29,16 @@
29	29	save: strings.userEdit.action.save,
30	30	}
31	31	})
32	32
33		- const callback = (err, didEdit) => {
	33	+ const defaultCallback = (err, didEdit) => {
34	34	if (err) throw new Error ('Error editing profile', err)
35	35
36	36	api.history.sync.push({ page: 'userShow', feed })
37	37	}
	38	+ callback = typeof callback == 'function'
	39	+ ? callback
	40	+ : defaultCallback
38	41
39	42	return h('Page -userEdit', {}, [
40	43	h('div.container', [
41	44	api.about.page.edit(options, callback)

app/page/userEdit.mcssView
		@@ -1,7 +1,7 @@
1	1	Page -userEdit {
2	2	div.container {
3		- max-width: 40rem
	3	+ $maxWidthSmaller
4	4
5	5	}
6	6	}
7	7

app/page/userFind.mcssView
		@@ -1,7 +1,7 @@
1	1	Page -userFind {
2	2	div.container {
3		- max-width: 40rem
	3	+ $maxWidthSmaller
4	4	div.search {
5	5	background-color: #fff
6	6
7	7	margin-bottom: 1rem
		@@ -25,9 +25,9 @@
25	25	}
26	26
27	27
28	28	div.results {
29		- max-width: 40rem
	29	+ $maxWidthSmaller
30	30
31	31	div.Link {
32	32	div.result {
33	33	background-color: #fff

app/page/userShow.jsView
		@@ -78,9 +78,11 @@
78	78	return h('Page -userShow', {title: name}, [
79	79	h('div.container', [
80	80	h('header', [
81	81	h('h1', name),
82		- Link({ page: 'userEdit', feed }, h('i.fa.fa-pencil'))
	82	+ feed === myId // Only expose own profile editing right now
	83	+ ? Link({ page: 'userEdit', feed }, h('i.fa.fa-pencil'))
	84	+ : ''
83	85	]),
84	86	api.about.html.image(feed),
85	87	feed !== myId
86	88	? h('div.friendship', [

app/page/userShow.mcssView
		@@ -14,9 +14,12 @@
14	14	}
15	15	}
16	16	}
17	17
18		- img.Avatar {}
	18	+ img.Avatar {
	19	+ width: 30rem
	20	+ height: 30rem
	21	+ }
19	22
20	23	div.friendship {
21	24	display: flex
22	25	align-items: center

package.jsonView
		@@ -1,7 +1,7 @@
1	1	{
2	2	"name": "ticktack",
3		- "version": "1.0.0",
	3	+ "version": "0.1.1",
4	4	"description": "",
5	5	"main": "index.js",
6	6	"scripts": {
7	7	"rebuild": "cross-script npm rebuild --runtime=electron \"--target=$(electron -v)\" \"--abi=$(electron --abi)\" --disturl=https://atom.io/download/atom-shell",

styles/mixins.jsView
		@@ -19,8 +19,12 @@
19	19	$maxWidth {
20	20	max-width: 1200px
21	21	}
22	22
	23	+$maxWidthSmaller {
	24	+ max-width: 40rem
	25	+}
	26	+
23	27	$colorPrimary {
24	28	color: white
25	29	background-color: #3dc8c3
26	30

translations/en.jsView
		@@ -25,9 +25,18 @@
25	25	createFirstThread: 'Start this group by posting the first thread.'
26	26	}
27	27	},
28	28	groupIndex: "Group Index",
29		- settings: "Settings",
	29	+ settingsPage: {
	30	+ title: "Settings",
	31	+ action: {
	32	+ edit: 'Edit',
	33	+ },
	34	+ section: {
	35	+ language: 'Language',
	36	+ profile: 'Profile',
	37	+ }
	38	+ },
30	39	threadNew: {
31	40	pageTitle: 'New Thread',
32	41	field: {
33	42	to: 'To',

translations/zh.jsView
		@@ -25,9 +25,11 @@
25	25	createFirstThread: '发布第一个话题来开始群组讨论'
26	26	}
27	27	},
28	28	groupIndex: '群组列表',
29		- settings: '设置',
	29	+ settingsPage: {
	30	+ title: '设置',
	31	+ },
30	32	threadNew: {
31	33	pageTitle: '新建话题',
32	34	field: {
33	35	to: '发送给',

Built with git-ssb-web

mixmix / ticktack

Commit ef08c9119e733198510e57b49ae441a7d0c8cae7

Merge pull request #35 from ticktackim/onboarding

Files changed