git ssb

16+

Dominic / patchbay



Commit 16d4fed8035a33d71d29eb20773bfe59fa2100f0

Browse Files

font awesome icons + basic filter

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

Files changed

app/html/page/public.jschanged
app/html/scroller.mcsschanged
app/html/filter.jsadded
app/html/filter.mcssadded
app/styles/css/font-awesome.jsadded
package.jsonchanged
app/html/page/public.jsView
@@ -1,6 +1,6 @@
11 … const nest = require('depnest')
2-const { h } = require('mutant')
2 …+const { h, Value, when } = require('mutant')
33 … const pull = require('pull-stream')
44 … const Scroller = require('pull-scroll')
55 … const next = require('../../../junk/next-stepper')
66 …
@@ -11,14 +11,17 @@
1111 … }
1212 … })
1313 …
1414 … exports.needs = nest({
15 …+ 'app.html': {
16 …+ filter: 'first',
17 …+ scroller: 'first'
18 …+ },
1519 … 'feed.pull.public': 'first',
1620 … 'message.html': {
1721 … compose: 'first',
1822 … render: 'first'
19- },
20- 'app.html.scroller': 'first'
23 …+ }
2124 … })
2225 …
2326 … exports.create = function (api) {
2427 … const route = '/public'
@@ -39,24 +42,36 @@
3942 …
4043 … function publicPage (path) {
4144 … if (path !== route) return
4245 …
46 …+
47 …+ const { filterMenu, filterDownThrough, filterUpThrough, resetFeed } = api.app.html.filter(draw)
48 …+
4349 … const composer = api.message.html.compose({
4450 … meta: { type: 'post' },
4551 … placeholder: 'Write a public message'
4652 … })
47- const { container, content } = api.app.html.scroller({ prepend: composer })
4853 …
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] })
5355 …
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 })
5859 …
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 …+
5974 … return container
6075 … }
6176 … }
6277 …
app/html/scroller.mcssView
@@ -7,15 +7,14 @@
77 … height: 100%
88 … min-height: 0px
99 …
1010 … div.wrapper {
11- flex: 1
11 …+ align-self: center
12 …+
13 …+ flex: 1 1
1214 … max-width: 780px
13- margin-left: auto
14- margin-right: auto
1515 …
1616 … section.content {
17-
1817 … div {
1918 … border-bottom: solid 1px gainsboro
2019 … }
2120 … }
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 …+}
19 …+
20 …+
package.jsonView
@@ -37,8 +37,9 @@
3737 … "dataurl-": "^0.1.0",
3838 … "depject": "^3.2.0",
3939 … "depnest": "^1.0.2",
4040 … "es2040": "^1.2.5",
41 …+ "font-awesome": "^4.7.0",
4142 … "hypercrop": "^1.1.0",
4243 … "hyperfile": "^2.0.0",
4344 … "hyperlightbox": "^1.0.0",
4445 … "hypertabs": "^4.2.0",
@@ -48,8 +49,9 @@
4849 … "mutant": "^3.16.0",
4950 … "mutant-pull-reduce": "^1.0.1",
5051 … "open-external": "^0.1.1",
5152 … "patchcore": "^0.5.0",
53 …+ "pull-abortable": "^4.1.1",
5254 … "pull-cat": "^1.1.11",
5355 … "pull-next": "0.0.2",
5456 … "pull-scroll": "^1.0.3",
5557 … "pull-stream": "^3.5.0",

Built with git-ssb-web