git ssb - minimal discover sidebar · mixmix/ticktack@0e65bf76

mix irving committed on 9/27/2017, 6:58:29 AM
Parent: 791d817894b256f9a26d15c977f65c023036c676

app/html/context.jsView
		@@ -1,0 +1,49 @@
	1	+const nest = require('depnest')
	2	+const { h, computed, map, when } = require('mutant')
	3	+
	4	+exports.gives = nest('app.html.context')
	5	+
	6	+exports.needs = nest({
	7	+ 'app.html.link': 'first',
	8	+ 'translations.sync.strings': 'first',
	9	+})
	10	+
	11	+
	12	+exports.create = (api) => {
	13	+ return nest('app.html.context', (location) => {
	14	+
	15	+ const strings = api.translations.sync.strings()
	16	+
	17	+ const discover = {
	18	+ notification: 1,
	19	+ imageEl: h('i.fa.fa-binoculars'),
	20	+ name: strings.blogIndex.title,
	21	+ location: { page: 'blogIndex' },
	22	+ selected: location.page === 'blogIndex' // TODO could be a whole host of pages
	23	+ }
	24	+
	25	+ const nearby = []
	26	+ const friendsWithThreads = []
	27	+
	28	+ return h('Context -feed', [
	29	+ h('div.level.-one', [
	30	+ Option(discover),
	31	+ map(nearby, Option), // TODO
	32	+ map(friendsWithThreads, Option) // TODO
	33	+ ]),
	34	+ // h('div.level.-two'),
	35	+ ])
	36	+
	37	+
	38	+ function Option ({ notification = 0, imageEl, name, location, selected }) {
	39	+ return h('Option', { className: selected ? '-selected' : '' }, [
	40	+ h('div.circle', [
	41	+ when(notification, h('div.alert', notification)),
	42	+ imageEl
	43	+ ]),
	44	+ api.app.html.link(location, name),
	45	+ ])
	46	+ }
	47	+ })
	48	+}
	49	+

app/html/context.mcssView
		@@ -1,0 +1,69 @@
	1	+Context {
	2	+ display: flex
	3	+
	4	+ div.level {
	5	+ width: 11rem
	6	+ border-right: 1px gainsboro solid
	7	+
	8	+ display: flex
	9	+ flex-direction: column
	10	+
	11	+ div.Option {}
	12	+
	13	+ }
	14	+}
	15	+
	16	+Option {
	17	+ min-width: 8rem
	18	+ padding: 1rem
	19	+ display: flex
	20	+ align-items: center
	21	+
	22	+ -selected {
	23	+ $backgroundSelected
	24	+ }
	25	+
	26	+ div.circle {
	27	+ width: 3.6rem
	28	+ position: relative
	29	+
	30	+ div.alert {
	31	+ position: absolute
	32	+ width: 1.2rem
	33	+ height: 1.2rem
	34	+ border-radius: 1rem
	35	+ top: -.2rem
	36	+ left: -.2rem
	37	+
	38	+ background-color: red
	39	+ color: #fff
	40	+ font-size: .8rem
	41	+
	42	+ display: flex
	43	+ justify-content: center
	44	+ align-items: center
	45	+ }
	46	+
	47	+ a img {
	48	+
	49	+ }
	50	+ i {
	51	+ $avatarSmall
	52	+ $colorPrimary
	53	+ font-size: 1.3rem
	54	+ display: flex
	55	+ justify-content: center
	56	+ align-items: center
	57	+ }
	58	+
	59	+ }
	60	+
	61	+ div.Link {
	62	+ flex-grow: 1
	63	+
	64	+ display: flex
	65	+ align-items: center
	66	+ height: 3rem
	67	+ }
	68	+
	69	+}

app/index.jsView
		@@ -3,8 +3,9 @@
3	3	catchLinkClick: require('./async/catch-link-click'),
4	4	},
5	5	html: {
6	6	app: require('./html/app'),
	7	+ context: require('./html/context'),
7	8	header: require('./html/header'),
8	9	thread: require('./html/thread'),
9	10	link: require('./html/link'),
10	11	threadCard: require('./html/thread-card'),

app/page/blogIndex.jsView
		@@ -8,13 +8,14 @@
8	8
9	9	exports.gives = nest('app.page.blogIndex')
10	10
11	11	exports.needs = nest({
	12	+ 'app.html.context': 'first',
	13	+ 'app.html.threadCard': 'first',
12	14	'history.sync.push': 'first',
13	15	'keys.sync.id': 'first',
14	16	'translations.sync.strings': 'first',
15	17	'state.obs.threads': 'first',
16		- 'app.html.threadCard': 'first',
17	18	'unread.sync.isUnread': 'first'
18	19	})
19	20
20	21	exports.create = (api) => {
		@@ -25,9 +26,9 @@
25	26	//
26	27	var strings = api.translations.sync.strings()
27	28
28	29	return h('Page -blogIndex', {title: strings.home}, [
29		- h('div.context', 'context (sidebar)'),
	30	+ api.app.html.context(location),
30	31	h('div.content', [
31	32	blogs(),
32	33	h('Button -showMore', { 'ev-click': contentHtmlObs.more }, strings.showMore)
33	34	]),

mixmix / ticktack