Commit 8ae0df05df1185783cf0ee77113ce4bcc4531bdd
add relationships to profile page
mix irving committed on 2/27/2017, 9:51:20 AMParent: 4c35bc97fddf6fc8f4a573734738fcc02e905863
Files changed
| message/html/author.js | changed |
| router/html/page/profile.js | changed |
| contact/html/relationships.js | added |
| contact/html/relationships.mcss | added |
| message/html/author.js | ||
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| 1 | -const h = require('mutant/h') | |
| 2 | 1 | const nest = require('depnest') |
| 2 | +const { h } = require('mutant') | |
| 3 | 3 | |
| 4 | 4 | exports.gives = nest('message.html.author') |
| 5 | 5 | |
| 6 | 6 | exports.needs = nest('about.html.link', 'first') |
| router/html/page/profile.js | ||
|---|---|---|
| @@ -19,8 +19,9 @@ | ||
| 19 | 19 | // 'imageUrl', |
| 20 | 20 | // 'names', |
| 21 | 21 | // 'images', |
| 22 | 22 | }, |
| 23 | + 'contact.html.relationships': 'first', | |
| 23 | 24 | 'keys.sync.id': 'first', |
| 24 | 25 | 'main.html.scroller': 'first', |
| 25 | 26 | 'message.html.render': 'first', |
| 26 | 27 | 'sbot.pull.userFeed': 'first' |
| @@ -40,9 +41,9 @@ | ||
| 40 | 41 | if (!ref.isFeed(id)) return |
| 41 | 42 | |
| 42 | 43 | const profile = h('Profile', [ |
| 43 | 44 | h('section.edit', api.about.html.edit(id)), |
| 44 | - // h('section.relationships', api.contact.relationships(id)), | |
| 45 | + h('section.relationships', api.contact.html.relationships(id)), | |
| 45 | 46 | h('section.activity', [ |
| 46 | 47 | h('header', 'Activity') |
| 47 | 48 | // ideally the scroller content would go in here |
| 48 | 49 | ]) |
| contact/html/relationships.js | ||
|---|---|---|
| @@ -1,0 +1,75 @@ | ||
| 1 | +const nest = require('depnest') | |
| 2 | +const pull = require('pull-stream') | |
| 3 | +const { unique, drain } = pull | |
| 4 | +const { | |
| 5 | + h, Array: MutantArray, | |
| 6 | + map, computed, when, dictToCollection | |
| 7 | +} = require('mutant') | |
| 8 | + | |
| 9 | +exports.gives = nest('contact.html.relationships') | |
| 10 | + | |
| 11 | +exports.needs = nest({ | |
| 12 | + about: { | |
| 13 | + 'html.image': 'first', | |
| 14 | + 'obs.name': 'first' | |
| 15 | + }, | |
| 16 | + contact: { | |
| 17 | + obs: { | |
| 18 | + followers: 'first', | |
| 19 | + following: 'first' | |
| 20 | + } | |
| 21 | + // TODO add following | |
| 22 | + } | |
| 23 | +}) | |
| 24 | + | |
| 25 | +exports.create = function (api) { | |
| 26 | + return nest({ | |
| 27 | + 'contact.html.relationships': relationships | |
| 28 | + }) | |
| 29 | + | |
| 30 | + function relationships (id) { | |
| 31 | + var rawFollowing = api.contact.obs.following(id) | |
| 32 | + var rawFollowers = api.contact.obs.followers(id) | |
| 33 | + | |
| 34 | + var friends = computed([rawFollowing, rawFollowers], (following, followers) => { | |
| 35 | + return [...following].filter(follow => followers.has(follow)) | |
| 36 | + }) | |
| 37 | + | |
| 38 | + var following = computed([rawFollowing, friends], (following, friends) => { | |
| 39 | + return [...following].filter(follow => !friends.includes(follow)) | |
| 40 | + }) | |
| 41 | + var followers = computed([rawFollowers, friends], (followers, friends) => { | |
| 42 | + return [...followers].filter(follower => !friends.includes(follower)) | |
| 43 | + }) | |
| 44 | + | |
| 45 | + function imageLink (id) { | |
| 46 | + return h('a', | |
| 47 | + { href: id, title: computed(api.about.obs.name(id), name => '@'+name) }, | |
| 48 | + api.about.html.image(id) | |
| 49 | + ) | |
| 50 | + } | |
| 51 | + | |
| 52 | + // TOOD - split this into relationships, move top level stuff into Profile | |
| 53 | + return h('Relationships', [ | |
| 54 | + h('header', 'Relationships'), | |
| 55 | + h('div.your-status', [ | |
| 56 | + h('header', 'Your status'), | |
| 57 | + // h('section.action', api.contact.action(id)) | |
| 58 | + ]), | |
| 59 | + h('div.friends', [ | |
| 60 | + h('header', 'Friends'), | |
| 61 | + h('section', map(friends, imageLink)) | |
| 62 | + ]), | |
| 63 | + h('div.follows', [ | |
| 64 | + h('header', 'Follows'), | |
| 65 | + h('section', map(following, imageLink)) | |
| 66 | + ]), | |
| 67 | + h('div.followers', [ | |
| 68 | + h('header', 'Followers'), | |
| 69 | + h('section', map(followers, imageLink)) | |
| 70 | + ]) | |
| 71 | + ]) | |
| 72 | + } | |
| 73 | + | |
| 74 | +} | |
| 75 | + | |
| contact/html/relationships.mcss | ||
|---|---|---|
| @@ -1,0 +1,65 @@ | ||
| 1 | +Relationships { | |
| 2 | + header { | |
| 3 | + margin-bottom: .8rem | |
| 4 | + border-bottom: 1px gainsboro solid | |
| 5 | + } | |
| 6 | + | |
| 7 | + div { | |
| 8 | + display: flex | |
| 9 | + flex-wrap: wrap | |
| 10 | + justify-content: space-between | |
| 11 | + align-content: flex-start | |
| 12 | + | |
| 13 | + min-height: 5rem | |
| 14 | + margin-bottom: 2rem | |
| 15 | + | |
| 16 | + header { | |
| 17 | + flex-basis: 100% | |
| 18 | + | |
| 19 | + _textSubtle | |
| 20 | + font-size: .9rem | |
| 21 | + | |
| 22 | + margin-bottom: .2rem | |
| 23 | + } | |
| 24 | + | |
| 25 | + section a { | |
| 26 | + margin-right: .2rem | |
| 27 | + | |
| 28 | + img { _avatar-small } | |
| 29 | + } | |
| 30 | + } | |
| 31 | + | |
| 32 | + div.your-status { | |
| 33 | + margin: 0 | |
| 34 | + section.action { | |
| 35 | + } | |
| 36 | + } | |
| 37 | + | |
| 38 | + div.friends { | |
| 39 | + section a { | |
| 40 | + margin: 0 .2rem 0.2rem 0 | |
| 41 | + | |
| 42 | + img { | |
| 43 | + _avatar-large | |
| 44 | + } | |
| 45 | + } | |
| 46 | + } | |
| 47 | + | |
| 48 | + div.follows { | |
| 49 | + } | |
| 50 | + | |
| 51 | + div.followers { | |
| 52 | + } | |
| 53 | +} | |
| 54 | + | |
| 55 | +_avatar-large { | |
| 56 | + width: 56px | |
| 57 | + height: 56px | |
| 58 | +} | |
| 59 | + | |
| 60 | +_avatar-small { | |
| 61 | + width: 32px | |
| 62 | + height: 32px | |
| 63 | +} | |
| 64 | + | |
| 65 | + | |
Built with git-ssb-web