Commit 1e3b2969c5517cbd13a47f312ed441add9c8900f
compact context messages on profile and mentions
Matt McKegg committed on 11/4/2017, 4:35:08 AMParent: 7d1df4ffdd84755dbe885235db2e4f16920ac892
Files changed
| modules/feed/html/rollup.js | ||
|---|---|---|
| @@ -42,8 +42,9 @@ | ||
| 42 | 42 | return nest('feed.html.rollup', function (getStream, { |
| 43 | 43 | prepend, |
| 44 | 44 | rootFilter = returnTrue, |
| 45 | 45 | bumpFilter = returnTrue, |
| 46 | + compactFilter = returnFalse, | |
| 46 | 47 | prefiltered = false, |
| 47 | 48 | displayFilter = returnTrue, |
| 48 | 49 | updateStream, // override the stream used for realtime updates |
| 49 | 50 | waitFor = true |
| @@ -185,11 +186,10 @@ | ||
| 185 | 186 | |
| 186 | 187 | var replies = item.replies.filter(isReply).sort(byAssertedTime) |
| 187 | 188 | var replyElements = replies.filter(displayFilter).slice(-3).map((msg) => { |
| 188 | 189 | var result = api.message.html.render(msg, { |
| 189 | - inContext: true, | |
| 190 | - inSummary: true, | |
| 191 | 190 | previousId, |
| 191 | + compact: compactFilter(msg), | |
| 192 | 192 | priority: highlightItems.has(msg.key) ? 2 : 0 |
| 193 | 193 | }) |
| 194 | 194 | previousId = msg.key |
| 195 | 195 | return [ |
| @@ -199,10 +199,9 @@ | ||
| 199 | 199 | ] |
| 200 | 200 | }) |
| 201 | 201 | |
| 202 | 202 | var renderedMessage = api.message.html.render(item, { |
| 203 | - inContext: true, | |
| 204 | - includeForks: false, | |
| 203 | + compact: compactFilter(item), | |
| 205 | 204 | priority: highlightItems.has(item.key) ? 2 : 0 |
| 206 | 205 | }) |
| 207 | 206 | |
| 208 | 207 | if (!renderedMessage) return h('div') |
| @@ -328,8 +327,12 @@ | ||
| 328 | 327 | function returnTrue () { |
| 329 | 328 | return true |
| 330 | 329 | } |
| 331 | 330 | |
| 331 | +function returnFalse () { | |
| 332 | + return true | |
| 333 | +} | |
| 334 | + | |
| 332 | 335 | function byAssertedTime (a, b) { |
| 333 | 336 | return a.value.timestamp - b.value.timestamp |
| 334 | 337 | } |
| 335 | 338 | |
| modules/page/html/render/mentions.js | ||
|---|---|---|
| @@ -12,8 +12,9 @@ | ||
| 12 | 12 | return nest('page.html.render', function mentions (path) { |
| 13 | 13 | if (path !== '/mentions') return |
| 14 | 14 | var id = api.keys.sync.id() |
| 15 | 15 | return api.feed.html.rollup(api.feed.pull.mentions(id), { |
| 16 | + compactFilter: (msg) => !mentionFilter(msg), // compact context messages | |
| 16 | 17 | bumpFilter: mentionFilter, |
| 17 | 18 | displayFilter: mentionFilter |
| 18 | 19 | }) |
| 19 | 20 | |
| modules/page/html/render/profile.js | ||
|---|---|---|
| @@ -197,8 +197,9 @@ | ||
| 197 | 197 | ]) |
| 198 | 198 | |
| 199 | 199 | var feedView = api.feed.html.rollup(api.feed.pull.profile(id), { |
| 200 | 200 | prepend, |
| 201 | + compactFilter: (msg) => msg.value.author !== id, // show root context messages smaller | |
| 201 | 202 | displayFilter: (msg) => msg.value.author === id, |
| 202 | 203 | rootFilter: (msg) => !contact.youBlock() && !api.message.sync.root(msg), |
| 203 | 204 | bumpFilter: (msg) => msg.value.author === id |
| 204 | 205 | }) |
| plugs/message/html/layout/default.js | ||
|---|---|---|
| @@ -24,9 +24,9 @@ | ||
| 24 | 24 | exports.create = function (api) { |
| 25 | 25 | const i18n = api.intl.sync.i18n |
| 26 | 26 | return nest('message.html.layout', layout) |
| 27 | 27 | |
| 28 | - function layout (msg, {layout, previousId, priority, content, includeReferences = false, includeForks = true}) { | |
| 28 | + function layout (msg, {layout, previousId, priority, content, includeReferences = false, includeForks = true, compact = false}) { | |
| 29 | 29 | if (!(layout === undefined || layout === 'default')) return |
| 30 | 30 | |
| 31 | 31 | var classList = ['Message'] |
| 32 | 32 | var replyInfo = null |
| @@ -45,8 +45,12 @@ | ||
| 45 | 45 | } else if (msg.value.content.project) { |
| 46 | 46 | replyInfo = h('span', [i18n('on '), api.message.html.link(msg.value.content.project)]) |
| 47 | 47 | } |
| 48 | 48 | |
| 49 | + if (compact) { | |
| 50 | + classList.push('-compact') | |
| 51 | + } | |
| 52 | + | |
| 49 | 53 | if (priority === 2) { |
| 50 | 54 | classList.push('-new') |
| 51 | 55 | } |
| 52 | 56 | |
| @@ -65,9 +69,9 @@ | ||
| 65 | 69 | classList: when(expanded, null, '-truncated') |
| 66 | 70 | }, [ |
| 67 | 71 | h('a', { |
| 68 | 72 | href: '#', |
| 69 | - 'ev-click': toggle(expanded) | |
| 73 | + 'ev-click': toggleAndTrack(expanded) | |
| 70 | 74 | }, when(expanded, i18n('See less'), i18n('See more'))) |
| 71 | 75 | ])), |
| 72 | 76 | h('div.actions', [ |
| 73 | 77 | api.message.html.action(msg) |
| @@ -116,14 +120,23 @@ | ||
| 116 | 120 | return array |
| 117 | 121 | } |
| 118 | 122 | } |
| 119 | 123 | |
| 120 | -function toggle (param) { | |
| 124 | +function toggleAndTrack (param) { | |
| 121 | 125 | return { |
| 122 | 126 | handleEvent: handleToggle, |
| 123 | 127 | param |
| 124 | 128 | } |
| 125 | 129 | } |
| 126 | 130 | |
| 127 | 131 | function handleToggle (ev) { |
| 128 | 132 | this.param.set(!this.param()) |
| 133 | + if (!this.param()) { | |
| 134 | + ev.target.scrollIntoViewIfNeeded() | |
| 135 | + | |
| 136 | + // HACK: due to a browser bug, sometimes the body gets affected!? | |
| 137 | + // Why not just hack it!!! | |
| 138 | + if (document.body.scrollTop > 0) { | |
| 139 | + document.body.scrollTop = 0 | |
| 140 | + } | |
| 141 | + } | |
| 129 | 142 | } |
| styles/dark/message.mcss | ||
|---|---|---|
| @@ -61,8 +61,14 @@ | ||
| 61 | 61 | color: #777 |
| 62 | 62 | } |
| 63 | 63 | } |
| 64 | 64 | |
| 65 | + -compact { | |
| 66 | + section { | |
| 67 | + max-height: 300px | |
| 68 | + } | |
| 69 | + } | |
| 70 | + | |
| 65 | 71 | -reply { |
| 66 | 72 | header { |
| 67 | 73 | font-size: 100% |
| 68 | 74 | div.meta { |
| styles/light/message.mcss | ||
|---|---|---|
| @@ -46,8 +46,14 @@ | ||
| 46 | 46 | } |
| 47 | 47 | } |
| 48 | 48 | } |
| 49 | 49 | |
| 50 | + -compact { | |
| 51 | + section { | |
| 52 | + max-height: 300px | |
| 53 | + } | |
| 54 | + } | |
| 55 | + | |
| 50 | 56 | -reply { |
| 51 | 57 | header { |
| 52 | 58 | font-size: 100% |
| 53 | 59 | div.meta { |
| @@ -205,9 +211,9 @@ | ||
| 205 | 211 | margin: 0 |
| 206 | 212 | padding: 0 20px |
| 207 | 213 | max-height: 1500vh |
| 208 | 214 | overflow: hidden |
| 209 | - | |
| 215 | + | |
| 210 | 216 | (img) { |
| 211 | 217 | max-width: 100% |
| 212 | 218 | } |
| 213 | 219 | |
Built with git-ssb-web