git ssb

2+

mixmix / ticktack



Commit 0b0275502152a806a995b36fd4d29e8c3df1195e

Browse Files

wip - addressbook search starting to work

mix committed on 1/25/2018, 4:30:47 AM
Parent: 8c00d2692c05faece6e79ee8158e2cbf6612e078

Files changed

app/html/app.jschanged
app/html/sideNav/sideNavDiscovery.jschanged
app/html/topNav/topNavBlog.jschanged
app/html/topNav/zz_topNavBack.jschanged
app/html/topNav/topNavAddressBook.jsadded
app/html/topNav/topNavAddressBook.mcssadded
app/index.jschanged
app/page/addressBook.jschanged
app/page/addressBook.mcsschanged
blog/html/blog.jschanged
app/html/app.jsView
@@ -28,8 +28,9 @@
2828
2929 view = Value()
3030 var app = h('App', view)
3131 api.history.obs.location()(renderLocation)
32+ api.history.obs.location()(loc => console.log('location:', loc))
3233
3334 startApp()
3435
3536 return app
app/html/sideNav/sideNavDiscovery.jsView
@@ -76,13 +76,15 @@
7676 LevelTwoSideNav()
7777 ])
7878
7979 function LevelOneSideNav () {
80- function isDiscoverSideNav (loc) {
80+ function isDiscoverLocation (loc) {
8181 const PAGES_UNDER_DISCOVER = ['blogIndex', 'blogShow', 'userShow']
8282
83- return PAGES_UNDER_DISCOVER.includes(location.page)
84- || get(location, 'value.private') === undefined
83+ if (PAGES_UNDER_DISCOVER.includes(location.page)) return true
84+ if (location.page === 'threadNew') return false
85+ if (get(location, 'value.private') === undefined) return true
86+ return false
8587 }
8688
8789 const prepend = [
8890 // Nearby
@@ -90,9 +92,9 @@
9092 map(nearby, feedId => Option({
9193 notifications: notifications(feedId),
9294 imageEl: api.about.html.avatar(feedId, 'small'),
9395 label: api.about.obs.name(feedId),
94- selected: location.feed === feedId,
96+ selected: location.feed === feedId && !isDiscoverLocation(location),
9597 location: computed(recentMsgCache, recent => {
9698 const lastMsg = recent.find(msg => msg.value.author === feedId)
9799 return lastMsg
98100 ? Object.assign(lastMsg, { feed: feedId })
@@ -110,9 +112,9 @@
110112 imageEl: h('i', [
111113 h('img', { src: path.join(__dirname, '../../../assets', 'discover.png') })
112114 ]),
113115 label: strings.blogIndex.title,
114- selected: isDiscoverSideNav(location),
116+ selected: isDiscoverLocation(location),
115117 location: { page: 'blogIndex' },
116118 })
117119 ]
118120
app/html/topNav/topNavBlog.jsView
@@ -5,17 +5,15 @@
55 exports.gives = nest('app.html.topNav')
66
77 exports.needs = nest({
88 'history.sync.push': 'first',
9- 'history.sync.back': 'first',
109 'translations.sync.strings': 'first',
1110 })
1211
1312 exports.create = (api) => {
1413 return nest('app.html.topNav', (location) => {
1514 const strings = api.translations.sync.strings()
1615 const goTo = (loc) => () => api.history.sync.push(loc)
17- const back = () => api.history.sync.back()
1816
1917 if (!['blogIndex', 'blogSearch'].includes(location.page)) return
2018
2119 return h('TopNav -blog', [
@@ -32,18 +30,7 @@
3230 h('div.right', [
3331 h('Button -strong', { 'ev-click': () => api.history.sync.push({ page: 'blogNew' }) }, strings.blogNew.actions.writeBlog),
3432 ])
3533 ])
36-
37- return h('TopNav -back', [
38- h('div.left', [
39- h('div.-back', { 'ev-click': back }, [
40- h('i.fa.fa-chevron-left'),
41- strings.blogIndex.title
42- ]),
43- ]),
44- h('div.right', [
45- ])
46- ])
4734 })
4835 }
4936
app/html/topNav/zz_topNavBack.jsView
@@ -4,9 +4,8 @@
44
55 exports.gives = nest('app.html.topNav')
66
77 exports.needs = nest({
8- 'history.sync.push': 'first',
98 'history.sync.back': 'first',
109 'translations.sync.strings': 'first',
1110 })
1211
app/html/topNav/topNavAddressBook.jsView
@@ -1,0 +1,29 @@
1+const nest = require('depnest')
2+const { h, computed, when } = require('mutant')
3+const get = require('lodash/get')
4+
5+exports.gives = nest('app.html.topNav')
6+
7+exports.needs = nest({
8+ 'translations.sync.strings': 'first',
9+})
10+
11+exports.create = (api) => {
12+ return nest('app.html.topNav', (location, input) => {
13+ if (location.page !== 'addressBook') return
14+
15+ const strings = api.translations.sync.strings()
16+
17+ return h('TopNav -addressBook', [
18+ h('div.search', [
19+ h('i.fa.fa-search'),
20+ h('input', {
21+ placeholder: strings.userFind.action.findAUser,
22+ autofocus: 'autofocus',
23+ 'ev-input': e => input.set(e.target.value)
24+ }),
25+ ])
26+ ])
27+ })
28+}
29+
app/html/topNav/topNavAddressBook.mcssView
@@ -1,0 +1,26 @@
1+TopNav -addressBook {
2+ div.search {
3+ $backgroundPrimaryText
4+
5+ margin-bottom: .5rem
6+
7+ display: flex
8+ align-items: center
9+
10+ i.fa-search {
11+ margin-left: .8rem
12+ }
13+
14+ input {
15+ flex-grow: 1
16+
17+ $fontBasic
18+ margin: .6rem
19+
20+ border: none
21+ outline: none
22+ }
23+ }
24+
25+}
26+
app/index.jsView
@@ -10,8 +10,9 @@
1010 link: require('./html/link'),
1111 lightbox: require('./html/lightbox'),
1212 blogCard: require('./html/blogCard'),
1313 topNav: {
14+ topNavAddressBook: require('./html/topNav/topNavAddressBook'),
1415 topNavBlog: require('./html/topNav/topNavBlog'),
1516 topNavBack: require('./html/topNav/zz_topNavBack'),
1617 },
1718 scroller: require('./html/scroller'),
app/page/addressBook.jsView
@@ -1,14 +1,23 @@
11 const nest = require('depnest')
2-const { h } = require('mutant')
2+const { h, Value, computed, map } = require('mutant')
33 const pull = require('pull-stream')
44
55 exports.gives = nest('app.page.addressBook')
66
7+//declare consts to avoid magic-string errors
8+const FRIENDS = 'friends'
9+const FOLLOWING = 'following'
10+const FOLLOWERS = 'followers'
11+const SEARCH = 'search'
12+
713 exports.needs = nest({
8- 'app.html.blogNav': 'first',
14+ 'about.html.avatar': 'first',
15+ 'about.async.suggest': 'first',
16+ 'app.html.topNav': 'first',
917 // 'app.html.scroller': 'first',
1018 'app.html.sideNav': 'first',
19+ 'app.html.topNav': 'first',
1120 'contact.obs.relationships': 'first',
1221 'history.sync.push': 'first',
1322 'keys.sync.id': 'first',
1423 'translations.sync.strings': 'first',
@@ -21,15 +30,36 @@
2130 const strings = api.translations.sync.strings()
2231 const myKey = api.keys.sync.id()
2332 const relationships = api.contact.obs.relationships(myKey)
2433
25-
34+ const SECTIONS = [FRIENDS, FOLLOWING, FOLLOWERS, SEARCH]
35+ const section = location.section || FRIENDS
36+ if (!SECTIONS.includes(section)) throw new Error('AddressBook location must include valid section, got:', location)
2637
38+ const input = Value()
39+
40+ const suggester = api.about.async.suggest()
41+ const users = computed(input, input => suggester(input))
42+ // might further prune this based on section
43+
44+
45+ // const goTo = (loc) => () => api.history.sync.push(loc)
46+
2747 return h('Page -addressBook', [
2848 api.app.html.sideNav(location, relationships),
29- h('div.content', [
30- 'pageNav',
31- '//// content here ////'
49+ h('Scroller.content', [
50+ h('section.top', [
51+ api.app.html.topNav(location, input),
52+ ]),
53+ h('section.content', [
54+ h('div.results', map(users, user => {
55+ return h('div.result', [
56+ api.about.html.avatar(user.id),
57+ h('div.alias', user.title),
58+ h('pre.key', user.id),
59+ ])
60+ })),
61+ ])
3262 ])
3363 ])
3464 })
3565 }
app/page/addressBook.mcssView
@@ -1,23 +1,48 @@
1-Page -blogIndex {
2- div.content.Scroller {
1+Page -addressBook {
2+ div.Scroller.content {
33 padding: 0
44
55 section.top {
66 position: sticky
77 }
88
99 section.content {
10- div.BlogCard {
11- flex-basis: 100%
12- border-bottom: 1px solid rgba(0,0,0, .1)
10+ div.results {
11+ $maxWidthSmaller
12+
13+ div.result {
14+ $backgroundPrimaryText
15+
16+ padding: .5rem
17+
18+ display: flex
19+ align-items: center
20+
21+ img {
22+ $circleSmall
23+ margin-right: 1rem
24+ }
25+
26+ div.alias {
27+ flex-grow: 1
28+ margin-right: 1rem
29+ }
30+
31+ pre.key {
32+ color: #999
33+
34+ }
35+
36+ :hover {
37+ background-color: #eee
38+
39+ }
40+ }
1341 }
1442 }
1543
1644 section.bottom {
17- div.Button {
18- margin: 1rem 0
19- }
2045 }
2146 }
2247 }
2348
blog/html/blog.jsView
@@ -30,9 +30,9 @@
3030 api.sbot.obs.connection(),
3131 sbot => sbot.blobs.want(blog, (err, success) => {
3232 if (err) throw err
3333
34- console.log(`want blog ${blog}, callback: ${success}`)
34+ // console.log(`want blog ${blog}, callback: ${success}`)
3535 })
3636 )
3737 }
3838

Built with git-ssb-web