Commit 31dca712149ea746e5ee65adb698bb4ce4a82c4e
factor out thread-card.mcss , add private messages to profile
mix irving committed on 8/16/2017, 5:50:28 AMParent: 99dc6aa464a4c1cc228a6af744517def76da134f
Files changed
app/html/thread-card.js | changed |
app/html/thread-card.mcss | added |
app/page/home.js | changed |
app/page/home.mcss | changed |
app/page/userShow.js | changed |
app/html/thread-card.js | ||
---|---|---|
@@ -88,9 +88,9 @@ | ||
88 | 88 | const onClick = opts.onClick || function () { api.history.sync.push(thread) } |
89 | 89 | const id = `${thread.key}-${JSON.stringify(opts)}` |
90 | 90 | // id is only here to help morphdom morph accurately |
91 | 91 | |
92 | - return h('div.thread', { 'ev-click': onClick, id }, [ | |
92 | + return h('ThreadCard', { 'ev-click': onClick, id }, [ | |
93 | 93 | h('div.context', threadIcon(thread)), |
94 | 94 | h('div.content', [ |
95 | 95 | subjectEl, |
96 | 96 | replySample ? h('div.reply', [ |
app/html/thread-card.mcss | ||
---|---|---|
@@ -1,0 +1,42 @@ | ||
1 | +ThreadCard { | |
2 | + display: flex | |
3 | + align-items: center | |
4 | + | |
5 | + margin-bottom: .5rem | |
6 | + | |
7 | + div.context { | |
8 | + display: flex | |
9 | + margin-right: 1rem | |
10 | + | |
11 | + img { | |
12 | + $smallAvatar | |
13 | + margin-right: .5rem | |
14 | + } | |
15 | + } | |
16 | + | |
17 | + div.content { | |
18 | + flex-grow: 1 | |
19 | + background: #fff | |
20 | + padding: 1rem | |
21 | + border: 1px solid #ddd | |
22 | + border-radius: 2px | |
23 | + | |
24 | + div.subject { | |
25 | + font-size: 1.2rem | |
26 | + margin-bottom: .3rem | |
27 | + | |
28 | + $largeMarkdown | |
29 | + } | |
30 | + div.reply { | |
31 | + display: flex | |
32 | + color: #444 | |
33 | + | |
34 | + div.replySymbol { | |
35 | + margin-left: .7rem | |
36 | + margin-right: .3rem | |
37 | + } | |
38 | + | |
39 | + $smallMarkdown | |
40 | + } | |
41 | + } | |
42 | +} |
app/page/home.js | ||
---|---|---|
@@ -30,9 +30,8 @@ | ||
30 | 30 | return nest('app.page.home', function (location) { |
31 | 31 | // location here can expected to be: { page: 'home' } |
32 | 32 | var strings = api.translations.sync.strings() |
33 | 33 | |
34 | - var container = h('div.container', []) | |
35 | 34 | |
36 | 35 | // function filterForThread (thread) { |
37 | 36 | // if(thread.value.private) |
38 | 37 | // return {private: toRecpGroup(thread)} |
@@ -69,8 +68,9 @@ | ||
69 | 68 | morePlease = true |
70 | 69 | requestIdleCallback(threadsObs.more) |
71 | 70 | } |
72 | 71 | |
72 | + var container = h('div.container', []) | |
73 | 73 | var threadsHtmlObs = More( |
74 | 74 | threadsObsDebounced, |
75 | 75 | function render (threads) { |
76 | 76 | |
@@ -106,21 +106,19 @@ | ||
106 | 106 | h('div.container', [ |
107 | 107 | //private section |
108 | 108 | h('section.updates -directMessage', [ |
109 | 109 | h('div.threads', |
110 | - groupedThreads | |
111 | - .map(function (thread) { | |
110 | + groupedThreads.map(thread => { | |
111 | + const channel = thread.value.content.channel | |
112 | + const onClick = channel | |
113 | + ? (ev) => api.history.sync.push({ channel }) | |
114 | + : null // threadCard will install default onClick | |
112 | 115 | |
113 | - const channel = thread.value.content.channel | |
114 | - const onClick = channel | |
115 | - ? (ev) => api.history.sync.push({ channel }) | |
116 | - : null // threadCard will install default onClick | |
117 | - | |
118 | - return api.app.html.threadCard(thread, { onClick }) | |
116 | + return api.app.html.threadCard(thread, { onClick }) | |
119 | 117 | }) |
120 | 118 | ) |
121 | - ]), | |
122 | - ]) | |
119 | + ]) | |
120 | + ]) | |
123 | 121 | ) |
124 | 122 | |
125 | 123 | return container |
126 | 124 | } |
app/page/home.mcss | ||
---|---|---|
@@ -9,9 +9,9 @@ | ||
9 | 9 | -directMessage { |
10 | 10 | $homePageSection |
11 | 11 | |
12 | 12 | div.threads { |
13 | - div.thread { | |
13 | + div.ThreadCard { | |
14 | 14 | div.content { |
15 | 15 | div.subject { |
16 | 16 | display: flex |
17 | 17 | |
@@ -33,9 +33,9 @@ | ||
33 | 33 | -channel { |
34 | 34 | $homePageSection |
35 | 35 | |
36 | 36 | div.threads { |
37 | - div.thread { | |
37 | + div.ThreadCard { | |
38 | 38 | div.context { |
39 | 39 | background: #fff |
40 | 40 | min-width: 8rem |
41 | 41 | padding: .1rem .3rem |
@@ -73,48 +73,7 @@ | ||
73 | 73 | margin-bottom: .4rem |
74 | 74 | } |
75 | 75 | |
76 | 76 | div.threads { |
77 | - div.thread { | |
78 | - display: flex | |
79 | - align-items: center | |
80 | - | |
81 | - margin-bottom: .5rem | |
82 | - | |
83 | - div.context { | |
84 | - display: flex | |
85 | - margin-right: 1rem | |
86 | - | |
87 | - img { | |
88 | - $smallAvatar | |
89 | - margin-right: .5rem | |
90 | - } | |
91 | - } | |
92 | - | |
93 | - div.content { | |
94 | - flex-grow: 1 | |
95 | - background: #fff | |
96 | - padding: 1rem | |
97 | - border: 1px solid #ddd | |
98 | - border-radius: 2px | |
99 | - | |
100 | - div.subject { | |
101 | - font-size: 1.2rem | |
102 | - margin-bottom: .3rem | |
103 | - | |
104 | - $largeMarkdown | |
105 | - } | |
106 | - div.reply { | |
107 | - display: flex | |
108 | - color: #444 | |
109 | - | |
110 | - div.replySymbol { | |
111 | - margin-left: .7rem | |
112 | - margin-right: .3rem | |
113 | - } | |
114 | - | |
115 | - $smallMarkdown | |
116 | - } | |
117 | - } | |
118 | - } | |
77 | + div.ThreadCard {} | |
119 | 78 | } |
120 | 79 | } |
app/page/userShow.js | ||
---|---|---|
@@ -1,18 +1,24 @@ | ||
1 | 1 | const nest = require('depnest') |
2 | -const { h, computed, when } = require('mutant') | |
2 | +const { h, Array: MutantArray, computed, when, map } = require('mutant') | |
3 | +const pull = require('pull-stream') | |
4 | +const get = require('lodash/get') | |
3 | 5 | |
4 | 6 | exports.gives = nest('app.page.userShow') |
5 | 7 | |
6 | 8 | exports.needs = nest({ |
7 | 9 | 'app.html.link': 'first', |
8 | 10 | 'app.html.nav': 'first', |
11 | + 'app.html.threadCard': 'first', | |
9 | 12 | 'about.html.image': 'first', |
10 | 13 | 'about.obs.name': 'first', |
11 | 14 | 'contact.async.follow': 'first', |
12 | 15 | 'contact.async.unfollow': 'first', |
13 | 16 | 'contact.obs.followers': 'first', |
17 | + 'feed.pull.private': 'first', | |
18 | + 'feed.pull.rollup': 'first', | |
14 | 19 | 'keys.sync.id': 'first', |
20 | + 'state.obs.threads': 'first', | |
15 | 21 | 'translations.sync.strings': 'first', |
16 | 22 | }) |
17 | 23 | |
18 | 24 | exports.create = (api) => { |
@@ -47,8 +53,27 @@ | ||
47 | 53 | ), |
48 | 54 | h('Button', { disabled: 'disabled' }, strings.loading ) |
49 | 55 | ) |
50 | 56 | |
57 | + | |
58 | + const threads = MutantArray() | |
59 | + pull( | |
60 | + // next(api.feed.pull.private, {reverse: true, limit: 100, live: false}, ['value', 'timestamp']), | |
61 | + // api.feed.pull.private({reverse: true, limit: 100, live: false}), | |
62 | + api.feed.pull.private({reverse: true, live: false}), | |
63 | + pull.filter(msg => { | |
64 | + const recps = get(msg, 'value.content.recps') | |
65 | + if (!recps) return | |
66 | + | |
67 | + return recps | |
68 | + .map(r => typeof r === 'object' ? r.link : r) | |
69 | + .includes(feed) | |
70 | + }), | |
71 | + api.feed.pull.rollup(), | |
72 | + pull.drain(threads.push) | |
73 | + // Scroller(container, content, render, false, false) | |
74 | + ) | |
75 | + | |
51 | 76 | const Link = api.app.html.link |
52 | 77 | |
53 | 78 | return h('Page -userShow', [ |
54 | 79 | api.app.html.nav(), |
@@ -60,13 +85,13 @@ | ||
60 | 85 | h('div.state', ourRelationship), |
61 | 86 | followButton |
62 | 87 | ]) : '', |
63 | 88 | h('div', '...friends in common'), |
64 | - h('div', '...groups dominic is in'), | |
89 | + h('div', '...groups this person is in'), | |
65 | 90 | feed !== myId |
66 | 91 | ? Link({ page: 'threadNew', feed }, h('Button -primary', strings.userShow.action.directMessage)) |
67 | 92 | : '', |
68 | - h('div', 'conversations you\'ve had with dominic'), | |
93 | + h('div.threads', map(threads, api.app.html.threadCard)) | |
69 | 94 | ]) |
70 | 95 | ]) |
71 | 96 | } |
72 | 97 | } |
Built with git-ssb-web