git ssb - lightbox styling alignment · Dominic/patchbay@c5c3dee2

Commit c5c3dee22f06cfc53a77ee54543cfc8abb5c4a90

lightbox styling alignment

mix irving committed on 2/1/2017, 10:50:20 AM
Parent: 5efc9453c068026844ade88a23f94fb58be520df

Files changed

modules_basic/avatar/edit.js	changed
modules_basic/avatar/edit.mcss	changed
modules_basic/message/confirm.js	changed
modules_core/external-confirm.js	changed
modules_core/external-confirm.mcss	added

modules_basic/avatar/edit.jsView
		@@ -17,14 +17,15 @@
17	17 …
18	18 …	function crop (d, cb) {
19	19 …	var canvas = hypercrop(h('img', {src: d}))
20	20 …
21		- return h('div.column.avatar_pic', [
	21 …	+ return h('AvatarEditor', [
	22 …	+ h('header', 'Click and drag to crop your avatar.'),
22	23 …	canvas,
23	24 …	//canvas.selection,
24		- h('div.row.avatar_pic__controls', [
25		- h('button', {'ev-click': () => cb(null, canvas.selection.toDataURL()) }, 'okay'),
26		- h('button', {'ev-click': () => cb(new Error('canceled')) }, 'cancel')
	25 …	+ h('section.actions', [
	26 …	+ h('button.cancel', {'ev-click': () => cb(new Error('canceled')) }, 'cancel'),
	27 …	+ h('button.okay', {'ev-click': () => cb(null, canvas.selection.toDataURL()) }, 'okay')
27	28 …	])
28	29 …	])
29	30 …	}
30	31 …
		@@ -88,9 +89,9 @@
88	89 …	)
89	90 …	var names = dictToCollection(namesRecord)
90	91 …
91	92 …	var lb = hyperlightbox()
92		-
	93 …	+
93	94 …	// TODO load this in, make this editable
94	95 …	var description = ''
95	96 …
96	97 …	var isPossibleUpdate = computed([name.new, avatar.new], (name, avatar) => {

modules_basic/avatar/edit.mcssView
		@@ -111,9 +111,9 @@
111	111 …
112	112 …	section.names {
113	113 …	header {
114	114 …	}
115		-
	115 …	+
116	116 …	section {
117	117 …	display: flex
118	118 …	flex-wrap: wrap
119	119 …
		@@ -158,4 +158,25 @@
158	158 …	}
159	159 …	}
160	160 …	}
161	161 …
	162 …	+AvatarEditor {
	163 …	+ header {
	164 …	+ font-weight: 600
	165 …	+ margin-bottom: .5rem
	166 …	+ }
	167 …	+
	168 …	+ section.actions {
	169 …	+ display: flex
	170 …	+ justify-content: flex-end
	171 …	+
	172 …	+ button.cancel {
	173 …	+
	174 …	+ }
	175 …	+
	176 …	+ button.okay {
	177 …	+ margin-right: 0
	178 …	+
	179 …	+ }
	180 …	+ }
	181 …	+}
	182 …	+

modules_basic/message/confirm.jsView
		@@ -60,13 +60,14 @@
60	60 …	if(ev.keyCode === 27) cancel.click() //escape
61	61 …	})
62	62 …
63	63 …	lb.show(h('MessageConfirm', [
64		- h('header -preview_description', h('h1', 'Preview')),
65		- h('section -message_preview', api.message_render(msg)),
66		- h('section -actions', [cancel, okay])
67		- ]
68		- ))
	64 …	+ h('header -preview_description', [
	65 …	+ h('h1', 'Preview')
	66 …	+ ]),
	67 …	+ h('section -message_preview', api.message_render(msg)),
	68 …	+ h('section -actions', [cancel, okay])
	69 …	+ ]))
69	70 …
70	71 …	okay.focus()
71	72 …	}
72	73 …	}

modules_core/external-confirm.jsView
		@@ -1,44 +1,51 @@
