Commit 6c2d62189f2bd14a50a90b56b6e4b20393233a56
integrate unread state
Dominic Tarr committed on 8/17/2017, 5:11:57 AMParent: c98c520dc293d99e6462eda47eb8183248adcf78
Files changed
| app/html/thread-card.js | changed |
| app/html/thread-card.mcss | changed |
| app/html/thread.js | changed |
| app/page/home.js | changed |
| app/html/thread-card.js | ||
|---|---|---|
| @@ -10,9 +10,10 @@ | ||
| 10 | 10 | 'history.sync.push': 'first', |
| 11 | 11 | 'about.obs.name': 'first', |
| 12 | 12 | 'about.html.image': 'first', |
| 13 | 13 | 'message.html.markdown': 'first', |
| 14 | - 'translations.sync.strings': 'first' | |
| 14 | + 'translations.sync.strings': 'first', | |
| 15 | + 'unread.sync.isUnread': 'first' | |
| 15 | 16 | }) |
| 16 | 17 | |
| 17 | 18 | function firstLine (text) { |
| 18 | 19 | if(text.length < 80 && !~text.indexOf('\n')) return text |
| @@ -88,9 +89,11 @@ | ||
| 88 | 89 | const onClick = opts.onClick || function () { api.history.sync.push(thread) } |
| 89 | 90 | const id = `${thread.key}-${JSON.stringify(opts)}` |
| 90 | 91 | // id is only here to help morphdom morph accurately |
| 91 | 92 | |
| 92 | - return h('ThreadCard', { 'ev-click': onClick, id }, [ | |
| 93 | + var unread = thread.unread ? ' -unread': '' | |
| 94 | + | |
| 95 | + return h('ThreadCard' + unread, { 'ev-click': onClick, id}, [ | |
| 93 | 96 | h('div.context', threadIcon(thread)), |
| 94 | 97 | h('div.content', [ |
| 95 | 98 | subjectEl, |
| 96 | 99 | replySample ? h('div.reply', [ |
| app/html/thread-card.mcss | ||
|---|---|---|
| @@ -6,9 +6,9 @@ | ||
| 6 | 6 | |
| 7 | 7 | div.context { |
| 8 | 8 | display: flex |
| 9 | 9 | margin-right: 1rem |
| 10 | - | |
| 10 | + font-weight: inherit | |
| 11 | 11 | img { |
| 12 | 12 | $smallAvatar |
| 13 | 13 | margin-right: .5rem |
| 14 | 14 | } |
| @@ -38,5 +38,14 @@ | ||
| 38 | 38 | |
| 39 | 39 | $smallMarkdown |
| 40 | 40 | } |
| 41 | 41 | } |
| 42 | + -unread { | |
| 43 | + //why does this only work on the channel name? | |
| 44 | + font-weight: bold | |
| 45 | + } | |
| 42 | 46 | } |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| app/html/thread.js | ||
|---|---|---|
| @@ -7,9 +7,11 @@ | ||
| 7 | 7 | exports.needs = nest({ |
| 8 | 8 | 'about.html.image': 'first', |
| 9 | 9 | 'feed.obs.thread': 'first', |
| 10 | 10 | 'keys.sync.id': 'first', |
| 11 | - 'message.html.markdown': 'first' | |
| 11 | + 'message.html.markdown': 'first', | |
| 12 | + 'unread.sync.markRead': 'first', | |
| 13 | + 'unread.sync.isUnread': 'first' | |
| 12 | 14 | }) |
| 13 | 15 | |
| 14 | 16 | exports.create = (api) => { |
| 15 | 17 | return nest('app.html.thread', thread) |
| @@ -35,8 +37,11 @@ | ||
| 35 | 37 | ]) |
| 36 | 38 | : h('div.other-chunk', [ |
| 37 | 39 | h('div.avatar', when(author, api.about.html.image(author()))), |
| 38 | 40 | h('div.msgs', map(chunk, msg => { |
| 41 | + console.log('markRead', msg.key) | |
| 42 | +// if(root.replies) | |
| 43 | +// thread.replies.forEach(api.unread.sync.markRead) | |
| 39 | 44 | return h('div.msg-row', [ |
| 40 | 45 | message(msg), |
| 41 | 46 | h('div.spacer') |
| 42 | 47 | ]) |
| @@ -46,10 +51,11 @@ | ||
| 46 | 51 | ) |
| 47 | 52 | |
| 48 | 53 | function message (msg) { |
| 49 | 54 | const raw = get(msg, 'value.content.text') |
| 50 | - | |
| 51 | - return h('div.msg', api.message.html.markdown(raw)) | |
| 55 | + var unread = api.unread.sync.isUnread(msg) ? ' -unread' : ' -read' | |
| 56 | + api.unread.sync.markRead(msg) | |
| 57 | + return h('div.msg'+unread, api.message.html.markdown(raw)) | |
| 52 | 58 | } |
| 53 | 59 | |
| 54 | 60 | return threadView |
| 55 | 61 | } |
| @@ -82,4 +88,12 @@ | ||
| 82 | 88 | function isSameAuthor (msgA, msgB) { |
| 83 | 89 | // TODO (mix) use lodash/get |
| 84 | 90 | return msgA.value.author === msgB.value.author |
| 85 | 91 | } |
| 92 | + | |
| 93 | + | |
| 94 | + | |
| 95 | + | |
| 96 | + | |
| 97 | + | |
| 98 | + | |
| 99 | + | |
| app/page/home.js | ||
|---|---|---|
| @@ -11,9 +11,10 @@ | ||
| 11 | 11 | 'history.sync.push': 'first', |
| 12 | 12 | 'keys.sync.id': 'first', |
| 13 | 13 | 'translations.sync.strings': 'first', |
| 14 | 14 | 'state.obs.threads': 'first', |
| 15 | - 'app.html.threadCard': 'first' | |
| 15 | + 'app.html.threadCard': 'first', | |
| 16 | + 'unread.sync.isUnread': 'first' | |
| 16 | 17 | }) |
| 17 | 18 | |
| 18 | 19 | function toRecpGroup(msg) { |
| 19 | 20 | //cannocialize |
| @@ -72,19 +73,8 @@ | ||
| 72 | 73 | var threadsHtmlObs = More( |
| 73 | 74 | threadsObsDebounced, |
| 74 | 75 | function render (threads) { |
| 75 | 76 | |
| 76 | - var groupedThreads = | |
| 77 | - roots(threads.private) | |
| 78 | - .concat(roots(threads.channels)) | |
| 79 | - .concat(roots(threads.groups)) | |
| 80 | - .filter(function (thread) { | |
| 81 | - return thread.value.content.recps || thread.value.content.channel | |
| 82 | - }) | |
| 83 | - .sort(function (a, b) { | |
| 84 | - return latestUpdate(b) - latestUpdate(a) | |
| 85 | - }) | |
| 86 | - | |
| 87 | 77 | function latestUpdate(thread) { |
| 88 | 78 | var m = thread.timestamp |
| 89 | 79 | if(!thread.replies) return m |
| 90 | 80 | |
| @@ -100,9 +90,34 @@ | ||
| 100 | 90 | return e && e.value |
| 101 | 91 | }) |
| 102 | 92 | } |
| 103 | 93 | |
| 94 | + var groupedThreads = | |
| 95 | + roots(threads.private) | |
| 96 | + .concat(roots(threads.channels)) | |
| 97 | + .concat(roots(threads.groups)) | |
| 98 | + .filter(function (thread) { | |
| 99 | + return thread.value.content.recps || thread.value.content.channel | |
| 100 | + }) | |
| 101 | + .map(function (thread) { | |
| 102 | + var unread = 0 | |
| 103 | + if(api.unread.sync.isUnread(thread)) | |
| 104 | + unread ++ | |
| 105 | + ;(thread.replies || []).forEach(function (msg) { | |
| 106 | + if(api.unread.sync.isUnread(msg)) unread ++ | |
| 107 | + }) | |
| 108 | + thread.unread = unread | |
| 109 | +// console.log('unread', thread.unread, +!!thread.unread) | |
| 110 | + return thread | |
| 111 | + }) | |
| 112 | + .sort(function (a, b) { | |
| 113 | + return ((!!b.unread) - (!!a.unread)) || (latestUpdate(b) - latestUpdate(a)) | |
| 114 | + }) | |
| 104 | 115 | |
| 116 | +// console.log(groupedThreads.map(function (thread) { | |
| 117 | +// return {ch: thread.value.content.channel, unread: thread.unread, thread: thread} | |
| 118 | +// })) | |
| 119 | +// | |
| 105 | 120 | morphdom(container, |
| 106 | 121 | // LEGACY: some of these containers could be removed |
| 107 | 122 | // but they are here to be compatible with the old MCSS. |
| 108 | 123 | h('div.container', [ |
| @@ -120,10 +135,9 @@ | ||
| 120 | 135 | ) |
| 121 | 136 | ]) |
| 122 | 137 | ]) |
| 123 | 138 | ) |
| 124 | - | |
| 125 | - return container | |
| 139 | + return container | |
| 126 | 140 | } |
| 127 | 141 | ) |
| 128 | 142 | return h('Page -home', {title: strings.home}, [ |
| 129 | 143 | threadsHtmlObs, |
| @@ -133,4 +147,14 @@ | ||
| 133 | 147 | } |
| 134 | 148 | |
| 135 | 149 | |
| 136 | 150 | |
| 151 | + | |
| 152 | + | |
| 153 | + | |
| 154 | + | |
| 155 | + | |
| 156 | + | |
| 157 | + | |
| 158 | + | |
| 159 | + | |
| 160 | + | |
Built with git-ssb-web