3 files changed, 28 insertions, 13 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/form.js b/modules/luci-base/htdocs/luci-static/resources/form.js
index 9c59c650a3..917584bb82 100644
--- a/modules/luci-base/htdocs/luci-static/resources/form.js
+++ b/modules/luci-base/htdocs/luci-static/resources/form.js
@@ -1201,7 +1201,7 @@ var CBITableSection = CBITypedSection.extend({
 			L.dom.append(tdEl.lastElementChild, [
 				E('div', {
 					'title': _('Drag to reorder'),
-					'class': 'cbi-button drag-handle center',
+					'class': 'btn cbi-button drag-handle center',
 					'style': 'cursor:move'
 				}, '☰')
 			]);
@@ -1644,7 +1644,16 @@ var CBIValue = CBIAbstractValue.extend({
 			if (typeof(this.title) === 'string' && this.title !== '') {
 				optionEl.appendChild(E('label', {
 					'class': 'cbi-value-title',
-					'for': 'widget.cbid.%s.%s.%s'.format(config_name, section_id, this.option)
+					'for': 'widget.cbid.%s.%s.%s'.format(config_name, section_id, this.option),
+					'click': function(ev) {
+						var node = ev.currentTarget,
+						    elem = node.nextElementSibling.querySelector('#' + node.getAttribute('for')) || node.nextElementSibling.querySelector('[data-widget-id="' + node.getAttribute('for') + '"]');
+
+						if (elem) {
+							elem.click();
+							elem.focus();
+						}
+					}
 				},
 				this.titleref ? E('a', {
 					'class': 'cbi-title-ref',
diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js
index 8d056ec03d..fd4c584886 100644
--- a/modules/luci-base/htdocs/luci-static/resources/luci.js
+++ b/modules/luci-base/htdocs/luci-static/resources/luci.js
@@ -2984,14 +2984,14 @@
 					1: [ _('Apply unchecked') ]
 				}, {
 					classes: {
-						0: 'cbi-button cbi-button-apply important',
-						1: 'cbi-button cbi-button-negative important'
+						0: 'btn cbi-button cbi-button-apply important',
+						1: 'btn cbi-button cbi-button-negative important'
 					},
 					click: L.ui.createHandlerFn(this, 'handleSaveApply')
 				}).render() : E([]);
 
 				if (this.handleSaveApply || this.handleSave || this.handleReset) {
-					footer.appendChild(E('div', { 'class': 'cbi-page-actions' }, [
+					footer.appendChild(E('div', { 'class': 'cbi-page-actions control-group' }, [
 						saveApplyBtn, ' ',
 						this.handleSave ? E('button', {
 							'class': 'cbi-button cbi-button-save',
diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index 4458573601..0e196df4b0 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -218,6 +218,7 @@ var UICheckbox = UIElement.extend({
 	},
 
 	render: function() {
+		var id = 'cb%08x'.format(Math.random() * 0xffffffff);
 		var frameEl = E('div', {
 			'id': this.options.id,
 			'class': 'cbi-checkbox'
@@ -231,21 +232,24 @@ var UICheckbox = UIElement.extend({
 			}));
 
 		frameEl.appendChild(E('input', {
-			'id': this.options.id ? 'widget.' + this.options.id : null,
+			'id': id,
 			'name': this.options.name,
 			'type': 'checkbox',
 			'value': this.options.value_enabled,
-			'checked': (this.value == this.options.value_enabled) ? '' : null
+			'checked': (this.value == this.options.value_enabled) ? '' : null,
+			'data-widget-id': this.options.id ? 'widget.' + this.options.id : null
 		}));
 
+		frameEl.appendChild(E('label', { 'for': id }));
+
 		return this.bind(frameEl);
 	},
 
 	bind: function(frameEl) {
 		this.node = frameEl;
 
-		this.setUpdateEvents(frameEl.lastElementChild, 'click', 'blur');
-		this.setChangeEvents(frameEl.lastElementChild, 'change');
+		this.setUpdateEvents(frameEl.lastElementChild.previousElementSibling, 'click', 'blur');
+		this.setChangeEvents(frameEl.lastElementChild.previousElementSibling, 'change');
 
 		L.dom.bindClassInstance(frameEl, this);
 
@@ -253,7 +257,7 @@ var UICheckbox = UIElement.extend({
 	},
 
 	isChecked: function() {
-		return this.node.lastElementChild.checked;
+		return this.node.lastElementChild.previousElementSibling.checked;
 	},
 
 	getValue: function() {
@@ -263,7 +267,7 @@ var UICheckbox = UIElement.extend({
 	},
 
 	setValue: function(value) {
-		this.node.lastElementChild.checked = (value == this.options.value_enabled);
+		this.node.lastElementChild.previousElementSibling.checked = (value == this.options.value_enabled);
 	}
 });
 
@@ -1342,7 +1346,7 @@ var UIDynamicList = UIElement.extend({
 			});
 
 			dl.lastElementChild.appendChild(inputEl);
-			dl.lastElementChild.appendChild(E('div', { 'class': 'cbi-button cbi-button-add' }, '+'));
+			dl.lastElementChild.appendChild(E('div', { 'class': 'btn cbi-button cbi-button-add' }, '+'));
 
 			if (this.options.datatype || this.options.validate)
 				L.ui.addValidator(inputEl, this.options.datatype || 'string',
@@ -2536,10 +2540,12 @@ return L.Class.extend({
 				L.dom.content(i, [ _('Unsaved Changes'), ': ', n ]);
 				i.classList.add('flash');
 				i.style.display = '';
+				document.dispatchEvent(new CustomEvent('uci-new-changes'));
 			}
 			else {
 				i.classList.remove('flash');
 				i.style.display = 'none';
+				document.dispatchEvent(new CustomEvent('uci-clear-changes'));
 			}
 		},
 
@@ -2869,7 +2875,7 @@ return L.Class.extend({
 		var arg_offset = arguments.length - 2;
 
 		return Function.prototype.bind.apply(function() {
-			var t = arguments[arg_offset].target;
+			var t = arguments[arg_offset].currentTarget;
 
 			t.classList.add('spinning');
 			t.disabled = true;