git ssb - font awesome icons + basic filter · Dominic/patchbay@16d4fed8

Commit 16d4fed8035a33d71d29eb20773bfe59fa2100f0

font awesome icons + basic filter

mix irving committed on 4/16/2017, 6:44:30 AM
Parent: d1873b2d6f4b0d8bf64ad1551fd570d2642d81ea

Files changed

app/html/page/public.js	changed
app/html/scroller.mcss	changed
app/html/filter.js	added
app/html/filter.mcss	added
app/styles/css/font-awesome.js	added
package.json	changed

app/html/page/public.jsView
		@@ -1,6 +1,6 @@
1	1 …	const nest = require('depnest')
2		-const { h } = require('mutant')
	2 …	+const { h, Value, when } = require('mutant')
3	3 …	const pull = require('pull-stream')
4	4 …	const Scroller = require('pull-scroll')
5	5 …	const next = require('../../../junk/next-stepper')
6	6 …
		@@ -11,14 +11,17 @@
11	11 …	}
12	12 …	})
13	13 …
14	14 …	exports.needs = nest({
	15 …	+ 'app.html': {
	16 …	+ filter: 'first',
	17 …	+ scroller: 'first'
	18 …	+ },
15	19 …	'feed.pull.public': 'first',
16	20 …	'message.html': {
17	21 …	compose: 'first',
18	22 …	render: 'first'
19		- },
20		- 'app.html.scroller': 'first'
	23 …	+ }
21	24 …	})
22	25 …
23	26 …	exports.create = function (api) {
24	27 …	const route = '/public'
		@@ -39,24 +42,36 @@
39	42 …
40	43 …	function publicPage (path) {
41	44 …	if (path !== route) return
42	45 …
	46 …	+
	47 …	+ const { filterMenu, filterDownThrough, filterUpThrough, resetFeed } = api.app.html.filter(draw)
	48 …	+
43	49 …	const composer = api.message.html.compose({
44	50 …	meta: { type: 'post' },
45	51 …	placeholder: 'Write a public message'
46	52 …	})
47		- const { container, content } = api.app.html.scroller({ prepend: composer })
48	53 …
49		- pull(
50		- next(api.feed.pull.public, {old: false, limit: 100}),
51		- Scroller(container, content, api.message.html.render, true, false)
52		- )
	54 …	+ const { container, content } = api.app.html.scroller({ prepend: [filterMenu, composer] })
53	55 …
54		- pull(
55		- next(api.feed.pull.public, {reverse: true, limit: 100, live: false}),
56		- Scroller(container, content, api.message.html.render, false, false)
57		- )
	56 …	+ // TODO : build a pull-stream which has seperate state + rendering
	57 …	+ function draw () {
	58 …	+ resetFeed({ container, content })
58	59 …
	60 …	+ pull(
	61 …	+ next(api.feed.pull.public, {old: false, limit: 100}),
	62 …	+ filterDownThrough(),
	63 …	+ Scroller(container, content, api.message.html.render, true, false)
	64 …	+ )
	65 …	+
	66 …	+ pull(
	67 …	+ next(api.feed.pull.public, {reverse: true, limit: 100, live: false}),
	68 …	+ filterUpThrough(),
	69 …	+ Scroller(container, content, api.message.html.render, false, false)
	70 …	+ )
	71 …	+ }
	72 …	+ draw()
	73 …	+
59	74 …	return container
60	75 …	}
61	76 …	}
62	77 …

app/html/scroller.mcssView
		@@ -7,15 +7,14 @@
