Commit 652e17c6ca36341c8b5f36c66780d9bae9bfc721
Search page modular styling
mix irving committed on 2/4/2017, 5:14:01 AMParent: e50286f70acfd2b61a42f560edfdfc1083b1e0fc
Files changed
modules_basic/scroller.mcss | changed |
modules_extra/search.js | changed |
modules_extra/search.mcss | added |
modules_basic/scroller.mcss | ||
---|---|---|
@@ -8,16 +8,16 @@ | ||
8 | 8 … | min-height: 0px |
9 | 9 … | |
10 | 10 … | div.wrapper { |
11 | 11 … | flex: 1 |
12 | - max-width: 600px | |
12 … | + width: 600px | |
13 | 13 … | margin-left: auto |
14 | 14 … | margin-right: auto |
15 | 15 … | |
16 | 16 … | section.content { |
17 | 17 … | |
18 | 18 … | div { |
19 | - border-top: solid 1px gainsboro | |
19 … | + border-bottom: solid 1px gainsboro | |
20 | 20 … | } |
21 | 21 … | } |
22 | 22 … | } |
23 | 23 … | } |
modules_extra/search.js | ||
---|---|---|
@@ -1,17 +1,22 @@ | ||
1 | -var h = require('hyperscript') | |
2 | -var u = require('../util') | |
3 | -var pull = require('pull-stream') | |
4 | -var Scroller = require('pull-scroll') | |
5 | -var TextNodeSearcher = require('text-node-searcher') | |
1 … | +const h = require('../h') | |
2 … | +const fs = require('fs') | |
3 … | +const { Value } = require('@mmckegg/mutant') | |
4 … | +const u = require('../util') | |
5 … | +const pull = require('pull-stream') | |
6 … | +const Scroller = require('pull-scroll') | |
7 … | +const TextNodeSearcher = require('text-node-searcher') | |
6 | 8 … | |
7 | 9 … | exports.needs = { |
8 | 10 … | build_scroller: 'first', |
9 | 11 … | message_render: 'first', |
10 | 12 … | sbot_log: 'first' |
11 | 13 … | } |
12 | 14 … | |
13 | -exports.gives = 'screen_view' | |
15 … | +exports.gives = { | |
16 … | + screen_view: true, | |
17 … | + mcss: true | |
18 … | +} | |
14 | 19 … | |
15 | 20 … | var whitespace = /\s+/ |
16 | 21 … | |
17 | 22 … | function andSearch(terms, inputs) { |
@@ -52,46 +57,57 @@ | ||
52 | 57 … | } |
53 | 58 … | |
54 | 59 … | exports.create = function (api) { |
55 | 60 … | |
56 | - return function (path) { | |
57 | - if(path[0] === '?') { | |
58 | - var query = path.substr(1).trim().split(whitespace) | |
59 | - var _matches = searchFilter(query) | |
61 … | + return { | |
62 … | + screen_view, | |
63 … | + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8') | |
64 … | + } | |
60 | 65 … | |
61 | - var total = 0, matches = 0 | |
66 … | + function screen_view (path) { | |
67 … | + if (path[0] !== '?') return | |
62 | 68 … | |
63 | - var header = h('div.search_header', '') | |
64 | - var { container, content } = api.build_scroller({ prepend: header}) | |
65 | - container.id = path // helps tabs find this tab | |
69 … | + var query = path.substr(1).trim().split(whitespace) | |
70 … | + var _matches = searchFilter(query) | |
66 | 71 … | |
67 | - function matchesQuery (data) { | |
68 | - total++ | |
69 | - var m = _matches(data) | |
70 | - if(m) matches++ | |
71 | - header.textContent = 'searched:'+total+', found:'+matches | |
72 | - return m | |
73 | - } | |
72 … | + const searched = Value(0) | |
73 … | + const matches = Value(0) | |
74 … | + const searchHeader = h('Search', [ | |
75 … | + h('header', h('h1', query)), | |
76 … | + h('section.details', [ | |
77 … | + h('div.searched', ['Searched: ', searched]), | |
78 … | + h('div.matches', [matches, ' matches']) | |
79 … | + ]) | |
80 … | + ]) | |
81 … | + var { container, content } = api.build_scroller({ prepend: searchHeader }) | |
82 … | + container.id = path // helps tabs find this tab | |
74 | 83 … | |
75 | - function renderMsg(msg) { | |
76 | - var el = api.message_render(msg) | |
77 | - highlight(el, createOrRegExp(query)) | |
78 | - return el | |
79 | - } | |
84 … | + function matchesQuery (data) { | |
85 … | + searched.set(searched() + 1) | |
86 … | + var m = _matches(data) | |
87 … | + if(m) matches.set(matches() +1 ) | |
88 … | + | |
89 … | + return m | |
90 … | + } | |
80 | 91 … | |
81 | - pull( | |
82 | - api.sbot_log({old: false}), | |
83 | - pull.filter(matchesQuery), | |
84 | - Scroller(container, content, renderMsg, true, false) | |
85 | - ) | |
92 … | + function renderMsg(msg) { | |
93 … | + var el = api.message_render(msg) | |
94 … | + highlight(el, createOrRegExp(query)) | |
95 … | + return el | |
96 … | + } | |
86 | 97 … | |
87 | - pull( | |
88 | - u.next(api.sbot_log, {reverse: true, limit: 500, live: false}), | |
89 | - pull.filter(matchesQuery), | |
90 | - Scroller(container, content, renderMsg, false, false) | |
91 | - ) | |
98 … | + pull( | |
99 … | + api.sbot_log({old: false}), | |
100 … | + pull.filter(matchesQuery), | |
101 … | + Scroller(container, content, renderMsg, true, false) | |
102 … | + ) | |
92 | 103 … | |
93 | - return container | |
94 | - } | |
104 … | + pull( | |
105 … | + u.next(api.sbot_log, {reverse: true, limit: 500, live: false}), | |
106 … | + pull.filter(matchesQuery), | |
107 … | + Scroller(container, content, renderMsg, false, false) | |
108 … | + ) | |
109 … | + | |
110 … | + return container | |
95 | 111 … | } |
112 … | +} | |
96 | 113 … | |
97 | -} |
modules_extra/search.mcss | ||
---|---|---|
@@ -1,0 +1,22 @@ | ||
1 … | +Search { | |
2 … | + padding: .5rem | |
3 … | + border-bottom: solid 1px gainsboro | |
4 … | + | |
5 … | + header { | |
6 … | + h1 { | |
7 … | + } | |
8 … | + } | |
9 … | + | |
10 … | + section.details { | |
11 … | + display: flex | |
12 … | + justify-content: space-between | |
13 … | + | |
14 … | + font-family: monospace | |
15 … | + | |
16 … | + div.searched {} | |
17 … | + div.matched {} | |
18 … | + } | |
19 … | + | |
20 … | +} | |
21 … | + | |
22 … | + |
Built with git-ssb-web