git ssb

16+

Dominic / patchbay



Commit 41ed6a5aa572f6de601bab35fc108a955657c074

Merge pull request #64 from ssbc/about_refactor

A step toward modular CSS (and so more modular components).
mix irving authored on 1/4/2017, 9:46:54 PM
GitHub committed on 1/4/2017, 9:46:54 PM
Parent: 5cb4510e7266ce92c57a4468efce4479ec64d714
Parent: 7470f29e565172555b9c2e102a58e88dd52a2d6a

Files changed

.gitignorechanged
index.jschanged
modules_basic/about.jschanged
modules_basic/index.jschanged
modules_basic/message.jschanged
modules_basic/post.jschanged
modules_basic/thread.jschanged
modules_basic/timestamp.jschanged
modules_basic/about.mcssadded
modules_basic/message-author.jsadded
modules_basic/message-author.mcssadded
modules_basic/message-backlinks.jsadded
modules_basic/message-backlinks.mcssadded
modules_basic/message.mcssadded
modules_basic/reply.jsadded
modules_basic/timestamp.mcssadded
modules_core/app.jschanged
modules_core/index.jschanged
modules_core/style-mixins.jsadded
modules_core/styles.jsadded
modules_extra/git.jschanged
modules_extra/raw.jschanged
package.jsonchanged
scripts/create-index.jsdeleted
scripts/style.jsdeleted
style.csschanged
h.jsadded
.gitignoreView
@@ -2,5 +2,4 @@
22 npm-debug.log
33 .npmignore
44 build
55 modules/_index.js
6-style.css.json
index.jsView
@@ -1,4 +1,7 @@
1 +// polyfills
2 +require('setimmediate')
3 +
14 require('depject')(
25 // from more specialized to more general
36 require('./modules_extra'),
47 require('./modules_basic'),
modules_basic/about.jsView
@@ -1,48 +1,100 @@
1 +const fs = require('fs')
2 +const h = require('../h')
3 +const when = require('@mmckegg/mutant/when')
14
2-var h = require('hyperscript')
3-
4-function idLink (id) {
5- return h('a', {href:'#'+id}, id)
5 +exports.needs = {
6 + blob_url: 'first',
7 + markdown: 'first'
68 }
79
8-function asLink (ln) {
9- return 'string' === typeof ln ? ln : ln.link
10 +exports.gives = {
11 + mcss: true,
12 + message_content: true,
13 + message_content_mini: true
1014 }
1115
12-//var blob_url = require('../plugs').first(exports.blob_url = [])
16 +exports.create = function (api) {
17 + return {
18 + message_content,
19 + message_content_mini,
20 + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
21 + }
1322
14-exports.needs = {
15- blob_url: 'first'
16-}
23 + function message_content (msg) {
24 + if (msg.value.content.type !== 'about') return
1725
18-exports.gives = 'message_content'
26 + var { content: about, author: authorId } = msg.value
27 + var { about: aboutId, name, image, description } = about
1928
20-exports.create = function (api) {
29 + if (!aboutId) return null
2130
22- return function (msg) {
23- if(msg.value.content.type !== 'about') return
31 + return h('About', [
32 + Name({ aboutId, authorId, name }),
33 + Image({ aboutId, authorId, image }),
34 + Description({ aboutId, authorId, description })
35 + ])
36 + }
2437
25- if(!msg.value.content.image && !msg.value.content.name)
26- return
38 + function message_content_mini (msg) {
39 + if (msg.value.content.type !== 'about') return
2740
28- var about = msg.value.content
29- var id = msg.value.content.about
30- return h('p',
31- about.about === msg.value.author
32- ? h('span', 'self-identifies ')
33- : h('span', 'identifies ', idLink(id)),
34- ' as ',
35- h('a', {href:"#"+about.about},
36- about.name || null,
37- about.image
38- ? h('img.avatar--fullsize', {src: api.blob_url(about.image)})
39- : null
40- )
41- )
41 + var { content: about, author: authorId } = msg.value
42 + var { about: aboutId, name, image, description } = about
4243
44 + if (!aboutId) return null
45 + if (image || description) return null
46 +
47 + return h('About', Name({ aboutId, authorId, name }))
4348 }
4449
45-}
4650
51 + function Name ({ aboutId, authorId, name }) {
52 + if (!name) return null
53 + return h('section -name', [
54 + h('header', when(authorId === aboutId,
55 + 'self-identifies as',
56 + ['identifies ', targetLink(aboutId), ' as']
57 + )),
58 + h('section', h(
59 + 'a -name',
60 + { href: `#${aboutId}` },
61 + name
62 + ))
63 + ])
64 + }
4765
66 + function Image ({ aboutId, authorId, image }) {
67 + if (!image) return null
68 + return h('section -image', [
69 + h('header', when(authorId === aboutId,
70 + 'self-portrays as',
71 + ['portrays ', targetLink(aboutId), ' as']
72 + )),
73 + h('section', h(
74 + 'a -image',
75 + { href: `#${aboutId}` },
76 + h('img', { src: api.blob_url(image) })
77 + ))
78 + ])
79 + }
4880
81 + function Description ({ aboutId, authorId, description }) {
82 + if (!description) return null
83 + return h('section -description', [
84 + h('header', when(authorId === aboutId,
85 + 'self-describes as',
86 + ['describes ', targetLink(aboutId), ' as']
87 + )),
88 + h('section', api.markdown(description))
89 + ])
90 + }
91 +}
92 +
93 +function targetLink (aboutId) {
94 + const content = aboutId.slice(0, 9) + '...'
95 + return h(
96 + 'a -target',
97 + { href: `#${aboutId}` },
98 + content
99 + )
100 +}
modules_basic/index.jsView
@@ -11,8 +11,10 @@
1111 "follow.js": require('./follow.js'),
1212 "invite.js": require('./invite.js'),
1313 "like.js": require('./like.js'),
1414 "markdown.js": require('./markdown.js'),
15 + "message-author.js": require('./message-author.js'),
16 + "message-backlinks.js": require('./message-backlinks.js'),
1517 "message-link.js": require('./message-link.js'),
1618 "message-name.js": require('./message-name.js'),
1719 "message.js": require('./message.js'),
1820 "names.js": require('./names.js'),
@@ -20,8 +22,9 @@
2022 "private.js": require('./private.js'),
2123 "pub.js": require('./pub.js'),
2224 "public.js": require('./public.js'),
2325 "relationships.js": require('./relationships.js'),
26 + "reply.js": require('./reply.js'),
2427 "search-box.js": require('./search-box.js'),
2528 "setup.js": require('./setup'),
2629 "suggest-mentions.js": require('./suggest-mentions.js'),
2730 "thread.js": require('./thread.js'),
modules_basic/message.jsView
@@ -1,122 +1,86 @@
1-var h = require('hyperscript')
2-var u = require('../util')
3-var pull = require('pull-stream')
1 +const fs = require('fs')
2 +const pull = require('pull-stream')
3 +const u = require('../util')
4 +const h = require('../h')
45
5-//var plugs = require('../plugs')
6-//
7-//var message_content = plugs.first(exports.message_content = [])
8-//var message_content_mini = plugs.first(exports.message_content_mini = [])
9-//
10-//var avatar = plugs.first(exports.avatar = [])
11-//var avatar_name = plugs.first(exports.avatar_name = [])
12-//var avatar_link = plugs.first(exports.avatar_link = [])
13-//var message_meta = plugs.map(exports.message_meta = [])
14-//var message_action = plugs.map(exports.message_action = [])
15-//var message_link = plugs.first(exports.message_link = [])
16-//
17-//var sbot_links = plugs.first(exports.sbot_links = [])
18-
196 exports.needs = {
20- message_content: 'first',
21- message_content_mini: 'first',
22- avatar: 'first',
237 avatar_name: 'first',
248 avatar_link: 'first',
25- message_meta: 'map',
269 message_action: 'map',
10 + message_author: 'first',
11 + message_backlinks: 'first',
12 + message_content: 'first',
13 + message_content_mini: 'first',
14 + message_title: 'first',
2715 message_link: 'first',
28-// sbot_links: 'first'
16 + message_meta: 'map',
2917 }
3018
31-exports.gives = 'message_render'
32-
33-function message_content_mini_fallback(msg) {
34- return h('code', msg.value.content.type)
19 +exports.gives = {
20 + message_render: true,
21 + mcss: true
3522 }
3623
3724 exports.create = function (api) {
38-
39- function mini(msg, el) {
40- var div = h('div.message.message--mini',
41- h('div.row',
42- h('div',
43- api.avatar_link(msg.value.author, api.avatar_name(msg.value.author)),
44- h('span.message_content', el)),
45- h('div.message_meta.row', api.message_meta(msg))
46- )
47- )
48- div.setAttribute('tabindex', '0')
49- return div
25 + return {
26 + message_render,
27 + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
5028 }
5129
52- return function (msg, sbot) {
53- var el = api.message_content_mini(msg)
54- if(el) return mini(msg, el)
30 + function message_render (msg, sbot) {
31 + var content = api.message_content_mini(msg)
32 + if (content) return mini(msg, content)
5533
56- var el = api.message_content(msg)
57- if(!el) return mini(msg, message_content_mini_fallback(msg))
34 + content = api.message_content(msg)
35 + if (!content) return mini(msg, message_content_mini_fallback(msg))
5836
59- var links = []
60- for(var k in CACHE) {
61- var _msg = CACHE[k]
62- if(Array.isArray(_msg.content.mentions)) {
63- for(var i = 0; i < _msg.content.mentions.length; i++)
64- if(_msg.content.mentions[i].link == msg.key)
65- links.push(k)
37 + return h('Message', {
38 + 'ev-keydown': navigateToMessageOnEnter,
39 + attributes: {
40 + tabindex: '0'
6641 }
67- }
42 + }, [
43 + h('header.author', api.message_author(msg)),
44 + h('section.title', api.message_title(msg)),
45 + h('section.meta', api.message_meta(msg)),
46 + h('section.content', content),
47 + h('section.action', api.message_action(msg)),
48 + h('footer.backlinks', api.message_backlinks(msg))
49 + ])
6850
69- var backlinks = h('div.backlinks')
70- if(links.length)
71- backlinks.appendChild(h('label', 'backlinks:',
72- h('div', links.map(function (key) {
73- return api.message_link(key)
74- }))
75- ))
51 + function navigateToMessageOnEnter (ev) {
52 + // on enter, hit first meta.
53 + if(ev.keyCode == 13) {
7654
55 + // unless in an input
56 + if (ev.target.nodeName === 'INPUT'
57 + || ev.target.nodeName === 'TEXTAREA') return
7758
78- // pull(
79- // sbot_links({dest: msg.key, rel: 'mentions', keys: true}),
80- // pull.collect(function (err, links) {
81- // if(links.length)
82- // backlinks.appendChild(h('label', 'backlinks:',
83- // h('div', links.map(function (link) {
84- // return message_link(link.key)
85- // }))
86- // ))
87- // })
88- // )
59 + // HACK! (mw)
60 + // there's no exported api to open a new tab. :/
61 + // it's only done in `app.js` module in an`onhashchange` handler.
62 + // sooooooo yeah this shit for now :)
63 + var wtf = h('a', { href: `#${msg.key}` })
64 + msgEl.appendChild(wtf)
65 + wtf.click()
66 + }
67 + }
68 + }
8969
90- var msg = h('div.message',
91- h('div.title.row',
92- h('div.avatar', api.avatar(msg.value.author, 'thumbnail')),
93- h('div.message_meta.row', api.message_meta(msg))
94- ),
95- h('div.message_content', el),
96- h('div.message_actions.row',
97- h('div.actions', api.message_action(msg),
98- h('a', {href: '#' + msg.key}, 'Reply')
99- )
100- ),
101- backlinks,
102- {onkeydown: function (ev) {
103- //on enter, hit first meta.
104- if(ev.keyCode == 13) {
105-
106- // unless in an input
107- if (ev.target.nodeName === 'INPUT'
108- || ev.target.nodeName === 'TEXTAREA') return
109-
110- msg.querySelector('.enter').click()
111- }
112- }}
113- )
114-
115- // ); hyperscript does not seem to set attributes correctly.
116- msg.setAttribute('tabindex', '0')
117-
118- return msg
70 + function mini(msg, el) {
71 + return h('Message -mini', {
72 + attributes: {
73 + tabindex: '0'
74 + }
75 + }, [
76 + h('header.author', api.message_author(msg, { size: 'mini' })),
77 + h('section.meta', api.message_meta(msg)),
78 + h('section.content', el)
79 + ])
11980 }
12081 }
12182
12283
84 +function message_content_mini_fallback(msg) {
85 + return h('code', msg.value.content.type)
86 +}
modules_basic/post.jsView
@@ -11,22 +11,30 @@
1111 //
1212
1313 exports.needs = { message_link: 'first', markdown: 'first' }
1414
15-exports.gives = 'message_content'
15 +exports.gives = {
16 + message_content: true,
17 + message_title: true
18 +}
1619
1720 exports.create = function (api) {
18- return function (data) {
21 + return {
22 + message_content,
23 + message_title
24 + }
25 +
26 + function message_content (data) {
1927 if(!data.value.content || !data.value.content.text) return
2028
21- var root = data.value.content.root
22- var re = !root ? null : h('span', 're: ', api.message_link(root))
23-
2429 return h('div',
25- re,
2630 api.markdown(data.value.content)
2731 )
32 + }
2833
34 + function message_title (data) {
35 + var root = data.value.content && data.value.content.root
36 + return !root ? null : h('span', 're: ', api.message_link(root))
2937 }
3038 }
3139
3240
modules_basic/thread.jsView
@@ -120,10 +120,10 @@
120120 meta.root = thread[0].value.content.root || thread[0].key
121121 meta.channel = thread[0].value.content.channel
122122
123123 var recps = thread[0].value.content.recps
124- var private = thread[0].value.private
125- if(private) {
124 + var priv = thread[0].value['private']
125 + if(priv) {
126126 if(recps)
127127 meta.recps = recps
128128 else
129129 meta.recps = [thread[0].value.author, self_id]
modules_basic/timestamp.jsView
@@ -1,28 +1,46 @@
1-var h = require('hyperscript')
2-var human = require('human-time')
1 +const fs = require('fs')
2 +const h = require('../h')
3 +const human = require('human-time')
34
45 exports.needs = {}
56
6-exports.gives = 'message_meta'
7 +exports.gives = {
8 + timestamp: true,
9 + mcss: true
10 +}
711
812 exports.create = function () {
9-
10- function updateTimestampEl(el) {
11- el.firstChild.nodeValue = human(new Date(el.timestamp))
12- return el
13- }
14-
1513 setInterval(function () {
16- var els = [].slice.call(document.querySelectorAll('.timestamp'))
14 + var els = [].slice.call(document.querySelectorAll('.Timestamp'))
1715 els.forEach(updateTimestampEl)
1816 }, 60e3)
1917
20- return function (msg) {
21- return updateTimestampEl(h('a.enter.timestamp', {
22- href: '#'+msg.key,
23- timestamp: msg.value.timestamp,
24- title: new Date(msg.value.timestamp)
25- }, ''))
18 + return {
19 + timestamp,
20 + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
2621 }
2722
23 + function updateTimestampEl (el) {
24 + var timestamp = Number(el.getAttribute('data-timestamp'))
25 + var display = human(new Date(timestamp)).replace(/minutes/, 'mins')
26 + el.querySelector('a').firstChild.nodeValue = display
27 + return el
28 + }
29 +
30 + function timestamp (msg) {
31 + var { key, value } = msg
32 + var { timestamp } = value
33 + var el = h('Timestamp', {
34 + attributes: {
35 + 'data-timestamp': timestamp
36 + }
37 + }, [
38 + h('a', {
39 + href: `#${key}`,
40 + title: new Date(timestamp)
41 + }, '')
42 + ])
43 + updateTimestampEl(el)
44 + return el
45 + }
2846 }
modules_basic/about.mcssView
@@ -1,0 +1,53 @@
1 +About {
2 + display: flex
3 + flex-wrap: wrap
4 +
5 + section {
6 + header {
7 + a {
8 + -target {
9 +
10 + }
11 + -name {
12 +
13 + }
14 + -image {
15 +
16 + }
17 + }
18 + }
19 +
20 + -name {
21 + display: flex
22 +
23 + header {
24 +
25 + }
26 +
27 + section {
28 + margin-left: .25rem
29 + }
30 + }
31 +
32 + -image {
33 + header {
34 +
35 + }
36 +
37 + section {
38 +
39 + }
40 + }
41 +
42 + -description {
43 + header {
44 +
45 + }
46 +
47 + section {
48 + padding-left: 1em;
49 + padding-right: 1em;
50 + }
51 + }
52 + }
53 +}
modules_basic/message-author.jsView
@@ -1,0 +1,39 @@
1 +const fs = require('fs')
2 +const h = require('../h')
3 +const when = require('@mmckegg/mutant/when')
4 +
5 +exports.needs = {
6 + avatar_link: 'first',
7 + avatar_image: 'first',
8 + avatar_name: 'first',
9 + timestamp: 'first'
10 +}
11 +
12 +exports.gives = {
13 + message_author: true,
14 + mcss: true
15 +}
16 +
17 +exports.create = function (api) {
18 + return {
19 + message_author,
20 + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
21 + }
22 +
23 + function message_author (msg, opts = {}) {
24 + var { size = 'small' } = opts
25 + var { value } = msg
26 + var { author } = value
27 +
28 + return h('MessageAuthor', {
29 + className: `-${size}`
30 + }, [
31 + when(size !== 'mini',
32 + h('section -image', api.avatar_link(author, api.avatar_image(author, 'thumbnail')))
33 + ),
34 + h('section -name', api.avatar_link(author, api.avatar_name(author))),
35 + h('section -timestamp', api.timestamp(msg))
36 + ])
37 + }
38 +}
39 +
modules_basic/message-author.mcssView
@@ -1,0 +1,38 @@
1 +MessageAuthor {
2 + display: flex
3 + flex-direction: column
4 +
5 + section {
6 + -image {
7 + margin-bottom: .3rem
8 + }
9 +
10 + -name {
11 + max-width: 7rem
12 + a { $text-primary }
13 + }
14 +
15 + -timestamp {
16 +
17 + }
18 + }
19 +
20 + -mini {
21 + flex-direction: row
22 +
23 + section {
24 + margin-right: .5rem
25 +
26 + -name {
27 + position: initial
28 + left: initial
29 + min-width: 6.5rem
30 + max-width: none
31 + }
32 +
33 + -timestamp {
34 +
35 + }
36 + }
37 + }
38 +}
modules_basic/message-backlinks.jsView
@@ -1,0 +1,39 @@
1 +const fs = require('fs')
2 +const h = require('../h')
3 +
4 +exports.gives = {
5 + message_backlinks: true,
6 + mcss: true
7 +}
8 +
9 +exports.create = function (api) {
10 + return {
11 + message_backlinks,
12 + mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
13 + }
14 +
15 + function message_backlinks (msg) {
16 + var links = []
17 + for(var k in CACHE) {
18 + var _msg = CACHE[k]
19 + if(Array.isArray(_msg.content.mentions)) {
20 + for(var i = 0; i < _msg.content.mentions.length; i++)
21 + if(_msg.content.mentions[i].link == msg.key)
22 + links.push(k)
23 + }
24 + }
25 +
26 + if (links.length === 0) return null
27 +
28 + return h('MessageBacklinks', [
29 + h('header', 'backlinks:'),
30 + h('ul', links.map(function (link) {
31 + return h('li', [
32 + h('a -backlink', {
33 + href: `#${link}`
34 + }, link)
35 + ])
36 + }))
37 + ])
38 + }
39 +}
modules_basic/message-backlinks.mcssView
@@ -1,0 +1,14 @@
1 +MessageBacklinks {
2 + header {
3 +
4 + }
5 + ul {
6 + li {
7 + a {
8 + -backlink {
9 +
10 + }
11 + }
12 + }
13 + }
14 +}
modules_basic/message.mcssView
@@ -1,0 +1,80 @@
1 +Message {
2 + padding: 1rem .5rem 1rem 7.5rem
3 + border-top: solid 1px gainsboro
4 + min-height: 5rem
5 +
6 + position: relative
7 + display: flex
8 + flex-direction: row
9 + flex-wrap: wrap
10 + justify-content: flex-end
11 +
12 + header.author {
13 + position: absolute
14 + left: .5rem
15 + }
16 +
17 + section.title {
18 + flex-grow: 1
19 + font-size: .9rem
20 + }
21 +
22 + section.meta {
23 + display: flex
24 + a {
25 + margin-left: .2rem
26 + $text-subtle
27 + }
28 +
29 + input{
30 + margin-right: 0
31 + order: 99
32 + }
33 + }
34 +
35 + section.content {
36 + flex-basis: 100%
37 +
38 + (img) {
39 + max-width: 100%
40 + }
41 + }
42 +
43 + section.action {
44 + flex-basis: 100%
45 + display: flex
46 + justify-content: flex-end
47 +
48 + a {
49 + margin-left: .5em
50 + }
51 + }
52 +
53 + footer.backlinks {
54 +
55 + }
56 +
57 +
58 + -mini {
59 + font-size: .9rem
60 + justify-content: flex-start
61 + padding: .25rem .5rem
62 + min-height: inherit
63 +
64 + header.author {
65 + order: 0
66 + position: initial
67 + left: initial
68 + }
69 +
70 + section.content {
71 + order: 1
72 + flex-basis: initial
73 + flex-grow: 1
74 + }
75 +
76 + section.meta {
77 + order: 2
78 + }
79 + }
80 +}
modules_basic/reply.jsView
@@ -1,0 +1,9 @@
1 +var h = require('../h')
2 +
3 +exports.gives = 'message_action'
4 +
5 +exports.create = function () {
6 + return function (msg) {
7 + return h('a', { href: '#' + msg.key }, 'Reply')
8 + }
9 +}
modules_basic/timestamp.mcssView
@@ -1,0 +1,7 @@
1 +Timestamp {
2 + a {
3 + $text-subtle
4 + font-size: .8rem
5 + }
6 +}
7 +
modules_core/app.jsView
@@ -1,13 +1,19 @@
11 var plugs = require('../plugs')
22 var h = require('hyperscript')
3 +var insertCss = require('insert-css')
34
45 module.exports = {
5- needs: {screen_view: 'first'},
6 + needs: {
7 + screen_view: 'first',
8 + styles: 'first'
9 + },
610 gives: 'app',
711 create: function (api) {
812 return function () {
9- document.head.appendChild(h('style', require('../style.css.json')))
13 + process.nextTick(function () {
14 + insertCss(api.styles())
15 + })
1016
1117 window.addEventListener('error', window.onError = function (e) {
1218 document.body.appendChild(h('div.error',
1319 h('h1', e.message),
modules_core/index.jsView
@@ -6,7 +6,9 @@
66 "file-input.js": require('./file-input.js'),
77 "menu.js": require('./menu.js'),
88 "message-confirm.js": require('./message-confirm.js'),
99 "tabs.js": require('./tabs.js'),
10- "sbot.js": require('./sbot.js')
10 + "sbot.js": require('./sbot.js'),
11 + "style-mixins.js": require('./style-mixins.js'),
12 + "styles.js": require('./styles.js')
1113 }
1214
modules_core/style-mixins.jsView
@@ -1,0 +1,22 @@
1 +
2 +const mixins = `
3 + $text-primary {
4 + color: black
5 + }
6 +
7 + $text-subtle {
8 + color: gray
9 + }
10 +`
11 +
12 +module.exports = {
13 + gives: {
14 + mcss: true
15 + },
16 + create: function (api) {
17 + return {
18 + mcss: () => mixins
19 + }
20 + }
21 +}
22 +
modules_core/styles.jsView
@@ -1,0 +1,34 @@
1 +var h = require('../h')
2 +var compile = require('micro-css')
3 +var fs = require('fs')
4 +var Path = require('path')
5 +
6 +// TODO distribute these styles across all
7 +// the relevant modules, not as a core style.
8 +var coreStyle = fs.readFileSync(Path.join(__dirname, '../style.css'))
9 +
10 +module.exports = {
11 + needs: {
12 + mcss: 'map',
13 + css: 'map'
14 + },
15 + gives: {
16 + mcss: true,
17 + css: true,
18 + styles: true
19 + },
20 + create: function (api) {
21 + var styles = ''
22 + process.nextTick(function () {
23 + var mcss = api.mcss().join('\n')
24 + var css = api.css().join('\n')
25 + styles = coreStyle + compile(mcss) + css
26 + })
27 + return {
28 + styles: function () { return styles },
29 + // export empty styles
30 + mcss: function () { return '' },
31 + css: function () { return '' }
32 + }
33 + }
34 +}
modules_extra/git.jsView
@@ -33,9 +33,10 @@
3333
3434 exports.gives = {
3535 message_action: true,
3636 message_meta: true,
37- message_content: true
37 + message_content: true,
38 + message_title: true
3839 }
3940
4041
4142 var self_id = require('../keys').id
@@ -301,10 +302,8 @@
301302 if(c.type === 'git-repo') {
302303 var branchesT, tagsT, openIssuesT, closedIssuesT, openPRsT, closedPRsT
303304 var forksT
304305 var div = h('div',
305- h('p', 'git repo ', repoName(msg.key)),
306- c.upstream ? h('p', 'fork of ', repoLink(c.upstream)) : '',
307306 h('p', h('code', 'ssb://' + msg.key)),
308307 h('div.git-table-wrapper', {style: {'max-height': '12em'}},
309308 h('table',
310309 branchesT = tableRows(h('tr',
@@ -409,9 +408,8 @@
409408 }
410409
411410 if(c.type === 'git-update') {
412411 return [
413- h('p', 'pushed to ', repoLink(c.repo)),
414412 c.refs ? h('ul', Object.keys(c.refs).map(function (ref) {
415413 var rev = c.refs[ref]
416414 return h('li',
417415 shortRefName(ref) + ': ',
@@ -449,25 +447,54 @@
449447 }
450448
451449 if(c.type === 'issue') {
452450 return h('div',
453- h('p', 'opened issue on ', repoLink(c.project)),
454451 c.title ? h('h4', c.title) : '',
455452 api.markdown(c)
456453 )
457454 }
458455
459456 if(c.type === 'pull-request') {
460457 return h('div',
461- h('p', 'opened pull-request ',
462- 'to ', repoLink(c.repo), ':', c.branch, ' ',
463- 'from ', repoLink(c.head_repo), ':', c.head_branch),
464458 c.title ? h('h4', c.title) : '',
465459 api.markdown(c)
466460 )
467461 }
468462 },
469463
464 + message_title: function (msg) {
465 + var c = msg.value.content
466 +
467 + if(c.type === 'git-repo') {
468 + return h('div', [
469 + h('p', 'git repo ', repoName(msg.key)),
470 + c.upstream ? h('p', 'fork of ', repoLink(c.upstream)) : ''
471 + ])
472 + }
473 +
474 + if(c.type === 'git-update') {
475 + return h('p', 'pushed to ', repoLink(c.repo))
476 + }
477 +
478 + if(c.type === 'issue-edit' || (c.type === 'post' && c.text === '')) {
479 + return h('div', [
480 + c.issue ? renderIssueEdit(c) : null,
481 + c.issues ? c.issues.map(renderIssueEdit) : null
482 + ])
483 + }
484 +
485 + if(c.type === 'issue') {
486 + return h('p', 'opened issue on ', repoLink(c.project))
487 + }
488 +
489 + if(c.type === 'pull-request') {
490 + return h('p', 'opened pull-request ', [
491 + 'to ', repoLink(c.repo), ':', c.branch, ' ',
492 + 'from ', repoLink(c.head_repo), ':', c.head_branch
493 + ])
494 + }
495 + },
496 +
470497 message_meta: function (msg, sbot) {
471498 var type = msg.value.content.type
472499 if (type === 'issue' || type === 'pull-request') {
473500 var el = h('em', '...')
@@ -515,5 +542,4 @@
515542 }
516543 }
517544 }
518545
519-
modules_extra/raw.jsView
@@ -28,10 +28,11 @@
2828 return h('input', {
2929 type: 'checkbox',
3030 title: 'View Data',
3131 onclick: function () {
32- var msgEl = this.parentNode.parentNode.parentNode
33- var msgContentEl = msgEl.querySelector('.message_content')
32 + // HACK (mw) yo we need a better way to replace the content
33 + var msgEl = this.parentNode.parentNode
34 + var msgContentEl = msgEl.querySelector('.\\.content')
3435 if (this.checked) {
3536 // move away the content
3637 while (el = msgContentEl.firstChild)
3738 tmp.appendChild(el)
package.jsonView
@@ -7,11 +7,14 @@
77 "type": "git",
88 "url": "git://github.com/dominictarr/patchbay.git"
99 },
1010 "dependencies": {
11 + "@mmckegg/mutant": "^3.10.1",
12 + "brfs": "^1.4.3",
1113 "cont": "^1.0.3",
1214 "dataurl-": "^0.1.0",
1315 "depject": "^3.0.0",
16 + "es2040": "^1.2.4",
1417 "hjson": "^2.0.3",
1518 "human-time": "0.0.1",
1619 "hypercombo": "0.1.0",
1720 "hypercrop": "^1.0.1",
@@ -19,11 +22,13 @@
1922 "hyperlightbox": "^0.1.3",
2023 "hyperprogress": "0.1.0",
2124 "hyperscript": "^1.4.7",
2225 "hypertabs": "^3.0.0",
26 + "insert-css": "^2.0.0",
2327 "is-visible": "^2.1.1",
2428 "kvgraph": "^0.1.0",
2529 "map-filter-reduce": "^3.0.1",
30 + "micro-css": "^0.6.2",
2631 "mime-types": "^2.1.11",
2732 "moment": "^2.13.0",
2833 "open-external": "^0.1.1",
2934 "peaks.js": "^0.4.7",
@@ -34,8 +39,9 @@
3439 "pull-reconnect": "^0.0.3",
3540 "pull-scroll": "^0.3.3",
3641 "pull-stream": "^3.4.5",
3742 "scuttlebot": "^8.7.2",
43 + "setimmediate": "^1.0.5",
3844 "simple-mime": "^0.1.0",
3945 "split-buffer": "^1.0.0",
4046 "ssb-avatar": "^0.2.0",
4147 "ssb-blobs": "^0.1.7",
@@ -60,12 +66,18 @@
6066 "electro": "^2.0.3",
6167 "electron": "^1.4.10",
6268 "indexhtmlify": "^1.3.1"
6369 },
70 + "browserify": {
71 + "transform": [
72 + "brfs",
73 + "es2040"
74 + ]
75 + },
6476 "scripts": {
65- "lite": "node scripts/style.js && mkdir -p build && browserify index.js | indexhtmlify --title patchbay > build/index.html",
77 + "lite": "mkdir -p build && browserify index.js | indexhtmlify --title patchbay > build/index.html",
6678 "start": "electro index.js",
67- "bundle": "node scripts/style.js && mkdir -p build && browselectrify index.js > build/bundle.js",
79 + "bundle": "mkdir -p build && browselectrify index.js > build/bundle.js",
6880 "rebuild": "npm rebuild --runtime=electron --target=$(electron -v) --abi=$(electron --abi) --disturl=https://atom.io/download/atom-shell",
6981 "graph": "node index.js | dot -Tsvg > graph.svg",
7082 "test": "set -e; for t in test/*.js; do node $t; done"
7183 },
scripts/create-index.jsView
@@ -1,8 +1,0 @@
1-var fs = require('fs')
2-var path = require('path')
3-
4-fs.writeFileSync(
5- path.join(__dirname, '..', 'style.css.json'),
6- JSON.stringify(fs.readFileSync(path.join(__dirname, '..', 'style.css'), 'utf8'))
7-)
8-
scripts/style.jsView
@@ -1,8 +1,0 @@
1-var fs = require('fs')
2-var path = require('path')
3-
4-fs.writeFileSync(
5- path.join(__dirname, '..', 'style.css.json'),
6- JSON.stringify(fs.readFileSync(path.join(__dirname, '..', 'style.css'), 'utf8'))
7-)
8-
style.cssView
@@ -176,8 +176,9 @@
176176 float: right;
177177 }
178178
179179 /* messages */
180 +/*to be deprecated once message preview is converted to modular style*/
180181
181182 .message {
182183 position: relative;
183184 flex-basis: 0;
@@ -192,15 +193,8 @@
192193 .message:hover {
193194 background: #f9f9f9;
194195 }
195196
196-.message--mini {
197- font-size: 1em;
198- margin: 0;
199- padding: .2em;
200- border: none;
201- background: inherit;
202-}
203197
204198 .message_content div > span {
205199 font-size: 0.9em;
206200 margin-bottom: 0.7em;
@@ -315,11 +309,16 @@
315309 .avatar--thumbnail {
316310 width: 2.5em;
317311 height: 2.5em;
318312 float: left;
319- margin-right: .5ex;
313 + margin: 0 .25ex;
320314 }
321315
316 +.\.meta .avatar--thumbnail {
317 + width: 1.9em;
318 + height: 1.9em;
319 +}
320 +
322321 .avatar--fullsize {
323322 width: 50%;
324323 }
325324
h.jsView
@@ -1,0 +1,1 @@
1 +module.exports = require('micro-css/h')(require('@mmckegg/mutant/html-element'))

Built with git-ssb-web