git ssb

10+

Matt McKegg / patchwork



Commit 2d704dd69f4a5dc68cb09a69665d8ac4ff93b64b

Browse Files

Add Channels Page (#476)

Channels sidebar links to a new page with all channels in.
Peter Braden committed on 6/2/2017, 3:06:18 PM
Parent: c2d8083ad55e777a6e7b82aaa57f2aaa27f5a607

Files changed

main-window.jschanged
modules/page/html/render/public.jschanged
modules/page/html/render/channels.jsadded
styles/AllChannels.mcssadded
main-window.jsView
@@ -32,8 +32,9 @@
3232 'sbot.async.get': 'first',
3333 'blob.sync.url': 'first',
3434 'page.html.render': 'first',
3535 'app.html.search': 'first',
36+ 'app.html.channels': 'first',
3637 'app.views': 'first',
3738 'app.sync.externalHandler': 'first',
3839 'app.html.progressNotifier': 'first',
3940 'profile.sheet.edit': 'first',
modules/page/html/render/public.jsView
@@ -134,9 +134,13 @@
134134 return [
135135 h('button -pub -full', {
136136 'ev-click': api.invite.sheet
137137 }, '+ Join Pub'),
138- when(computed(channels, x => x.length), h('h2', 'Active Channels')),
138+ when(computed(channels, x => x.length),
139+ h('h2',
140+ h('a', {href: '/channels'}, 'Active Channels')
141+ )
142+ ),
139143 when(loading, [ h('Loading') ]),
140144 h('div', {
141145 classList: 'ChannelList',
142146 hidden: loading
modules/page/html/render/channels.jsView
@@ -1,0 +1,69 @@
1+var nest = require('depnest')
2+var { h, send, when, computed, map } = require('mutant')
3+
4+exports.needs = nest({
5+ 'message.async.publish': 'first',
6+ 'keys.sync.id': 'first',
7+ 'channel.obs': {
8+ subscribed: 'first',
9+ recent: 'first'
10+ }
11+})
12+
13+exports.gives = nest('page.html.render')
14+
15+exports.create = function(api){
16+ return nest('page.html.render', function page(path){
17+ if (path !== '/channels') return
18+
19+ var id = api.keys.sync.id()
20+ var channels = api.channel.obs.recent()
21+ var subscribedChannels = api.channel.obs.subscribed(id)
22+ var loading = computed(subscribedChannels.sync, x => !x)
23+
24+ return h('div', { classList: 'Scroller'}, [
25+ when(loading, [ h('Loading') ]),
26+ h('div', {
27+ classList: 'AllChannels',
28+ hidden: loading
29+ }, [
30+ map(channels, (channel) => {
31+ var subscribed = subscribedChannels.has(channel)
32+ return h('a.channel', {
33+ href: `#${channel}`,
34+ classList: [
35+ when(subscribed, '-subscribed')
36+ ]
37+ }, [
38+ h('span.name', '#' + channel),
39+ when(subscribed,
40+ h('a.-unsubscribe', {
41+ 'ev-click': send(unsubscribe, channel)
42+ }, 'Unsubscribe'),
43+ h('a.-subscribe', {
44+ 'ev-click': send(subscribe, channel)
45+ }, 'Subscribe')
46+ )
47+ ])
48+ }, {maxTime: 5})
49+ ])
50+ ])
51+
52+
53+ function subscribe (id) {
54+ api.message.async.publish({
55+ type: 'channel',
56+ channel: id,
57+ subscribed: true
58+ })
59+ }
60+
61+ function unsubscribe (id) {
62+ api.message.async.publish({
63+ type: 'channel',
64+ channel: id,
65+ subscribed: false
66+ })
67+ }
68+ })
69+}
styles/AllChannels.mcssView
@@ -1,0 +1,83 @@
1+AllChannels {
2+ display: flex;
3+ flex-wrap: wrap;
4+ justify-content: center;
5+ overflow-y: auto
6+ padding: 10px;
7+
8+ a.channel {
9+ display: flex;
10+ padding: 8px 10px;
11+ font-size: 110%;
12+ margin: 4px;
13+ background: rgba(255, 255, 255, 0.66);
14+ color: #333;
15+ border-radius: 5px;
16+ position: relative
17+ transition: background-color 0.2s
18+ width: 200px;
19+ overflow: hidden;
20+ text-overflow: ellipsis;
21+
22+ background-repeat: no-repeat
23+ background-position: right
24+
25+ -subscribed {
26+ background-image: svg(subscribed)
27+ span.name {
28+ font-weight: bold
29+ }
30+ }
31+
32+ @svg subscribed {
33+ width: 20px
34+ height: 12px
35+ content: "<circle cx='6' stroke='#888' fill='none' cy='6' r='5' /> <circle cx='6' cy='6' r='3' fill='#888'/>"
36+ }
37+
38+ :hover {
39+ background: rgba(255, 255, 255, 0.4);
40+ text-decoration: none;
41+ a {
42+ transition: opacity 0.05s
43+ opacity: 1
44+ }
45+ }
46+
47+ span.name {
48+ flex: 1
49+ white-space: nowrap;
50+ min-width: 0;
51+ }
52+
53+ a {
54+ display: inline
55+ opacity: 0;
56+ font-size: 80%;
57+ background-color: rgb(112, 112, 112);
58+ transition: opacity 0.2s, background-color 0.4s
59+ padding: 9px 10px;
60+ color: white;
61+ border-radius: 4px;
62+ font-weight: bold;
63+ margin: -8px -10px -8px 4px;
64+ border-top-left-radius: 0;
65+ border-bottom-left-radius: 0;
66+ border-left: 2px solid rgba(255, 255, 255, 0.9);
67+ text-decoration: none
68+
69+ -subscribe {
70+ :hover {
71+ background-color: rgb(112, 184, 212);
72+ }
73+ }
74+
75+ -unsubscribe {
76+ :hover {
77+ background: rgb(212, 112, 112);
78+ }
79+ }
80+ }
81+ }
82+}
83+}

Built with git-ssb-web