git ssb - copy in improvements from patch-profile

Commit 95947f0ca5c8eebaaa8fa01239dc409edfa01d95

copy in improvements from patch-profile

mix irving committed on 9/20/2017, 3:41:43 AM
Parent: 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.jsView
		@@ -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
WritePreview
	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.mcssView
		@@ -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.mcssView
		@@ -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.mcssView
		@@ -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.mcssView
		@@ -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 …	+

app/styles/mixins.jsView
		@@ -21,8 +21,17 @@
21	21 …	$textSubtle {
22	22 …	color: gray
23	23 …	}
24	24 …
	25 …	+$colorPrimary {
	26 …	+ color: white
	27 …	+ background-color: #3dc8c3
	28 …	+
	29 …	+ (a) {
	30 …	+ color: #5c6bc0
	31 …	+ }
	32 …	+}
	33 …	+
25	34 …	$backgroundPrimary {
26	35 …	background-color: #50aadf
27	36 …	}
28	37 …

Built with git-ssb-web

Dominic / patchbay

Commit 95947f0ca5c8eebaaa8fa01239dc409edfa01d95

copy in improvements from patch-profile

Files changed