git ssb

2+

mixmix / ticktack



Commit 99dc6aa464a4c1cc228a6af744517def76da134f

Browse Files

basic profile page with follow + dm buttons

mix irving committed on 8/16/2017, 4:26:37 AM
Parent: 38e0417253d2dc77736737889d97f936df7f35a0

Files changed

app/html/link.jschanged
app/html/link.mcsschanged
app/page/userShow.jschanged
app/page/userShow.mcssadded
styles/global.mcsschanged
styles/button.mcssadded
styles/markdown.mcssadded
translations/sync.jschanged
app/html/link.jsView
@@ -9,9 +9,10 @@
99
1010 exports.create = (api) => {
1111 return nest('app.html.link', (location, body) => {
1212 return h('Link', {
13- 'ev-click': () => api.history.sync.push(location)
13+ 'ev-click': () => api.history.sync.push(location),
14+ className: typeof body === 'string' ? '-string' : ''
1415 }, body)
1516 })
1617 }
1718
app/html/link.mcssView
@@ -1,6 +1,10 @@
11 Link {
22 color: blue
3- :hover {
4- text-decoration: underline
3+
4+ -string {
5+ :hover {
6+ text-decoration: underline
7+ }
58 }
69 }
10+
app/page/userShow.jsView
@@ -1,36 +1,72 @@
11 const nest = require('depnest')
2-const { h } = require('mutant')
2+const { h, computed, when } = require('mutant')
33
44 exports.gives = nest('app.page.userShow')
55
66 exports.needs = nest({
77 'app.html.link': 'first',
88 'app.html.nav': 'first',
99 'about.html.image': 'first',
1010 'about.obs.name': 'first',
11+ 'contact.async.follow': 'first',
12+ 'contact.async.unfollow': 'first',
13+ 'contact.obs.followers': 'first',
1114 'keys.sync.id': 'first',
15+ 'translations.sync.strings': 'first',
1216 })
1317
1418 exports.create = (api) => {
1519 return nest('app.page.userShow', userShow)
1620
1721 function userShow (location) {
1822
1923 const { feed } = location
20- const Link = api.app.html.link
2124 const myId = api.keys.sync.id()
2225
26+ const strings = api.translations.sync.strings()
27+
28+ const { followers } = api.contact.obs
29+
30+ const youFollowThem = computed(followers(feed), followers => followers.has(myId))
31+ const theyFollowYou = computed(followers(myId), followers => followers.has(feed))
32+ const youAreFriends = computed([youFollowThem, theyFollowYou], (a, b) => a && b)
33+
34+ const ourRelationship = computed(
35+ [youAreFriends, youFollowThem, theyFollowYou],
36+ (youAreFriends, youFollowThem, theyFollowYou) => {
37+ if (youAreFriends) return strings.userShow.state.friends
38+ if (theyFollowYou) return strings.userShow.state.theyFollow
39+ if (youFollowThem) return strings.userShow.state.youFollow
40+ }
41+ )
42+ const { unfollow, follow } = api.contact.async
43+ const followButton = when(followers(myId).sync,
44+ when(youFollowThem,
45+ h('Button -subtle', { 'ev-click': () => unfollow(feed) }, strings.userShow.action.unfollow),
46+ h('Button -primary', { 'ev-click': () => follow(feed) }, strings.userShow.action.follow)
47+ ),
48+ h('Button', { disabled: 'disabled' }, strings.loading )
49+ )
50+
51+ const Link = api.app.html.link
52+
2353 return h('Page -userShow', [
54+ api.app.html.nav(),
2455 h('h1', api.about.obs.name(feed)),
25- api.app.html.nav(),
26- api.about.html.image(feed),
27- h('div', 'follow button'),
28- h('div', 'friends in common'),
29- feed !== myId
30- ? Link({ page: 'threadNew', feed }, 'New Thread')
31- : '',
32- h('div', 'conversations you\'ve had with dominic'),
33- h('div', 'groups dominic is in'),
56+ h('div.container', [
57+ api.about.html.image(feed),
58+ feed !== myId
59+ ? h('div.friendship', [
60+ h('div.state', ourRelationship),
61+ followButton
62+ ]) : '',
63+ h('div', '...friends in common'),
64+ h('div', '...groups dominic is in'),
65+ feed !== myId
66+ ? Link({ page: 'threadNew', feed }, h('Button -primary', strings.userShow.action.directMessage))
67+ : '',
68+ h('div', 'conversations you\'ve had with dominic'),
69+ ])
3470 ])
3571 }
3672 }
app/page/userShow.mcssView
@@ -1,0 +1,17 @@
1+Page -userShow {
2+ div.container {
3+
4+ div.friendship {
5+ display: flex
6+ align-items: center
7+
8+ margin-bottom: 1rem
9+
10+ div.state { flex-basis: 12rem }
11+ div.Button {}
12+ }
13+
14+
15+ }
16+}
17+
styles/global.mcssView
@@ -17,16 +17,7 @@
1717 img {
1818 max-width: 100%
1919 }
2020
21-Markdown {
22- word-break: break-word
23-
24- (img) {
25- margin: .5rem 0
26- border-radius: .5rem
27- }
28-}
29-
3021 button {
3122 width: 100%
3223 }
styles/button.mcssView
@@ -1,0 +1,27 @@
1+Button {
2+ font-family: arial
3+ text-align: center
4+
5+ cursor: pointer
6+
7+ padding: .2rem 2rem
8+ min-width: 4rem
9+ border: 1px #b9b9b9 solid
10+
11+ -subtle {
12+ color: #b9b9b9
13+ :hover {
14+ color: #222
15+ }
16+ }
17+ -primary {
18+ $primaryColor
19+
20+ :hover {
21+ opacity: .9
22+ }
23+
24+ border: none
25+ }
26+}
27+
styles/markdown.mcssView
@@ -1,0 +1,10 @@
1+Markdown {
2+ word-break: break-word
3+
4+ (img) {
5+ margin: .5rem 0
6+ border-radius: .5rem
7+ }
8+}
9+
10+
translations/sync.jsView
@@ -1,13 +1,28 @@
1+const nest = require('depnest')
12
2-exports.gives = {translations: {sync: {strings: true}}}
3+exports.gives = nest('translations.sync.strings')
34
4-exports.create = function () {
5- return {translations: {sync: {strings: function () {
6- return {
7- showMore: "Show More",
8- channels: "Channels",
9- directMessages: "Direct Messages",
10- replySymbol: "> "
5+exports.create = (api) => {
6+ return nest('translations.sync.strings', () => en)
7+}
8+
9+const en = {
10+ loading: 'Loading...',
11+ showMore: 'Show More',
12+ channels: 'Channels',
13+ directMessages: 'Direct Messages',
14+ replySymbol: '> ',
15+ userShow: {
16+ action: {
17+ follow: 'Follow',
18+ unfollow: 'Unfollow',
19+ directMessage: 'New Direct Message'
20+ },
21+ state: {
22+ friends: 'You are friends',
23+ youFollow: 'You follow them',
24+ theyFollow: 'They follow you'
1125 }
12- }}}}
26+ }
1327 }
28+

Built with git-ssb-web