7	7 …	height: 100%
8	8 …	min-height: 0px
9	9 …
10	10 …	div.wrapper {
11		- flex: 1
	11 …	+ align-self: center
	12 …	+
	13 …	+ flex: 1 1
12	14 …	max-width: 780px
13		- margin-left: auto
14		- margin-right: auto
15	15 …
16	16 …	section.content {
17		-
18	17 …	div {
19	18 …	border-bottom: solid 1px gainsboro
20	19 …	}
21	20 …	}

app/html/filter.jsView
		@@ -1,0 +1,94 @@
	1 …	+const nest = require('depnest')
	2 …	+const { h, Value, when } = require('mutant')
	3 …	+const Abort = require('pull-abortable')
	4 …	+const pull = require('pull-stream')
	5 …	+
	6 …	+exports.gives = nest('app.html.filter')
	7 …	+
	8 …	+exports.needs = nest({
	9 …	+ 'contact.obs.following': 'first',
	10 …	+ 'keys.sync.id': 'first'
	11 …	+})
	12 …	+
	13 …	+
	14 …	+exports.create = function (api) {
	15 …	+ return nest({
	16 …	+ 'app.html.filter': Filter
	17 …	+ })
	18 …	+
	19 …	+ function Filter (draw) {
	20 …	+
	21 …	+ const showFilters = Value(false)
	22 …	+
	23 …	+ const myId = api.keys.sync.id()
	24 …	+ const peopleIFollow = api.contact.obs.following(myId)
	25 …	+ const onlyPeopleIFollow = Value(false)
	26 …	+
	27 …	+ const filterMenu = h('Filter', [
	28 …	+ h('i', {
	29 …	+ classList: when(showFilters, 'fa fa-filter -active', 'fa fa-filter'),
	30 …	+ 'ev-click': () => showFilters.set(!showFilters())
	31 …	+ }),
	32 …	+ when(showFilters,
	33 …	+ h('section', [
	34 …	+ h('a', { 'ev-click': draw }, [
	35 …	+ h('i.fa.fa-refresh') , 'refresh',
	36 …	+ ]),
	37 …	+ h('a', {
	38 …	+ 'ev-click': () => {
	39 …	+ onlyPeopleIFollow.set(!onlyPeopleIFollow())
	40 …	+ draw()
	41 …	+ }
	42 …	+ }, [
	43 …	+ h('i', { classList: when(onlyPeopleIFollow, 'fa fa-check-square-o', 'fa fa-square-o') }),
	44 …	+ 'people i follow'
	45 …	+ ]),
	46 …	+ ])
	47 …	+ )
	48 …	+ ])
	49 …	+
	50 …	+ var downScrollAborter
	51 …	+
	52 …	+ function filterDownThrough () {
	53 …	+ return pull(
	54 …	+ downScrollAborter,
	55 …	+ pull.filter(m => onlyPeopleIFollow()
	56 …	+ ? Array.from(peopleIFollow()).includes(m.value.author)
	57 …	+ : true
	58 …	+ )
	59 …	+ )
	60 …	+ }
	61 …	+
	62 …	+ var upScrollAborter
	63 …	+
	64 …	+ function filterUpThrough () {
	65 …	+ return pull(
	66 …	+ upScrollAborter,
	67 …	+ pull.filter(m => onlyPeopleIFollow()
	68 …	+ ? Array.from(peopleIFollow()).includes(m.value.author)
	69 …	+ : true
	70 …	+ )
	71 …	+ )
	72 …	+ }
	73 …	+
	74 …	+ function resetFeed ({ container, content }) {
	75 …	+ if (typeof upScrollAborter === 'function') {
	76 …	+ upScrollAborter.abort()
	77 …	+ downScrollAborter.abort()
	78 …	+ }
	79 …	+ upScrollAborter = Abort()
	80 …	+ downScrollAborter = Abort()
	81 …	+
	82 …	+ container.scroll(0)
	83 …	+ content.innerHTML = ''
	84 …	+ }
	85 …	+
	86 …	+ return {
	87 …	+ filterMenu,
	88 …	+ filterDownThrough,
	89 …	+ filterUpThrough,
	90 …	+ resetFeed
	91 …	+ }
	92 …	+ }
	93 …	+}
	94 …	+

app/html/filter.mcssView
		@@ -1,0 +1,38 @@
	1 …	+Filter {
	2 …	+ position: absolute
	3 …	+ top: 3rem
	4 …	+ left: 1rem
	5 …	+
	6 …	+ display: flex
	7 …	+ flex-direction: column
	8 …	+
	9 …	+ i.fa-filter {
	10 …	+ font-size: 1.4rem
	11 …	+ color: grey
	12 …	+ cursor: pointer
	13 …	+
	14 …	+ -active {
	15 …	+ color: #000
	16 …	+ }
	17 …	+ }
	18 …	+
	19 …	+ section {
	20 …	+ margin-top: 1rem
	21 …	+ padding: .5rem
	22 …	+ background-color: #fff
	23 …	+ border: 1px gainsboro solid
	24 …	+ z-index: 100
	25 …	+
	26 …	+ display: flex
	27 …	+ flex-direction: column
	28 …	+
	29 …	+ a {
	30 …	+ i {
	31 …	+ width: 1.2rem
	32 …	+ }
	33 …	+
	34 …	+ }
	35 …	+
	36 …	+ }
	37 …	+}
	38 …	+

app/styles/css/font-awesome.jsView
		@@ -1,0 +1,20 @@
	1 …	+const nest = require('depnest')
	2 …	+const fs = require('fs')
	3 …	+const { join } = require('path')
	4 …	+const { assign } = Object
	5 …	+
	6 …	+// const css = fs.readFileSync(join(__dirname, '../../../node_modules/font-awesome/css/font-awesome.min.css'), 'utf8')
	7 …	+const css = fs.readFileSync(join(__dirname, '../../../node_modules/font-awesome/css/font-awesome.css'), 'utf8')
	8 …	+ .replace(/\.{2}/g, '../font-awesome')
	9 …	+
	10 …	+// TODO: for patchlite, may have to convert font urls into url(data:base64: ....) format
	11 …	+
	12 …	+exports.gives = nest('styles.css')
	13 …	+
	14 …	+exports.create = function (api) {
	15 …	+ return nest('styles.css', (sofar = {}) => {
	16 …	+ return assign(sofar, { fontAwesome: css })
	17 …	+ })
	18 …	+}
WritePreview
	19 …	+
	20 …	+

package.jsonView
		@@ -37,8 +37,9 @@
37	37 …	"dataurl-": "^0.1.0",
38	38 …	"depject": "^3.2.0",
39	39 …	"depnest": "^1.0.2",
40	40 …	"es2040": "^1.2.5",
	41 …	+ "font-awesome": "^4.7.0",
41	42 …	"hypercrop": "^1.1.0",
42	43 …	"hyperfile": "^2.0.0",
43	44 …	"hyperlightbox": "^1.0.0",
44	45 …	"hypertabs": "^4.2.0",
		@@ -48,8 +49,9 @@
48	49 …	"mutant": "^3.16.0",
49	50 …	"mutant-pull-reduce": "^1.0.1",
50	51 …	"open-external": "^0.1.1",
51	52 …	"patchcore": "^0.5.0",
	53 …	+ "pull-abortable": "^4.1.1",
52	54 …	"pull-cat": "^1.1.11",
53	55 …	"pull-next": "0.0.2",
54	56 …	"pull-scroll": "^1.0.3",
55	57 …	"pull-stream": "^3.5.0",

Built with git-ssb-web

Dominic / patchbay

Commit 16d4fed8035a33d71d29eb20773bfe59fa2100f0

font awesome icons + basic filter

Files changed