git ssb

2+

mixmix / ticktack



Commit 0f137965c8946bbf7e1023f2f6d9e3168fcf88d9

multi-pm sidebar: notifications + styling

mix irving committed on 2/12/2018, 1:02:49 AM
Parent: 28b7b3ffa2424be2e5cc492462af04c6e83aec64

Files changed

app/html/sideNav/sideNav.mcsschanged
app/html/sideNav/sideNavDiscovery.jschanged
app/page/userShow.jschanged
app/page/userShow.mcsschanged
message/html/subject.jschanged
app/html/sideNav/sideNav.mcssView
@@ -56,9 +56,9 @@
5656 position: relative
5757 width: 1.2rem
5858 height: 1.2rem
5959 border-radius: 1rem
60- top: -.2rem
60+ /* top: -.2rem */
6161 left: -.2rem
6262
6363 background-color: red
6464 color: #fff
@@ -94,10 +94,16 @@
9494 }
9595
9696 img {}
9797 div.many-images {
98+ /* this width refernces avatarSmall */
99+ width: 2.8rem
100+ height: 2.8rem
101+
98102 display: flex
99103 flex-wrap: wrap
104+ justify-content: center
105+ align-items: center
100106
101107 img {
102108 }
103109 }
app/html/sideNav/sideNavDiscovery.jsView
@@ -71,10 +71,13 @@
7171 cache.delete(msg.key)
7272 }
7373
7474 function updateUnreadMsgsCache (msg) {
75- updateCache(getUnreadMsgsCache(msg.value.author), msg)
76- updateCache(getUnreadMsgsCache(msg.value.content.root || msg.key), msg)
75+ const participantsKey = getParticipants(msg).key
76+ updateCache(getUnreadMsgsCache(participantsKey), msg)
77+
78+ const rootKey = get(msg, 'value.content.root', msg.key)
79+ updateCache(getUnreadMsgsCache(rootKey), msg)
7780 }
7881
7982 pull(
8083 next(api.feed.pull.private, {reverse: true, limit: 1000, live: false, property: ['value', 'timestamp']}),
@@ -161,46 +164,42 @@
161164 filter: privateMsgFilter,
162165 store: recentMsgCache,
163166 updateTop: updateRecentMsgCache,
164167 updateBottom: updateRecentMsgCache,
165- render: (msgObs) => {
166- const msg = resolve(msgObs)
167- const participants = getParticipants(msg)
168- // TODO msg has been decorated with a flat participantsKey, could re-hydrate
168+ render
169+ })
170+
171+ function render (msgObs) {
172+ const msg = resolve(msgObs)
173+ const participants = getParticipants(msg)
174+ // TODO msg has been decorated with a flat participantsKey, could re-hydrate
169175
170- if (participants.length === 1 && nearby.has(participants.key)) return
171- const locParticipantsKey = get(location, 'participants', []).join(' ') //TODO collection logic
176+ if (participants.length === 1 && nearby.has(participants.key)) return
177+ const locParticipantsKey = get(location, 'participants', []).join(' ') //TODO collect logic
172178
173- if (participants.length === 1) {
174- const author = participants.key
175- return Option({
176- //the number of threads with each peer
177- notifications: notifications(author),
178- imageEl: api.about.html.avatar(author),
179- label: api.about.obs.name(author),
180- selected: locParticipantsKey === author,
181- location: Object.assign({}, msg, { participants }) // TODO make obs?
182- })
183- }
184- else {
185- return Option({
186- //the number of threads with each peer
187- notifications: notifications(participants),
188- imageEl: participants.map(p => api.about.html.avatar(p, 'halfSmall')),
189- label: getSubject(msg),
190- selected: locParticipantsKey === participants.key,
191- location: Object.assign({}, msg, { participants }) // TODO make obs?
192- })
193-
194- function getSubject (msg) {
195- var subject = get(msg, 'value.content.subject')
196- // TODO improve subject getting for group threads...
197- if (!subject) subject = msg.value.content.text.splice(0, 24)
198- return subject
199- }
200- }
179+ if (participants.length === 1) {
180+ const author = participants[0]
181+ return Option({
182+ //the number of threads with each peer
183+ notifications: notifications(author),
184+ imageEl: api.about.html.avatar(author),
185+ label: api.about.obs.name(author),
186+ selected: locParticipantsKey === author,
187+ location: Object.assign({}, msg, { participants }) // TODO make obs?
188+ })
201189 }
202- })
190+ else {
191+ const rootMsg = get(msg, 'value.content.root', msg)
192+ return Option({
193+ //the number of threads with each peer
194+ notifications: notifications(participants),
195+ imageEl: participants.map(p => api.about.html.avatar(p, 'halfSmall')),
196+ label: api.message.html.subject(rootMsg),
197+ selected: locParticipantsKey === participants.key,
198+ location: Object.assign({}, msg, { participants }) // TODO make obs?
199+ })
200+ }
201+ }
203202
204203 function updateRecentMsgCache (soFar, newMsg) {
205204 soFar.transaction(() => {
206205 const { timestamp } = newMsg.value
@@ -241,8 +240,11 @@
241240 return cache
242241 }
243242
244243 function notifications (key) {
244+ key = typeof key === 'string'
245+ ? key
246+ : key.key // participants.key case
245247 return computed(getUnreadMsgsCache(key), cache => cache.length)
246248 }
247249
248250 function LevelTwoSideNav () {
@@ -275,20 +277,22 @@
275277 ),
276278 store: userLastMsgCache,
277279 updateTop: updateLastMsgCache,
278280 updateBottom: updateLastMsgCache,
279- render: (rootMsgObs) => {
280- const rootMsg = resolve(rootMsgObs)
281- const participants = getParticipants(rootMsg)
282- return Option({
283- notifications: notifications(rootMsg.key),
284- label: api.message.html.subject(rootMsg),
285- selected: rootMsg.key === root,
286- location: Object.assign(rootMsg, { participants }),
287- })
288- }
281+ render
289282 })
290283
284+ function render (rootMsgObs) {
285+ const rootMsg = resolve(rootMsgObs)
286+ const participants = getParticipants(rootMsg)
287+ return Option({
288+ notifications: notifications(rootMsg.key),
289+ label: api.message.html.subject(rootMsg),
290+ selected: rootMsg.key === root,
291+ location: Object.assign(rootMsg, { participants }),
292+ })
293+ }
294+
291295 function updateLastMsgCache (soFar, newMsg) {
292296 soFar.transaction(() => {
293297 const { timestamp } = newMsg.value
294298 const index = indexOf(soFar, (msg) => timestamp === resolve(msg).value.timestamp)
@@ -339,9 +343,8 @@
339343 pull.filter(msg => msg.value.content.type === 'post'),
340344 pull.filter(msg => msg.value.content.recps)
341345 )
342346 }
343-
344347 }
345348 }
346349
347350 function indexOf (array, fn) {
app/page/userShow.jsView
@@ -69,10 +69,10 @@
6969 ]),
7070 h('div.introduction', computed(api.about.obs.description(feed), d => api.message.html.markdown(d || ''))),
7171 feed !== myId
7272 ? h('div.actions', [
73+ h('div.directMessage', directMessageButton),
7374 api.contact.html.follow(feed),
74- h('div.directMessage', directMessageButton),
7575 api.contact.html.block(feed)
7676 ])
7777 : '',
7878 ]),
app/page/userShow.mcssView
@@ -28,18 +28,20 @@
2828 }
2929
3030 div.actions {
3131 display: flex
32+
33+ div {
34+ margin: 0 .5rem
35+ }
3236
3337 div.Follow {
34- margin-right: 1rem
3538 }
3639
3740 div.directMessage {
3841 }
3942
4043 div.Block {
41- margin-left: 1rem
4244 }
4345 }
4446 }
4547 }
message/html/subject.jsView
@@ -1,23 +1,48 @@
11 const nest = require('depnest')
2-const { h, when, send, resolve, Value, computed } = require('mutant')
2+const { computed, Value } = require('mutant')
33 const { title } = require('markdown-summary')
4+const { isMsg } = require('ssb-ref')
45
56
67 exports.gives = nest('message.html.subject')
78
89 exports.needs = nest({
910 'message.html.markdown': 'first',
11+ 'message.sync.unbox': 'first',
12+ 'sbot.async.get': 'first',
1013 })
1114
1215 exports.create = function (api) {
1316 return nest('message.html.subject', subject)
1417
1518 function subject (msg) {
19+ if (msg === undefined) debugger
20+ // test if it's a message ref, or a full message object
21+ if (isMsg(msg)) {
22+ var subject = Value()
23+
24+ api.sbot.async.get(msg, (err, value) => {
25+ if (err) throw err
26+
27+ subject.set(getMsgSubject({
28+ key: msg,
29+ value: api.message.sync.unbox(value)
30+ }))
31+ })
32+
33+ return subject
34+ }
35+ else
36+ return getMsgSubject(msg)
37+ }
38+
39+ function getMsgSubject (msg) {
1640 const { subject, text } = msg.value.content
1741 if(!(subject || text)) return
1842
1943 return subject
2044 ? api.message.html.markdown(subject)
2145 : api.message.html.markdown(title(text))
2246 }
2347 }
48+

Built with git-ssb-web