git ssb

10+

Matt McKegg / patchwork



Commit e90da2f27b61cf784fcae42a35492b32c3e19af3

Browse Files

profiles: only show top friends/followers/following and provide "View more" with filter

Matt McKegg committed on 2/12/2018, 9:55:25 PM
Parent: 85d9ae042b27a93cc430e3c2ca805da1d89bd739

Files changed

locales/en.jsonchanged
modules/page/html/render/profile.jschanged
modules/profile/obs/contact.jschanged
modules/sheet/profiles.jschanged
styles/dark/profile-list.mcsschanged
styles/light/profile-list.mcsschanged
locales/en.jsonView
@@ -166,6 +166,10 @@
166166 "other": "You follow %s people that subscribe to this channel."
167167 },
168168 "People you follow that subscribe to this channel": "People you follow that subscribe to this channel",
169169 " from your extended network": " from your extended network",
170- "+ Add Gathering": "+ Add Gathering"
170+ "+ Add Gathering": "+ Add Gathering",
171+ "View %s more": {
172+ "one": "View %s more",
173+ "other": "View %s more"
174+ }
171175 }
modules/page/html/render/profile.jsView
@@ -24,8 +24,9 @@
2424 'profile.obs.rank': 'first',
2525 'profile.sheet.edit': 'first',
2626 'app.navigate': 'first',
2727 'profile.obs.contact': 'first',
28+ 'profile.obs.recentlyUpdated': 'first',
2829 'contact.html.followToggle': 'first',
2930 'intl.sync.i18n': 'first',
3031 'intl.sync.i18n_n': 'first',
3132 'sheet.profiles': 'first'
@@ -40,8 +41,9 @@
4041 var yourId = api.keys.sync.id()
4142 var name = api.about.obs.name(id)
4243 var description = api.about.obs.description(id)
4344 var contact = api.profile.obs.contact(id)
45+ var recent = api.profile.obs.recentlyUpdated()
4446
4547 var friends = computed([contact.following, contact.followers], (following, followers) => {
4648 return Array.from(following).filter(follow => followers.includes(follow))
4749 })
@@ -211,11 +213,11 @@
211213 h('div.side.-right', [
212214 h('button PrivateMessageButton', {'ev-click': () => api.app.navigate('/private', {compose: {to: id}})}, i18n('Send Private Message')),
213215 when(contact.sync,
214216 h('div', [
215- renderContactBlock(i18n('Friends'), friends, contact.yourFollowing),
216- renderContactBlock(i18n('Followers'), followers, contact.yourFollowing),
217- renderContactBlock(i18n('Following'), following, contact.yourFollowing),
217+ renderContactBlock(i18n('Friends'), onlyRecent(friends, 10), contact.yourFollowing, friends),
218+ renderContactBlock(i18n('Followers'), onlyFollowing(followers, 10), contact.yourFollowing, followers),
219+ renderContactBlock(i18n('Following'), onlyRecent(following, 10), contact.yourFollowing, following),
218220 renderContactBlock(i18n('Blocked by'), contact.blockingFriends, contact.yourFollowing)
219221 ]),
220222 h('div', {className: 'Loading'})
221223 )
@@ -227,8 +229,36 @@
227229
228230 container.pendingUpdates = feedView.pendingUpdates
229231 container.reload = feedView.reload
230232 return container
233+
234+ // scoped
235+
236+ function onlyFollowing (ids, max) {
237+ return computed([ids, contact.yourFollowing, recent], (a, b, c) => {
238+ var result = a.filter(x => b.includes(x) && c.includes(x))
239+ if (result.length === 0 && a.length) {
240+ // fallback to just recent
241+ result = a.filter(x => c.includes(x))
242+ }
243+ if (max) {
244+ return result.slice(0, max)
245+ } else {
246+ return result
247+ }
248+ })
249+ }
250+
251+ function onlyRecent (ids, max) {
252+ return computed([ids, recent], (a, b) => {
253+ var result = a.filter(x => b.includes(x))
254+ if (max) {
255+ return result.slice(0, max)
256+ } else {
257+ return result
258+ }
259+ })
260+ }
231261 })
232262
233263 function displayFollowedBy (profiles) {
234264 api.sheet.profiles(profiles, i18n('Followed by'))
@@ -241,12 +271,12 @@
241271 function displayBlockingFriends (profiles) {
242272 api.sheet.profiles(profiles, i18n('Blocked by'))
243273 }
244274
245- function renderContactBlock (title, profiles, yourFollowing) {
246- profiles = api.profile.obs.rank(profiles)
275+ function renderContactBlock (title, profiles, yourFollowing, fullList) {
276+ var moreCount = computed([profiles, fullList], (a, b) => a && b && a.length < b.length && b.length - a.length)
247277 return [
248- when(computed(profiles, x => x.length), h('h2', title)),
278+ when(computed([profiles, fullList], (a, b) => a.length || (b && b.length)), h('h2', title)),
249279 h('div', {
250280 classList: 'ProfileList'
251281 }, [
252282 map(profiles, (id) => {
@@ -264,9 +294,23 @@
264294 ])
265295 }, {
266296 maxTime: 5,
267297 idle: true
268- })
298+ }),
299+ when(moreCount,
300+ h('a.profile -more', {
301+ href: '#',
302+ 'ev-click': function () {
303+ api.sheet.profiles(fullList, title)
304+ }
305+ }, [
306+ h('div.main', [
307+ h('div.name', computed(moreCount, count => {
308+ return count && plural('View %s more', count)
309+ }))
310+ ])
311+ ])
312+ )
269313 ])
270314 ]
271315 }
272316
modules/profile/obs/contact.jsView
@@ -30,8 +30,10 @@
3030 var youFollow = computed([yourFollowing], function (yourFollowing) {
3131 return yourFollowing.includes(id)
3232 })
3333
34+ var yourFriends = computed([yourFollowers, yourFollowing], inAllSets)
35+
3436 var blockingFriends = computed([yourFollowers, yourFollowing, blockers], inAllSets)
3537 var mutualFriends = computed([yourFollowers, yourFollowing, followers, following], inAllSets)
3638 var outgoingVia = computed([yourFollowers, following], inAllSets)
3739 var incomingVia = computed([yourFollowing, followers], inAllSets)
@@ -68,8 +70,9 @@
6870 noIncoming: not(hasIncoming, isYou),
6971 yourId,
7072 yourFollowing,
7173 yourFollowers,
74+ yourFriends,
7275 youFollow,
7376 youBlock,
7477 isYou,
7578 notFollowing: not(youFollow, isYou),
modules/sheet/profiles.jsView
@@ -1,5 +1,5 @@
1-var {h, when, map, computed} = require('mutant')
1+var {h, when, map, computed, Value, lookup} = require('mutant')
22 var nest = require('depnest')
33 var catchLinks = require('../../lib/catch-links')
44
55 exports.needs = nest({
@@ -18,15 +18,45 @@
1818 exports.create = function (api) {
1919 const i18n = api.intl.sync.i18n
2020 return nest('sheet.profiles', function (ids, title) {
2121 api.sheet.display(close => {
22+ var currentFilter = Value()
23+ var nameLookup = lookup(ids, (id) => {
24+ return [id, api.about.obs.name(id)]
25+ })
26+ var filteredIds = computed([ids, nameLookup, currentFilter], (ids, nameLookup, filter) => {
27+ if (filter) {
28+ var result = []
29+ for (var k in nameLookup) {
30+ if (nameLookup[k] && nameLookup[k].toLowerCase().includes(filter.toLowerCase())) {
31+ result.push(k)
32+ }
33+ }
34+ return result
35+ } else {
36+ return ids
37+ }
38+ })
2239 var content = h('div', {
2340 style: { padding: '20px' }
2441 }, [
2542 h('h2', {
2643 style: { 'font-weight': 'normal' }
27- }, [title]),
28- renderContactBlock(ids)
44+ }, [
45+ title,
46+ h('input', {
47+ type: 'search',
48+ placeholder: 'filter names',
49+ 'ev-input': function (ev) {
50+ currentFilter.set(ev.target.value)
51+ },
52+ style: {
53+ 'float': 'right',
54+ 'font-size': '100%'
55+ }
56+ })
57+ ]),
58+ renderContactBlock(filteredIds)
2959 ])
3060
3161 catchLinks(content, (href, external, anchor) => {
3262 if (!external) {
@@ -66,9 +96,9 @@
6696 h('div.main', [
6797 h('div.name', [ api.about.obs.name(id) ])
6898 ])
6999 ])
70- }, { idle: true })
100+ }, { idle: true, maxTime: 2 })
71101 ])
72102 ]
73103 }
74104 }
styles/dark/profile-list.mcssView
@@ -12,8 +12,13 @@
1212
1313 background-repeat: no-repeat
1414 background-position: right
1515
16+ -more {
17+ padding-top: 10px
18+ padding-bottom: 10px
19+ }
20+
1621 -following {
1722 background-image: svg(following)
1823 }
1924
styles/light/profile-list.mcssView
@@ -12,8 +12,13 @@
1212
1313 background-repeat: no-repeat
1414 background-position: right
1515
16+ -more {
17+ padding-top: 10px
18+ padding-bottom: 10px
19+ }
20+
1621 -following {
1722 background-image: svg(following)
1823 }
1924

Built with git-ssb-web