Commit 53cf077425b3a9a22877b44e927c7bcc36fb08e8
Merge branch 'avatar-sizes'
Dominic Tarr committed on 7/25/2016, 5:07:30 AMParent: 52daeae1fcff1fca37ecf65e1ff73d7a80bea2cf
Parent: a3e5002b4bcd5008621def698c4febc157444093
Files changed
| modules/about.js | changed |
| modules/avatar-edit.js | changed |
| modules/avatar-image.js | changed |
| modules/avatar-profile.js | changed |
| modules/avatar.js | changed |
| modules/follow.js | changed |
| modules/message.js | changed |
| style.css | changed |
| modules/about.js | ||
|---|---|---|
| @@ -26,9 +26,9 @@ | ||
| 26 | 26 | ' as ', |
| 27 | 27 | h('a', {href:"#"+about.about}, |
| 28 | 28 | about.name || null, |
| 29 | 29 | about.image |
| 30 | - ? h('img', {src: blob_url(about.image)}) | |
| 30 | + ? h('img.avatar--fullsize', {src: blob_url(about.image)}) | |
| 31 | 31 | : null |
| 32 | 32 | ) |
| 33 | 33 | ) |
| 34 | 34 | |
| modules/avatar-edit.js | ||
|---|---|---|
| @@ -36,13 +36,13 @@ | ||
| 36 | 36 | } |
| 37 | 37 | |
| 38 | 38 | exports.avatar_edit = function (id) { |
| 39 | 39 | |
| 40 | - var img = h('img', {src: blob_url(default_avatar)}) | |
| 40 | + var img = h('img.avatar--large', {src: blob_url(default_avatar)}) | |
| 41 | 41 | var lb = hyperlightbox() |
| 42 | 42 | var name_input = h('input', {placeholder: 'rename'}) |
| 43 | 43 | var name = avatar_name(id) |
| 44 | - var selected = null | |
| 44 | + var selected = null, selected_data = null | |
| 45 | 45 | |
| 46 | 46 | getAvatar({links: sbot_links}, self_id, id, function (err, avatar) { |
| 47 | 47 | if (err) return console.error(err) |
| 48 | 48 | //don't show user has already selected an avatar. |
| @@ -50,8 +50,33 @@ | ||
| 50 | 50 | if(ref.isBlob(avatar.image)) |
| 51 | 51 | img.src = blob_url(avatar.image) |
| 52 | 52 | }) |
| 53 | 53 | |
| 54 | + var also_pictured = h('div.profile__alsopicturedas.wrap') | |
| 55 | + | |
| 56 | + pull( | |
| 57 | + sbot_links({dest: id, rel: 'about', values: true}), | |
| 58 | + pull.map(function (e) { | |
| 59 | + return e.value.content.image | |
| 60 | + }), | |
| 61 | + pull.filter(function (e) { | |
| 62 | + return e && 'string' == typeof e.link | |
| 63 | + }), | |
| 64 | + pull.unique('link'), | |
| 65 | + pull.drain(function (image) { | |
| 66 | + also_pictured.appendChild( | |
| 67 | + h('a', {href:'#', onclick: function (ev) { | |
| 68 | + ev.stopPropagation() | |
| 69 | + ev.preventDefault() | |
| 70 | + selected = image | |
| 71 | + img.src = blob_url(image.link || image) | |
| 72 | + }}, | |
| 73 | + h('img.avatar--thumbnail', {src: blob_url(image)}) | |
| 74 | + ) | |
| 75 | + ) | |
| 76 | + }) | |
| 77 | + ) | |
| 78 | + | |
| 54 | 79 | return h('div.row.profile', |
| 55 | 80 | lb, |
| 56 | 81 | img, |
| 57 | 82 | h('div.column.profile__info', |
| @@ -61,9 +86,25 @@ | ||
| 61 | 86 | hyperfile.asDataURL(function (data) { |
| 62 | 87 | var el = crop(data, function (err, data) { |
| 63 | 88 | if(data) { |
| 64 | 89 | img.src = data |
| 65 | - selected = dataurl.parse(data) | |
| 90 | + pull( | |
| 91 | + pull.once(dataurl.parse(data)), | |
| 92 | + sbot_blobs_add(function (err, hash) { | |
| 93 | + //TODO. Alerts are EVIL. | |
| 94 | + //I use them only in a moment of weakness. | |
| 95 | + | |
| 96 | + if(err) return alert(err.stack) | |
| 97 | + selected = { | |
| 98 | + link: hash, | |
| 99 | + size: selected.data.length, | |
| 100 | + type: selected.mimetype, | |
| 101 | + width: 512, | |
| 102 | + height: 512 | |
| 103 | + } | |
| 104 | + | |
| 105 | + }) | |
| 106 | + ) | |
| 66 | 107 | } |
| 67 | 108 | lb.close() |
| 68 | 109 | }) |
| 69 | 110 | lb.show(el) |
| @@ -71,30 +112,15 @@ | ||
| 71 | 112 | h('button', 'update', {onclick: function () { |
| 72 | 113 | if(name_input.value) |
| 73 | 114 | name.textContent = name_input.value |
| 74 | 115 | |
| 75 | - if(selected) { | |
| 76 | - pull( | |
| 77 | - pull.once(selected.data), | |
| 78 | - sbot_blobs_add(function (err, hash) { | |
| 79 | - //TODO. Alerts are EVIL. | |
| 80 | - //I use them only in a moment of weakness. | |
| 81 | - if(err) return alert(err.stack) | |
| 82 | - confirm({ | |
| 83 | - type: 'about', | |
| 84 | - about: id, | |
| 85 | - name: name_input.value || undefined, | |
| 86 | - image: { | |
| 87 | - link: hash, | |
| 88 | - size: selected.data.length, | |
| 89 | - type: selected.mimetype, | |
| 90 | - width: 512, | |
| 91 | - height: 512 | |
| 92 | - } | |
| 93 | - }) | |
| 94 | - }) | |
| 95 | - ) | |
| 96 | - } | |
| 116 | + if(selected) | |
| 117 | + confirm({ | |
| 118 | + type: 'about', | |
| 119 | + about: id, | |
| 120 | + name: name_input.value || undefined, | |
| 121 | + image: selected | |
| 122 | + }) | |
| 97 | 123 | else if(input.value) //name only |
| 98 | 124 | confirm({ |
| 99 | 125 | type: 'about', |
| 100 | 126 | about: id, |
| @@ -102,9 +128,20 @@ | ||
| 102 | 128 | }) |
| 103 | 129 | else |
| 104 | 130 | //another moment of weakness |
| 105 | 131 | alert('must select a name or image') |
| 106 | - }}) | |
| 132 | + }}), | |
| 133 | + also_pictured | |
| 107 | 134 | ) |
| 108 | 135 | ) |
| 109 | 136 | } |
| 110 | 137 | |
| 138 | + | |
| 139 | + | |
| 140 | + | |
| 141 | + | |
| 142 | + | |
| 143 | + | |
| 144 | + | |
| 145 | + | |
| 146 | + | |
| 147 | + | |
| modules/avatar-image.js | ||
|---|---|---|
| @@ -10,10 +10,13 @@ | ||
| 10 | 10 | var id = require('../keys').id |
| 11 | 11 | |
| 12 | 12 | var default_avatar = '&qjeAs8+uMXLlyovT4JnEpMwTNDx/QXHfOl2nv2u0VCM=.sha256' |
| 13 | 13 | |
| 14 | -exports.avatar_image = function (author) { | |
| 15 | - var img = h('img', {src: blob_url(default_avatar)}) | |
| 14 | +exports.avatar_image = function (author, classes) { | |
| 15 | + classes = classes || '' | |
| 16 | + if(classes && 'string' === typeof classes) classes = '.avatar--'+classes | |
| 17 | + | |
| 18 | + var img = h('img'+classes, {src: blob_url(default_avatar)}) | |
| 16 | 19 | getAvatar({links: sbot_links}, id, author, function (err, avatar) { |
| 17 | 20 | if (err) return console.error(err) |
| 18 | 21 | if(ref.isBlob(avatar.image)) |
| 19 | 22 | img.src = blob_url(avatar.image) |
| modules/avatar-profile.js | ||
|---|---|---|
| @@ -12,18 +12,17 @@ | ||
| 12 | 12 | |
| 13 | 13 | function streamToList(stream, el) { |
| 14 | 14 | pull( |
| 15 | 15 | stream, |
| 16 | -// pull.unique(function (e) { return e }), | |
| 17 | 16 | pull.drain(function (item) { |
| 18 | 17 | if(item) el.appendChild(item) |
| 19 | 18 | }) |
| 20 | 19 | ) |
| 21 | 20 | return el |
| 22 | 21 | } |
| 23 | 22 | |
| 24 | 23 | function image_link (id) { |
| 25 | - return h('a', {href:'#'+id}, avatar_image(id)) | |
| 24 | + return h('a', {href:'#'+id}, avatar_image(id, 'thumbnail')) | |
| 26 | 25 | } |
| 27 | 26 | |
| 28 | 27 | exports.avatar_profile = function (id) { |
| 29 | 28 | return h('div.column.profile', |
| @@ -48,12 +47,4 @@ | ||
| 48 | 47 | ) |
| 49 | 48 | ) |
| 50 | 49 | } |
| 51 | 50 | |
| 52 | - | |
| 53 | - | |
| 54 | - | |
| 55 | - | |
| 56 | - | |
| 57 | - | |
| 58 | - | |
| 59 | - | |
| modules/avatar.js | ||
|---|---|---|
| @@ -5,12 +5,12 @@ | ||
| 5 | 5 | var plugs = require('../plugs') |
| 6 | 6 | var avatar_name = plugs.first(exports.avatar_name = []) |
| 7 | 7 | var avatar_image = plugs.first(exports.avatar_image = []) |
| 8 | 8 | |
| 9 | -exports.avatar = function (author) { | |
| 9 | +exports.avatar = function (author, classes) { | |
| 10 | 10 | return h('a.avatar', |
| 11 | 11 | {href:'#'+author}, |
| 12 | - avatar_image(author), | |
| 12 | + avatar_image(author, classes), | |
| 13 | 13 | avatar_name(author) |
| 14 | 14 | ) |
| 15 | 15 | } |
| 16 | 16 | |
| modules/follow.js | ||
|---|---|---|
| @@ -10,9 +10,9 @@ | ||
| 10 | 10 | |
| 11 | 11 | if(msg.value.content.type == 'contact' && msg.value.content.contact) { |
| 12 | 12 | return h('div.contact', |
| 13 | 13 | 'follows', |
| 14 | - avatar(msg.value.content.contact) | |
| 14 | + avatar(msg.value.content.contact, 'thumbnail') | |
| 15 | 15 | ) |
| 16 | 16 | } |
| 17 | 17 | } |
| 18 | 18 | |
| modules/message.js | ||
|---|---|---|
| @@ -32,9 +32,9 @@ | ||
| 32 | 32 | ) |
| 33 | 33 | |
| 34 | 34 | var msg = h('div.message', |
| 35 | 35 | h('div.title.row', |
| 36 | - h('div.avatar', avatar(msg.value.author)), | |
| 36 | + h('div.avatar', avatar(msg.value.author, 'thumbnail')), | |
| 37 | 37 | h('div.message_meta.row', message_meta(msg)) |
| 38 | 38 | ), |
| 39 | 39 | h('div.message_content', el), |
| 40 | 40 | h('div.message_actions.row', |
| style.css | ||
|---|---|---|
| @@ -52,9 +52,9 @@ | ||
| 52 | 52 | overflow-x: hidden; |
| 53 | 53 | } |
| 54 | 54 | |
| 55 | 55 | |
| 56 | -img { | |
| 56 | +.message img { | |
| 57 | 57 | max-width: 100%; |
| 58 | 58 | display: block; |
| 59 | 59 | } |
| 60 | 60 | |
| @@ -211,27 +211,32 @@ | ||
| 211 | 211 | .avatar { |
| 212 | 212 | display: flex; |
| 213 | 213 | flex-direction: row; |
| 214 | 214 | } |
| 215 | -.avatar img { | |
| 215 | + | |
| 216 | +.avatar--large { | |
| 217 | + width: 256px; | |
| 218 | + height: 256px; | |
| 219 | + border: 1px solid #eee; | |
| 220 | +} | |
| 221 | + | |
| 222 | +.avatar--thumbnail { | |
| 216 | 223 | width: 40px; |
| 217 | 224 | height: 40px; |
| 218 | 225 | margin-right: 3px; |
| 219 | 226 | border: 1px solid #ccc; |
| 220 | 227 | } |
| 221 | 228 | |
| 229 | +.avatar--fullsize { | |
| 230 | + width: 100%; | |
| 231 | +} | |
| 232 | + | |
| 222 | 233 | .profile { |
| 223 | 234 | background: #fff; |
| 224 | 235 | padding: .5em; |
| 225 | 236 | border: 1px solid #eee; |
| 226 | 237 | } |
| 227 | 238 | |
| 228 | -.profile img { | |
| 229 | - width: 256px; | |
| 230 | - height: 256px; | |
| 231 | - border: 1px solid #eee; | |
| 232 | -} | |
| 233 | - | |
| 234 | 239 | .profile__info { |
| 235 | 240 | margin-left: .5em; |
| 236 | 241 | } |
| 237 | 242 | |
| @@ -280,14 +285,8 @@ | ||
| 280 | 285 | .hypercrop__canvas { |
| 281 | 286 | width: 100%; |
| 282 | 287 | } |
| 283 | 288 | |
| 284 | -.profile__follows img, .profile__followers img { | |
| 285 | - width: 40px; | |
| 286 | - height: 40px; | |
| 287 | - margin-right: 3px; | |
| 288 | - border: 1px solid #ccc; | |
| 289 | -} | |
| 290 | 289 | |
| 291 | 290 | |
| 292 | 291 | .git-table-wrapper { |
| 293 | 292 | max-height: 12em; |
Built with git-ssb-web