Commit 7c22ec2ce201b04fa7c787e4f7833eb28065327b
meta message styling, more legible raw message
mix irving committed on 2/4/2017, 8:57:02 AMParent: 652e17c6ca36341c8b5f36c66780d9bae9bfc721
Files changed
| modules_basic/like.js | changed |
| modules_basic/message/render.js | changed |
| modules_basic/message/render.mcss | changed |
| modules_extra/channel.js | changed |
| modules_extra/raw.js | changed |
| modules_basic/like.js | ||
|---|---|---|
| @@ -39,20 +39,20 @@ | ||
| 39 | 39 … | )) |
| 40 | 40 … | votes.push({source: CACHE[k].author, dest: k, rel: 'vote'}) |
| 41 | 41 … | } |
| 42 | 42 … | |
| 43 | - if(votes.length === 1) | |
| 44 | - digs.textContent = ' 1 Dig' | |
| 45 | - else if(votes.length > 1) | |
| 46 | - digs.textContent = ' ' + votes.length + ' Digs' | |
| 43 … | + if (votes.length === 0) return | |
| 47 | 44 … | |
| 45 … | + digs.textContent = votes.length > 4 | |
| 46 … | + ? votes.length + ' 🗸' | |
| 47 … | + : Array(votes.length).fill('🗸').join('') | |
| 48 … | + | |
| 48 | 49 … | pull( |
| 49 | - pull.values(votes.map(vote => { | |
| 50 | - return api.avatar_name(vote.source) | |
| 51 | - })), | |
| 52 | - pull.collect(function (err, ary) { | |
| 53 | - digs.title = ary.map(x => x.innerHTML).join(" ") | |
| 54 | - }) | |
| 50 … | + pull.values(votes.map(vote => api.avatar_name(vote.source))), | |
| 51 … | + pull.collect((err, ary) => { | |
| 52 … | + if (err) console.error(err) | |
| 53 … | + digs.title = 'Dug by:\n' + ary.map(x => x.innerHTML).join("\n") | |
| 54 … | + }) | |
| 55 | 55 … | ) |
| 56 | 56 … | |
| 57 | 57 … | return digs |
| 58 | 58 … | } |
| modules_basic/message/render.js | ||
|---|---|---|
| @@ -41,8 +41,9 @@ | ||
| 41 | 41 … | h('header.author', api.message_author(msg)), |
| 42 | 42 … | h('section.title', api.message_title(msg)), |
| 43 | 43 … | h('section.meta', api.message_meta(msg)), |
| 44 | 44 … | h('section.content', content), |
| 45 … | + h('section.raw-content'), | |
| 45 | 46 … | h('section.action', api.message_action(msg)), |
| 46 | 47 … | h('footer.backlinks', api.message_backlinks(msg)) |
| 47 | 48 … | ]) |
| 48 | 49 … | return msgEl |
| @@ -74,9 +75,10 @@ | ||
| 74 | 75 … | } |
| 75 | 76 … | }, [ |
| 76 | 77 … | h('header.author', api.message_author(msg, { size: 'mini' })), |
| 77 | 78 … | h('section.meta', api.message_meta(msg)), |
| 78 | - h('section.content', el) | |
| 79 … | + h('section.content', el), | |
| 80 … | + h('section.raw-content') | |
| 79 | 81 … | ]) |
| 80 | 82 … | } |
| 81 | 83 … | } |
| 82 | 84 … | |
| modules_basic/message/render.mcss | ||
|---|---|---|
| @@ -19,17 +19,16 @@ | ||
| 19 | 19 … | } |
| 20 | 20 … | |
| 21 | 21 … | section.meta { |
| 22 | 22 … | display: flex |
| 23 … | + align-items: center | |
| 24 … | + * { | |
| 25 … | + margin-left: .4rem | |
| 26 … | + } | |
| 27 … | + | |
| 23 | 28 … | a { |
| 24 | - margin-left: .2rem | |
| 25 | 29 … | $textSubtle |
| 26 | 30 … | } |
| 27 | - | |
| 28 | - input{ | |
| 29 | - margin-right: 0 | |
| 30 | - order: 99 | |
| 31 | - } | |
| 32 | 31 … | } |
| 33 | 32 … | |
| 34 | 33 … | section.content { |
| 35 | 34 … | flex-basis: 100% |
| @@ -38,8 +37,24 @@ | ||
| 38 | 37 … | max-width: 100% |
| 39 | 38 … | } |
| 40 | 39 … | } |
| 41 | 40 … | |
| 41 … | + section.raw-content { | |
| 42 … | + margin-left: -7rem | |
| 43 … | + flex-basis: 130% | |
| 44 … | + pre { | |
| 45 … | + border: 1px gainsboro solid | |
| 46 … | + padding: .8rem | |
| 47 … | + | |
| 48 … | + span { | |
| 49 … | + font-weight: 600 | |
| 50 … | + } | |
| 51 … | + a { | |
| 52 … | + word-break: break-all | |
| 53 … | + } | |
| 54 … | + } | |
| 55 … | + } | |
| 56 … | + | |
| 42 | 57 … | section.action { |
| 43 | 58 … | flex-basis: 100% |
| 44 | 59 … | display: flex |
| 45 | 60 … | justify-content: flex-end |
| @@ -75,6 +90,11 @@ | ||
| 75 | 90 … | |
| 76 | 91 … | section.meta { |
| 77 | 92 … | order: 2 |
| 78 | 93 … | } |
| 94 … | + | |
| 95 … | + section.raw-content { | |
| 96 … | + order: 3 | |
| 97 … | + margin-left: 0 | |
| 98 … | + } | |
| 79 | 99 … | } |
| 80 | 100 … | } |
| modules_extra/channel.js | ||
|---|---|---|
| @@ -40,9 +40,12 @@ | ||
| 40 | 40 … | |
| 41 | 41 … | function message_meta (msg) { |
| 42 | 42 … | var chan = msg.value.content.channel |
| 43 | 43 … | if (chan) |
| 44 | - return h('a', {href: '##'+chan}, '#'+chan) | |
| 44 … | + return h('a', { | |
| 45 … | + href: '##'+chan, | |
| 46 … | + order: 98 | |
| 47 … | + }, '#'+chan) | |
| 45 | 48 … | } |
| 46 | 49 … | |
| 47 | 50 … | function screen_view (path) { |
| 48 | 51 … | if(path[0] === '#') { |
| modules_extra/raw.js | ||
|---|---|---|
| @@ -1,40 +1,37 @@ | ||
| 1 | 1 … | var h = require('hyperscript') |
| 2 | 2 … | |
| 3 | -// from ssb-ref | |
| 4 | -var refRegex = /((?:@|%|&)[A-Za-z0-9\/+]{43}=\.[\w\d]+)/g | |
| 5 | - | |
| 6 | 3 … | exports.gives = 'message_meta' |
| 7 | 4 … | |
| 8 | -function linkify (text) { | |
| 9 | - var arr = text.split(refRegex) | |
| 10 | - for (var i = 1; i < arr.length; i += 2) { | |
| 11 | - arr[i] = h('a', {href: '#' + arr[i]}, arr[i]) | |
| 12 | - } | |
| 13 | - return arr | |
| 14 | -} | |
| 15 | 5 … | |
| 16 | 6 … | exports.create = function (api) { |
| 17 | 7 … | return function (msg) { |
| 18 | 8 … | var tmp = h('div') |
| 19 | 9 … | var el |
| 20 | 10 … | var pre |
| 21 | - return h('input', { | |
| 22 | - type: 'checkbox', | |
| 23 | - title: 'View Data', | |
| 11 … | + const symbol = '⛭' | |
| 12 … | + var clicked = false | |
| 13 … | + | |
| 14 … | + return h('a', { | |
| 15 … | + title: 'View raw data', | |
| 16 … | + style: { | |
| 17 … | + order: 99, | |
| 18 … | + color: 'gray', | |
| 19 … | + 'font-size': '1rem', | |
| 20 … | + cursor: 'pointer', | |
| 21 … | + }, | |
| 24 | 22 … | onclick: function () { |
| 23 … | + clicked = !clicked | |
| 24 … | + | |
| 25 | 25 … | // HACK (mw) yo we need a better way to replace the content |
| 26 | 26 … | var msgEl = this.parentNode.parentNode |
| 27 | - var msgContentEl = msgEl.querySelector('.\\.content') | |
| 28 | - if (this.checked) { | |
| 27 … | + var msgContentEl = msgEl.querySelector('.\\.raw-content') | |
| 28 … | + if (clicked) { | |
| 29 | 29 … | // move away the content |
| 30 | 30 … | while (el = msgContentEl.firstChild) |
| 31 | 31 … | tmp.appendChild(el) |
| 32 | 32 … | // show the raw stuff |
| 33 | - if (!pre) pre = h('pre', linkify(JSON.stringify({ | |
| 34 | - key: msg.key, | |
| 35 | - value: msg.value | |
| 36 | - }, 0, 2))) | |
| 33 … | + if (!pre) pre = h('pre', buildRawMsg(msg) ) | |
| 37 | 34 … | msgContentEl.appendChild(pre) |
| 38 | 35 … | } else { |
| 39 | 36 … | // hide the raw stuff |
| 40 | 37 … | msgContentEl.removeChild(pre) |
| @@ -42,8 +39,45 @@ | ||
| 42 | 39 … | while (el = tmp.firstChild) |
| 43 | 40 … | msgContentEl.appendChild(el) |
| 44 | 41 … | } |
| 45 | 42 … | } |
| 46 | - }) | |
| 43 … | + }, symbol) | |
| 47 | 44 … | } |
| 48 | 45 … | } |
| 49 | 46 … | |
| 47 … | + | |
| 48 … | +function buildRawMsg (msg) { | |
| 49 … | + return colorKeys(linkify( | |
| 50 … | + JSON.stringify({ | |
| 51 … | + key: msg.key, | |
| 52 … | + value: msg.value | |
| 53 … | + }, 0, 2) | |
| 54 … | + )) | |
| 55 … | +} | |
| 56 … | + | |
| 57 … | +function colorKeys (chunks) { | |
| 58 … | + var newArray = [] | |
| 59 … | + chunks.forEach(chunk => { | |
| 60 … | + if (typeof chunk !== 'string') return newArray.push(chunk) | |
| 61 … | + | |
| 62 … | + var arr = chunk.split(/("[^"]+":)/) | |
| 63 … | + for (var i = 1; i < arr.length; i += 2) { | |
| 64 … | + arr[i] = h('span', arr[i]) | |
| 65 … | + } | |
| 66 … | + newArray = [...newArray, ...arr] | |
| 67 … | + }) | |
| 68 … | + | |
| 69 … | + return newArray | |
| 70 … | +} | |
| 71 … | + | |
| 72 … | +function linkify (text) { | |
| 73 … | + // from ssb-ref | |
| 74 … | + var refRegex = /((?:@|%|&)[A-Za-z0-9\/+]{43}=\.[\w\d]+)/g | |
| 75 … | + | |
| 76 … | + var arr = text.split(refRegex) | |
| 77 … | + for (var i = 1; i < arr.length; i += 2) { | |
| 78 … | + arr[i] = h('a', {href: '#' + arr[i]}, arr[i]) | |
| 79 … | + } | |
| 80 … | + return arr | |
| 81 … | +} | |
| 82 … | + | |
| 83 … | + | |
Built with git-ssb-web