1		-var lightbox = require('hyperlightbox')
2		-var h = require('hyperscript')
3		-var open = require('open-external')
	1 …	+const lightbox = require('hyperlightbox')
	2 …	+const fs = require('fs')
	3 …	+const h = require('../h')
	4 …	+const open = require('open-external')
WritePreview
4	5 …
5		-exports.gives = 'external_confirm'
	6 …	+exports.gives = {
	7 …	+ external_confirm: true,
	8 …	+ mcss:true
	9 …	+}
6	10 …
7	11 …	exports.create = function (api) {
8		- return function (href) {
	12 …	+ return {
	13 …	+ external_confirm,
	14 …	+ mcss: () => fs.readFileSync(__filename.replace(/js$/, 'mcss'), 'utf8')
	15 …	+ }
	16 …	+
	17 …	+ function external_confirm (href) {
9	18 …	var lb = lightbox()
10	19 …	document.body.appendChild(lb)
11	20 …
12		- var okay = h('button', 'open', {onclick: function () {
13		- lb.remove()
14		- open(href)
15		- }})
	21 …	+ var okay = h('button.okay', {
	22 …	+ 'ev-click': () => {
	23 …	+ lb.remove()
	24 …	+ open(href)
	25 …	+ }},
	26 …	+ 'open'
	27 …	+ )
16	28 …
17		- var cancel = h('button', 'Cancel', {onclick: function () {
18		- lb.remove()
19		- }})
	29 …	+ var cancel = h('button.cancel', {
	30 …	+ 'ev-click': () => {
	31 …	+ lb.remove()
	32 …	+ }},
	33 …	+ 'cancel'
	34 …	+ )
20	35 …
21	36 …	okay.addEventListener('keydown', function (ev) {
22	37 …	if (ev.keyCode === 27) cancel.click() // escape
23	38 …	})
24	39 …
25		- lb.show(h('div.column',
26		- h('div', [
27		- h('div.title.row', [
28		- h('strong.row', [
29		- 'Do you want to open this external link in your default browser:'
30		- ])
31		- ]),
32		- h('div', [
33		- h('pre', href)
34		- ])
	40 …	+ lb.show(h('ExternalConfirm', [
	41 …	+ h('header', 'External link'),
	42 …	+ h('section.prompt', [
	43 …	+ h('div.question', 'Open this link in your external browser?'),
	44 …	+ h('pre.link', href)
35	45 …	]),
36		- h('div.row', [
37		- okay,
38		- cancel
39		- ])
40		- ))
	46 …	+ h('section.actions', [cancel, okay])
	47 …	+ ]))
41	48 …
42	49 …	okay.focus()
43	50 …	}
44	51 …	}

modules_core/external-confirm.mcssView
		@@ -1,0 +1,34 @@
	1 …	+ExternalConfirm {
	2 …	+ header {
	3 …	+ font-weight: 600
	4 …	+ margin-bottom: .5rem
	5 …	+ }
	6 …	+
	7 …	+ section.prompt {
	8 …	+ background: #fff
	9 …	+ padding: 1rem
	10 …	+ margin-bottom: 1rem
	11 …	+
	12 …	+ div.question{
	13 …	+
	14 …	+ }
	15 …	+
	16 …	+ pre.link {
	17 …	+
	18 …	+ }
	19 …	+ }
	20 …	+
	21 …	+ section.actions {
	22 …	+ display: flex
	23 …	+ justify-content: flex-end
	24 …	+
	25 …	+ button.cancel {
	26 …	+
	27 …	+ }
	28 …	+ button.okay {
	29 …	+ margin-right: 0
	30 …	+
	31 …	+ }
	32 …	+ }
	33 …	+}
	34 …	+

Built with git-ssb-web

Dominic / patchbay

Commit c5c3dee22f06cfc53a77ee54543cfc8abb5c4a90

lightbox styling alignment

Files changed