git ssb

2+

mixmix / ticktack



Commit d6822ab78c99d8defe594f66a40543a4cc334c80

Browse Files

basic notification styles for stats page

mix irving committed on 5/7/2018, 7:30:49 AM
Parent: b594e41bf900f3f0b270f809fae0596be6cceb54

Files changed

app/page/notifications.jschanged
app/page/notifications.mcsschanged
message/html/notification.jsadded
message/html/notification.mcssadded
message/index.jschanged
ssb-server-ticktack.jschanged
app/page/notifications.jsView
@@ -7,44 +7,63 @@
77 exports.needs = nest({
88 'app.html.scroller': 'first',
99 'app.html.sideNav': 'first',
1010 'message.html.comment': 'first',
11+ 'message.html.notification': 'first',
1112 'sbot.obs.connection': 'first',
1213 'translations.sync.strings': 'first'
1314 })
1415
16+const SOURCES = {
17+ comments: 'readAllComments',
18+ likes: 'readAllLikes',
19+ shares: 'readAllShares'
20+}
21+
1522 exports.create = (api) => {
1623 return nest('app.page.notifications', function (location) {
1724 // location here can expected to be: { page: 'notifications', section: * }
25+ if (!Object.keys(SOURCES).includes(location.section)) return
1826
19- if (!location.section) return
20-
2127 var scroller = api.app.html.scroller({
2228 classList: ['content'],
23- stream: createBlogCommentStream,
24- render: Comment
29+ stream: createCreateStream(location.section),
30+ render: createRender(location.section)
2531 })
2632
27- function createBlogCommentStream (opts) {
28- const source = defer.source()
29- var resolved = false
33+ return h('Page -notifications', [
34+ api.app.html.sideNav(location),
35+ scroller
36+ ])
3037
31- onceTrue(api.sbot.obs.connection, server => {
32- if (resolved) return
38+ function createCreateStream (section) {
39+ return function (opts) {
40+ const source = defer.source()
41+ var resolved = false
3342
34- source.resolve(server.ticktack.readAllComments(opts))
35- resolved = true
36- })
43+ onceTrue(api.sbot.obs.connection, server => {
44+ if (resolved) return
3745
38- return source
46+ source.resolve(server.ticktack[SOURCES[section]](opts))
47+ resolved = true
48+ })
49+
50+ return source
51+ }
3952 }
4053
41- return h('Page -notifications', [
42- api.app.html.sideNav(location),
43- scroller
44- ])
54+ function createRender (section) {
55+ return function (msg) {
56+ switch (section) {
57+ case 'comments':
58+ return api.message.html.comment({ comment: msg, showRootLink: true })
4559
46- function Comment (msg) {
47- return api.message.html.comment({ comment: msg, showRootLink: true })
60+ case 'likes':
61+ return api.message.html.notification(msg)
62+
63+ case 'shares':
64+ return api.message.html.notification(msg)
65+ }
66+ }
4867 }
4968 })
5069 }
app/page/notifications.mcssView
@@ -4,9 +4,9 @@
44 section.content {
55 padding-top: 2rem
66
77 div.Comment {
8- flex-grow: 1
8+ flex-basis: 100%
99
1010 div.right {
1111 section.replies {
1212
@@ -15,7 +15,11 @@
1515 }
1616 }
1717 }
1818 }
19+
20+ div.Notification {
21+ flex-basis: 100%
22+ }
1923 }
2024 }
2125 }
message/html/notification.jsView
@@ -1,0 +1,69 @@
1+const nest = require('depnest')
2+const { h, Value, onceTrue } = require('mutant')
3+const get = require('lodash/get')
4+const getType = (msg) => get(msg, 'value.content.type')
5+const getLikeRoot = (msg) => get(msg, 'value.content.vote.link')
6+const getShareRoot = (msg) => get(msg, 'value.content.share.link')
7+const getRoot = (msg) => {
8+ switch (getType(msg)) {
9+ case 'vote':
10+ return getLikeRoot(msg)
11+ case 'share':
12+ return getShareRoot(msg)
13+ }
14+}
15+
16+exports.gives = nest('message.html.notification')
17+
18+exports.needs = nest({
19+ 'about.html.avatar': 'first',
20+ 'about.obs.name': 'first',
21+ 'blog.html.title': 'first',
22+ // 'message.html.markdown': 'first',
23+ 'message.html.timeago': 'first',
24+ 'message.html.likes': 'first',
25+ 'unread.sync.markRead': 'first',
26+ 'unread.sync.isUnread': 'first',
27+ 'sbot.obs.connection': 'first',
28+ 'translations.sync.strings': 'first'
29+})
30+
31+exports.create = (api) => {
32+ return nest('message.html.notification', Notification)
33+
34+ function Notification (msg) {
35+ var root = getRoot(msg)
36+ if (!root) return
37+
38+ const { author } = msg.value
39+
40+ var className = api.unread.sync.isUnread(msg) ? ' -unread' : ' -read'
41+ api.unread.sync.markRead(msg)
42+
43+ var title = Value()
44+ processMessage(root, msg => {
45+ var t = api.blog.html.title(msg)
46+ title.set(t.innerText ? t.innerText : t)
47+ })
48+
49+ return h('Notification', { className }, [
50+ h('div.left', api.about.html.avatar(author, 'tiny')),
51+ h('div.right', [
52+ h('section.context', [
53+ h('div.name', api.about.obs.name(author)),
54+ api.message.html.timeago(msg),
55+ h('a.rootLink', {href: root}, ['<< ', title, ' >>'])
56+ ])
57+ // TODO display the share text ??
58+ // h('section.content', api.message.html.markdown(get(msg, 'value.content.text'))),
59+ ])
60+ ])
61+ }
62+
63+ function processMessage (key, fn) {
64+ onceTrue(api.sbot.obs.connection, server => server.get(key, (err, value) => {
65+ if (err) return console.error(err)
66+ fn({ key, value })
67+ }))
68+ }
69+}
message/html/notification.mcssView
@@ -1,0 +1,42 @@
1+Notification {
2+ display: flex
3+
4+ div.left {
5+ padding-top: 1rem
6+ margin-right: 1rem
7+
8+ div.Avatar {}
9+ }
10+
11+ div.right {
12+ flex-grow: 1
13+
14+ padding-top: 1rem
15+ padding-bottom: 2rem
16+ $borderBottomLight
17+ margin-bottom: 1rem
18+
19+ section.context {
20+ display: flex
21+ align-items: baseline
22+
23+ div.name {
24+ font-size: 1.2rem
25+ margin-right: 1rem
26+ }
27+ div.Timeago {
28+ margin-right: 1.5rem
29+ }
30+ a.rootLink {
31+ font-size: .8rem
32+ }
33+ }
34+
35+ section.content {
36+ font-size: .95rem
37+ line-height: 1.4
38+ div.Markdown {}
39+ }
40+
41+ }
42+}
message/index.jsView
@@ -6,8 +6,9 @@
66 channel: require('./html/channel'),
77 comment: require('./html/comment'),
88 compose: require('./html/compose'),
99 likes: require('./html/likes'),
10+ notification: require('./html/notification'),
1011 subject: require('./html/subject'),
1112 timeago: require('./html/timeago')
1213 },
1314 sync: {
ssb-server-ticktack.jsView
@@ -8,8 +8,9 @@
88 const getType = (msg) => get(msg, 'value.content.type')
99 const getAuthor = (msg) => get(msg, 'value.author')
1010 const getCommentRoot = (msg) => get(msg, 'value.content.root')
1111 const getLikeRoot = (msg) => get(msg, 'value.content.vote.link')
12+const getShareRoot = (msg) => get(msg, 'value.content.share.link')
1213 const getTimestamp = (msg) => get(msg, 'value.timestamp')
1314
1415 const FLUME_VIEW_VERSION = 1
1516
@@ -170,9 +171,9 @@
170171 type: 'share',
171172 makeFilter: (blogIds) => msg => {
172173 if (getAuthor(msg) === myKey) return false // exclude my shares
173174
174- return blogIds.includes(getLikeRoot(msg)) // is about one of my blogs
175+ return blogIds.includes(getShareRoot(msg)) // is about one of my blogs
175176 },
176177 opts
177178 })
178179 }

Built with git-ssb-web