git ssb - Use checkbox for rename form · cel/git-ssb-web@932030b6

Reset form on pressing escape

Charles Lehner committed on 3/26/2016, 9:06:18 PM
Parent: 41444b07037d09738d6ca7efa64afde5b9d01433

index.js	changed
static/styles.css	changed

index.jsView
		@@ -111,10 +111,12 @@
111	111	function renderNameForm(enabled, id, name, action, inputId, title, header) {
112	112	if (!inputId) inputId = action
113	113	return '<form class="petname" action="" method="post">' +
114	114	(enabled ?
115		- '<input name="name" id="' + inputId + '" class="name" value="' +
116		- escapeHTML(name) + '" />' +
	115	+ '<input type="checkbox" class="name-checkbox" id="' + inputId + '" ' +
	116	+ 'onfocus="this.form.name.focus()" />' +
	117	+ '<input name="name" class="name" value="' + escapeHTML(name) + '" ' +
	118	+ 'onkeyup="if (event.keyCode == 27) this.form.reset()" />' +
117	119	'<input type="hidden" name="action" value="' + action + '">' +
118	120	'<input type="hidden" name="id" value="' +
119	121	escapeHTML(id) + '">' +
120	122	'<label class="name-toggle" for="' + inputId + '" ' +

static/styles.cssView
		@@ -106,29 +106,30 @@
106	106	}
107	107
108	108	.name {
109	109	font-size: inherit;
110		- width: 0;
111		- opacity: 0;
112		-}
113		-
114		-.name:focus {
115	110	margin-left: 1ex;
116	111	width: 20em;
117		- opacity: 1;
118	112	}
119	113
120		-.name:focus ~ h2 :last-child,
121		-.name:focus ~ h3,
122		-.name:not(:focus) ~ .name-btn:not(:active) {
123		- display: none;
124		-}
125		-
126	114	.name-toggle {
127	115	font-size: 1.3em;
128	116	cursor: pointer;
	117	+ margin-left: .25ex;
129	118	}
130	119
	120	+.name-checkbox {
	121	+ position: absolute;
	122	+ opacity: 0;
	123	+}
	124	+
	125	+.name-checkbox:checked ~ h2 :last-child,
	126	+.name-checkbox:checked ~ h3,
	127	+.name-checkbox:not(:checked) ~ .name,
	128	+.name-checkbox:not(:checked) ~ .name-btn {
	129	+ display: none;
	130	+}
	131	+
131	132	.clone-url {
132	133	font-size: small;
133	134	color: #666;
134	135	padding: .3em 1ex;

cel / git-ssb-web