Commit 95947f0ca5c8eebaaa8fa01239dc409edfa01d95
copy in improvements from patch-profile
mix irving committed on 9/20/2017, 3:41:43 AMParent: 9cfd9544eab2af7e70d57a32b331156893817f51
Files changed
about/html/edit.js | changed |
about/html/edit.mcss | changed |
app/html/external-confirm.mcss | changed |
app/styles/mcss/lightbox.mcss | changed |
app/styles/mcss/button.mcss | added |
app/styles/mixins.js | changed |
about/html/edit.js | ||
---|---|---|
@@ -67,9 +67,9 @@ | ||
67 | 67 … | }) |
68 | 68 … | ) |
69 | 69 … | var names = dictToCollection(namesRecord) |
70 | 70 … | |
71 | - var lb = hyperlightbox() | |
71 … | + var lightbox = hyperlightbox() | |
72 | 72 … | |
73 | 73 … | var isPossibleUpdate = computed([name.new, avatar.new], (name, avatar) => { |
74 | 74 … | return name || avatar.link |
75 | 75 … | }) |
@@ -98,9 +98,9 @@ | ||
98 | 98 … | }); |
99 | 99 … | }) |
100 | 100 … | |
101 | 101 … | return h('AboutEditor', [ |
102 | - h('Lightbox', lb), | |
102 … | + lightbox, | |
103 | 103 … | h('section.avatar', [ |
104 | 104 … | h('section', [ |
105 | 105 … | h('img', { src: avatarSrc }) |
106 | 106 … | ]), |
@@ -143,29 +143,63 @@ | ||
143 | 143 … | ]) |
144 | 144 … | ]) |
145 | 145 … | |
146 | 146 … | function dataUrlCallback (data) { |
147 | - var el = crop(data, (err, data) => { | |
147 … | + const cropCallback = (err, cropData) => { | |
148 | 148 … | if (err) throw err |
149 … | + if (!cropData) return lightbox.close() | |
149 | 150 … | |
150 | - if (data) { | |
151 | - var _data = dataurl.parse(data) | |
151 … | + var _data = dataurl.parse(cropData) | |
152 … | + api.sbot.async.addBlob(pull.once(_data.data), (err, hash) => { | |
153 … | + if (err) throw err // TODO check if this is safely caught by error catcher | |
152 | 154 … | |
153 | - api.sbot.async.addBlob(pull.once(_data.data), (err, hash) => { | |
154 | - if (err) throw err // TODO check if this is safely caught by error catcher | |
155 … | + avatar.new.set({ | |
156 … | + link: hash, | |
157 … | + size: _data.data.length, | |
158 … | + type: _data.mimetype, | |
159 … | + width: 512, | |
160 … | + height: 512 | |
161 … | + }) | |
162 … | + }) | |
163 … | + lightbox.close() | |
164 … | + } | |
155 | 165 … | |
156 | - avatar.new.set({ | |
157 | - link: hash, | |
158 | - size: _data.data.length, | |
159 | - type: _data.mimetype, | |
160 | - width: 512, | |
161 | - height: 512 | |
162 | - }) | |
163 | - }) | |
166 … | + const cropEl = Crop(data, cropCallback) | |
167 … | + lightbox.show(cropEl) | |
168 … | + } | |
169 … | + | |
170 … | + function Crop (data, cb) { | |
171 … | + var img = h('img', {src: data}) | |
172 … | + | |
173 … | + var crop = h('div') | |
174 … | + | |
175 … | + waitForImg() | |
176 … | + | |
177 … | + return h('div.cropper', [ | |
178 … | + crop, | |
179 … | + h('div.background') | |
180 … | + ]) | |
181 … | + | |
182 … | + function waitForImg () { | |
183 … | + // WEIRDNESS - if you invoke hypecrop before img is ready, | |
184 … | + // the canvas instantiates and draws nothing | |
185 … | + | |
186 … | + if (!img.height && !img.width) { | |
187 … | + return window.setTimeout(waitForImg, 100) | |
164 | 188 … | } |
165 | - lb.close() | |
166 | - }) | |
167 | - lb.show(el) | |
189 … | + | |
190 … | + var canvas = hypercrop(img) | |
191 … | + crop = ( | |
192 … | + h('PatchProfileCrop', [ | |
193 … | + h('header', 'click and drag to crop your image'), | |
194 … | + canvas, | |
195 … | + h('section.actions', [ | |
196 … | + h('Button', { 'ev-click': () => cb() }, 'Cancel'), | |
197 … | + h('Button -primary', { 'ev-click': () => cb(null, canvas.selection.toDataURL()) }, 'Okay') | |
198 … | + ]) | |
199 … | + ]) | |
200 … | + ) | |
201 … | + } | |
168 | 202 … | } |
169 | 203 … | |
170 | 204 … | function clearNewSelections () { |
171 | 205 … | name.new.set(null) |
@@ -194,17 +228,4 @@ | ||
194 | 228 … | } |
195 | 229 … | } |
196 | 230 … | } |
197 | 231 … | |
198 | -function crop (d, cb) { | |
199 | - var canvas = hypercrop(h('img', {src: d})) | |
200 | - | |
201 | - return h('AboutImageEditor', [ | |
202 | - h('header', 'Click and drag to crop your avatar.'), | |
203 | - canvas, | |
204 | - // canvas.selection, | |
205 | - h('section.actions', [ | |
206 | - h('button.cancel', { 'ev-click': () => cb(new Error('canceled')) }, 'cancel'), | |
207 | - h('button.okay', { 'ev-click': () => cb(null, canvas.selection.toDataURL()) }, 'okay') | |
208 | - ]) | |
209 | - ]) | |
210 | -} |
about/html/edit.mcss | ||
---|---|---|
@@ -1,40 +1,29 @@ | ||
1 | -AboutImageEditor { | |
2 | - header { | |
3 | - font-weight: 600 | |
4 | - margin-bottom: .5rem | |
5 | - } | |
1 … | +AboutEditor { | |
2 … | + position: relative | |
6 | 3 … | |
7 | - canvas { | |
8 | - margin: 0 auto | |
9 | - width: 100% | |
10 | - } | |
4 … | + margin-bottom: 2rem | |
11 | 5 … | |
12 | - section.actions { | |
13 | - display: flex | |
14 | - justify-content: flex-end | |
15 | - | |
16 | - button.cancel { | |
17 | - | |
18 | - } | |
19 | - | |
20 | - button.okay { | |
21 | - margin-right: 0 | |
22 | - | |
23 | - } | |
24 | - } | |
25 | -} | |
26 | - | |
27 | -AboutEditor { | |
28 | 6 … | display: flex |
29 | 7 … | flex-wrap: wrap |
30 | 8 … | justify-content: space-between |
31 | 9 … | |
32 | - margin-bottom: 2rem | |
10 … | + div.lightbox { | |
11 … | + div.lightbox__content { | |
12 … | + div.cropper { | |
13 … | + div.PatchProfileCrop {} | |
14 … | + div.background { | |
15 … | + position: fixed | |
16 … | + z-index: 98 | |
17 … | + top: 0 | |
18 … | + left: 0 | |
33 | 19 … | |
34 | - section.Lightbox { | |
35 | - position: absolute | |
36 | - z-index: 40 | |
20 … | + width: 100% | |
21 … | + height: 100% | |
22 … | + background-color: rgba(0, 0, 0, 0.5) | |
23 … | + } | |
24 … | + } | |
25 … | + } | |
37 | 26 … | } |
38 | 27 … | |
39 | 28 … | section.avatar { |
40 | 29 … | margin-right: 1rem |
@@ -192,4 +181,41 @@ | ||
192 | 181 … | } |
193 | 182 … | } |
194 | 183 … | } |
195 | 184 … | } |
185 … | + | |
186 … | +PatchProfileCrop { | |
187 … | + background: #f5f5f5 | |
188 … | + | |
189 … | + z-index: 99 | |
190 … | + position: absolute | |
191 … | + top: 0 | |
192 … | + left: 0 | |
193 … | + right: 0 | |
194 … | + | |
195 … | + | |
196 … | + overflow: auto | |
197 … | + max-width: 100% | |
198 … | + padding: 1rem | |
199 … | + border: 1px solid #eee | |
200 … | + border-radius: .2em | |
201 … | + | |
202 … | + display: flex | |
203 … | + flex-direction: column | |
204 … | + | |
205 … | + header { | |
206 … | + font-weight: 600 | |
207 … | + margin-bottom: .5rem | |
208 … | + } | |
209 … | + | |
210 … | + canvas { | |
211 … | + margin: 0 auto 1rem auto | |
212 … | + max-height: 80vh | |
213 … | + max-width: 100% | |
214 … | + } | |
215 … | + | |
216 … | + section.actions { | |
217 … | + display: flex | |
218 … | + justify-content: space-between | |
219 … | + } | |
220 … | +} | |
221 … | + |
app/html/external-confirm.mcss | ||
---|---|---|
@@ -13,9 +13,13 @@ | ||
13 | 13 … | |
14 | 14 … | } |
15 | 15 … | |
16 | 16 … | pre.link { |
17 | - | |
17 … | + background-color: #f5f5f5 | |
18 … | + color: #c121dc | |
19 … | + padding: .3rem | |
20 … | + white-space: pre-wrap | |
21 … | + word-wrap: break-word | |
18 | 22 … | } |
19 | 23 … | } |
20 | 24 … | |
21 | 25 … | section.actions { |
app/styles/mcss/lightbox.mcss | ||
---|---|---|
@@ -1,7 +1,8 @@ | ||
1 | -/* lightbox - used in message-confirm */ | |
1 … | +/* used in app.html.externalConfirm */ | |
2 … | +/* used in message.html.confirm */ | |
2 | 3 … | |
3 | -Lightbox { | |
4 … | +body { | |
4 | 5 … | div.lightbox { |
5 | 6 … | position: fixed |
6 | 7 … | left: 0px |
7 | 8 … | right: 0px |
app/styles/mcss/button.mcss | ||
---|---|---|
@@ -1,0 +1,37 @@ | ||
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 … | + $colorPrimary | |
19 … | + | |
20 … | + :hover { | |
21 … | + opacity: .9 | |
22 … | + } | |
23 … | + | |
24 … | + border: 1px solid #3dc8c3 | |
25 … | + } | |
26 … | + | |
27 … | + -showMore { | |
28 … | + width: 100% | |
29 … | + | |
30 … | + padding: .2rem 0 | |
31 … | + | |
32 … | + border-left: none | |
33 … | + border-right: none | |
34 … | + border-bottom: none | |
35 … | + } | |
36 … | +} | |
37 … | + |
Built with git-ssb-web