From: Jo-Philipp Wich <jow@openwrt.org>
Date: Mon, 4 Nov 2013 15:17:15 +0000 (+0000)
Subject: luci2: adapt views to changed luci2 framework
X-Git-Url: https://git.archive.openwrt.org/?p=project%2Fluci2%2Fui.git;a=commitdiff_plain;h=7b9f16e917fc75f2b27b11bbf382246bf38873bf

luci2: adapt views to changed luci2 framework
---

diff --git a/luci2/htdocs/luci2/template/network.diagnostics.htm b/luci2/htdocs/luci2/template/network.diagnostics.htm
index 4c82c7f..a04e5a9 100644
--- a/luci2/htdocs/luci2/template/network.diagnostics.htm
+++ b/luci2/htdocs/luci2/template/network.diagnostics.htm
@@ -3,13 +3,15 @@
 	<table style="width:auto">
 		<tr>
 			<td>
-				<select id="tool"></select>
+				<input type="text" id="host" value="openwrt.org" class="form-control" />
 			</td>
 			<td>
-				<input type="text" id="host" value="openwrt.org" />
-			</td>
-			<td>
-				<input type="button" class="cbi-button cbi-button-apply" id="run" value="<%:Test%>" />
+				<div class="input-group">
+					<select id="tool" class="form-control"></select>
+					<div class="input-group-btn">
+						<button type="button" class="btn btn-primary" id="run"><%:Test%></button>
+					</div>
+				</div>
 			</td>
 		</tr>
 	</table>
diff --git a/luci2/htdocs/luci2/template/status.dmesg.htm b/luci2/htdocs/luci2/template/status.dmesg.htm
index 592b1f0..ae05d03 100644
--- a/luci2/htdocs/luci2/template/status.dmesg.htm
+++ b/luci2/htdocs/luci2/template/status.dmesg.htm
@@ -1 +1 @@
-<textarea readonly="readonly" wrap="off" id="syslog"><%:Collecting data...%></textarea>
+<textarea readonly="readonly" wrap="off" id="syslog" class="form-control"><%:Collecting data...%></textarea>
diff --git a/luci2/htdocs/luci2/template/status.syslog.htm b/luci2/htdocs/luci2/template/status.syslog.htm
index 592b1f0..ae05d03 100644
--- a/luci2/htdocs/luci2/template/status.syslog.htm
+++ b/luci2/htdocs/luci2/template/status.syslog.htm
@@ -1 +1 @@
-<textarea readonly="readonly" wrap="off" id="syslog"><%:Collecting data...%></textarea>
+<textarea readonly="readonly" wrap="off" id="syslog" class="form-control"><%:Collecting data...%></textarea>
diff --git a/luci2/htdocs/luci2/template/system.software.htm b/luci2/htdocs/luci2/template/system.software.htm
index f34e2c4..5e27a93 100644
--- a/luci2/htdocs/luci2/template/system.software.htm
+++ b/luci2/htdocs/luci2/template/system.software.htm
@@ -1,52 +1,71 @@
-<div class="cbi-form" id="tabs" style="display:none">
-	<ul class="cbi-tabmenu">
-		<li><a href="#status"><%:Packages%></a></li>
-		<li><a href="#config"><%:Configuration%></a></li>
-	</ul>
-	<fieldset id="status" class="cbi-section-node">
-		<div class="cbi-value">
-			<label class="cbi-value-title"><%:Used space%></label>
-			<div class="cbi-value-field">
-				<div id="package_space" style="padding-top: 7px"></div>
+<ul class="nav nav-tabs">
+	<li class="active"><a href="#status" data-toggle="tab"><%:Packages%></a></li>
+	<li><a href="#config" data-toggle="tab"><%:Configuration%></a></li>
+</ul>
+
+<div class="tab-content">
+	<div class="tab-pane active" id="status">
+		<div class="form-horizontal">
+			<div class="form-group">
+				<label class="col-lg-2 control-label"><%:Used space%></label>
+				<div class="col-lg-5">
+					<div id="package_space" class="form-control-static"></div>
+				</div>
+				<div class="col-lg-5"></div>
 			</div>
-		</div>
-		<div class="cbi-value">
-			<label class="cbi-value-title"><%:Update package lists%></label>
-			<div class="cbi-value-field">
-				<input id="package_update" type="button" class="cbi-button cbi-button-reload" value="<%:Start update …%>" />
+			<div class="form-group">
+				<label class="col-lg-2 control-label"><%:Update package lists%></label>
+				<div class="col-lg-5">
+					<button id="package_update" type="button" class="btn btn-default"><%:Start update …%></button>
+				</div>
+				<div class="col-lg-5"></div>
 			</div>
-		</div>
-		<div class="cbi-value">
-			<label class="cbi-value-title"><%:Install package directly%></label>
-			<div class="cbi-value-field">
-				<div class="cbi-splitbutton">
-					<input id="package_url" type="text" class="cbi-input-text" placeholder="<%:Enter URL or name …%>"
-					/><img id="package_install" src="<%=resource%>/icons/cbi/apply.gif" class="cbi-button" title="<%:Install …%>" />
+			<div class="form-group">
+				<label class="col-lg-2 control-label"><%:Install package directly%></label>
+				<div class="col-lg-5">
+					<div class="input-group">
+						<input id="package_url" type="text" class="form-control" placeholder="<%:Enter URL or name …%>" />
+						<span class="input-group-btn">
+							<button id="package_install" type="button" class="btn btn-info">»</button>
+						</span>
+					</div>
 				</div>
+				<div class="col-lg-5"></div>
 			</div>
-		</div>
-		<div class="cbi-value">
-			<label class="cbi-value-title"><%:Filter packages%></label>
-			<div class="cbi-value-field">
-				<div class="cbi-splitbutton">
-					<input id="package_filter" type="text" class="cbi-input-text" placeholder="<%:Filter packages …%>"
-					/><img src="<%=resource%>/icons/cbi/find.gif" class="cbi-button" />
+			<div class="form-group">
+				<label class="col-lg-2 control-label"><%:Filter packages%></label>
+				<div class="col-lg-5">
+					<div class="input-group">
+						<input id="package_filter" type="text" class="form-control" placeholder="<%:Filter packages …%>" />
+						<span class="input-group-btn">
+							<button" type="button" class="btn btn-default">×</button>
+						</span>
+					</div>
+					<label><input type="checkbox" id="package_which" style="vertical-align: middle; margin-top: 0" /> <%:Display only installed packages%></label>
 				</div>
-				<label><input type="checkbox" id="package_which" style="vertical-align: middle; margin-top: 0" /> <%:Display only installed packages%></label>
+				<div class="col-lg-5"></div>
 			</div>
 		</div>
 
-		<div>
-			<input id="package_prev" type="button" class="cbi-button" value="« 0 - 0" />
-			<input id="package_next" type="button" class="cbi-button" value="0 - 0 »" />
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				<div class="btn-group">
+					<button id="package_prev" type="button" class="btn btn-default">« 0 - 0</button>
+					<button id="package_next" type="button" class="btn btn-default">0 - 0 »</button>
+				</div>
+			</div>
+
+			<div class="panel-body" id="package_table"></div>
 		</div>
+	</div>
 
-		<div id="package_table"></div>
-	</fieldset>
-	<div id="config">
-		<textarea style="width:100%"></textarea>
-		<div class="cbi-page-actions">
-			<input class="cbi-button cbi-button-save" type="button" value="<%:Save%>" />
+	<div class="tab-pane" id="config">
+		<div class="panel panel-default">
+			<textarea class="form-control"></textarea>
+		</div>
+		<div class="text-right">
+			<button class="btn btn-primary" type="button"><%:Save%></button>
 		</div>
 	</div>
+
 </div>
diff --git a/luci2/htdocs/luci2/template/system.startup.htm b/luci2/htdocs/luci2/template/system.startup.htm
index 6edf290..0d7ca80 100644
--- a/luci2/htdocs/luci2/template/system.startup.htm
+++ b/luci2/htdocs/luci2/template/system.startup.htm
@@ -1,18 +1,21 @@
-<fieldset class="cbi-map" id="maps">
-	<div>
-		<legend><%:Local Startup%></legend>
-		<div class="cbi-map-descr"><%:This is the content of /etc/rc.local. Insert your own commands here (in front of 'exit 0') to execute them at the end of the boot process.%></div>
-	</div>
-	<div>
-		<textarea id="rc_local" class="cbi-input-textarea" style="width:100%" rows="10"></textarea>
-		<div class="cbi-page-actions">
-			<input class="cbi-button cbi-button-save" type="button" value="<%:Save%>" />
+<ul class="nav nav-tabs">
+	<li class="active"><a href="#rclocal" data-toggle="tab"><%:Local Startup%></a></li>
+	<li><a href="#initscripts" data-toggle="tab"><%:Initscripts%></a></li>
+</ul>
+
+<div class="tab-content">
+	<div class="tab-pane active" id="rclocal">
+		<p><%:This is the content of /etc/rc.local. Insert your own commands here (in front of 'exit 0') to execute them at the end of the boot process.%></p>
+		<div class="panel panel-default">
+			<textarea id="rc_local" class="form-control" style="width:100%" rows="10"></textarea>
+		</div>
+		<div class="text-right">
+			<button type="button" class="btn btn-primary"><%:Save%></button>
 		</div>
 	</div>
 
-	<div>
-		<legend><%:Initscripts%></legend>
-		<div class="cbi-map-descr"><%:You can enable or disable installed init scripts here. Changes will applied after a device reboot. Warning: If you disable essential init scripts like "network", your device might become inaccessible!%></div>
+	<div class="tab-pane" id="initscripts">
+		<p><%:You can enable or disable installed init scripts here. Changes will applied after a device reboot. Warning: If you disable essential init scripts like "network", your device might become inaccessible!%></p>
+		<div id="init_table"></div>
 	</div>
-	<div id="init_table"></div>
-</fieldset>
+</div>
diff --git a/luci2/htdocs/luci2/template/system.upgrade.htm b/luci2/htdocs/luci2/template/system.upgrade.htm
index 6541c22..2dfe5b4 100644
--- a/luci2/htdocs/luci2/template/system.upgrade.htm
+++ b/luci2/htdocs/luci2/template/system.upgrade.htm
@@ -1,39 +1,53 @@
 <div class="cbi-form" id="tabs" style="display:none">
-	<ul class="cbi-tabmenu">
-		<li><a href="#actions"><%:Actions%></a></li>
-		<li><a href="#config"><%:Configuration%></a></li>
+	<ul class="nav nav-tabs">
+		<li class="active"><a data-toggle="tab" href="#actions"><%:Actions%></a></li>
+		<li><a data-toggle="tab" href="#config"><%:Configuration%></a></li>
 	</ul>
 
-	<div id="actions">
-		<h3><%:Backup / Restore%></h3>
-		<p><%:Click "Generate archive" to download a tar archive of the current configuration files. To reset the firmware to its initial state, click "Perform reset" (only possible with squashfs images).%></p>
-		<p>
-			<form action="/cgi-bin/luci-backup" method="post" style="display:inline">
-				<input type="hidden" name="sessionid" />
-				<input class="cbi-button cbi-button-apply" type="button" id="btn_backup" value="<%:Generate archive%>" />
-			</form>
-			<input class="cbi-button cbi-button-reset" type="button" id="btn_reset" value="<%:Perform reset%>" />
-		</p>
-		<br />
+	<div class="tab-content">
+		<div class="tab-pane active" id="actions">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title"><%:Backup / Restore%></h3>
+				</div>
+				<div class="panel-body">
+					<p><%:Click "Generate archive" to download a tar archive of the current configuration files. To reset the firmware to its initial state, click "Perform reset" (only possible with squashfs images).%></p>
+					<p>
+						<form action="/cgi-bin/luci-backup" method="post" style="display:inline">
+							<input type="hidden" name="sessionid" />
+							<input class="btn btn-primary" type="button" id="btn_backup" value="<%:Generate archive%>" />
+						</form>
+						<input class="btn btn-danger" type="button" id="btn_reset" value="<%:Perform reset%>" />
+					</p>
 
-		<p><%:To restore configuration files, you can upload a previously generated backup archive here.%></p>
-		<p>
-			<input class="cbi-button cbi-input-apply" type="button" id="btn_restore" value="<%:Upload archive...%>" />
-		</p>
-		<br />
+					<p><%:To restore configuration files, you can upload a previously generated backup archive here.%></p>
+					<p>
+						<input class="btn btn-primary" type="button" id="btn_restore" value="<%:Upload archive...%>" />
+					</p>
+				</div>
+			</div>
 
-		<h3><%:Flash new firmware image%></h3>
-		<p><%:Upload a sysupgrade-compatible image here to replace the running firmware. Check "Keep settings" to retain the current configuration (requires an OpenWrt compatible firmware image).%></p>
-		<p>
-			<input class="cbi-button cbi-input-apply" type="button" id="btn_flash" value="<%:Flash image...%>" />
-		</p>
-	</div>
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title"><%:Flash new firmware image%></h3>
+				</div>
+				<div class="panel-body">
+					<p><%:Upload a sysupgrade-compatible image here to replace the running firmware. Check "Keep settings" to retain the current configuration (requires an OpenWrt compatible firmware image).%></p>
+					<p>
+						<input class="btn btn-primary" type="button" id="btn_flash" value="<%:Flash image...%>" />
+					</p>
+				</div>
+			</div>
+		</div>
 
-	<div id="config">
-		<textarea style="width:100%"></textarea>
-		<div class="cbi-page-actions">
-			<input class="cbi-button cbi-button-save" type="button" id="btn_save" value="<%:Save%>" />
-			<input class="cbi-button cbi-button-apply" type="button" id="btn_list" value="<%:Show current backup file list …%>" />
+		<div class="tab-pane" id="config">
+			<div class="panel">
+				<textarea class="form-control"></textarea>
+			</div>
+			<div class="pull-right">
+				<input class="btn btn-primary" type="button" id="btn_save" value="<%:Save%>" />
+				<input class="btn btn-default" type="button" id="btn_list" value="<%:Show current backup file list …%>" />
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/luci2/htdocs/luci2/view/network.routes.js b/luci2/htdocs/luci2/view/network.routes.js
index 4c23a69..a1ed560 100644
--- a/luci2/htdocs/luci2/view/network.routes.js
+++ b/luci2/htdocs/luci2/view/network.routes.js
@@ -13,6 +13,7 @@ L.ui.view.extend({
                 caption:     L.tr('Static IPv4 Routes'),
                 anonymous:   true,
                 addremove:   true,
+                sortable:    true,
                 add_caption: L.tr('Add new route'),
                 remove_caption: L.tr('Remove route')
             });
@@ -61,6 +62,7 @@ L.ui.view.extend({
                 caption:     L.tr('Static IPv6 Routes'),
                 anonymous:   true,
                 addremove:   true,
+                sortable:    true,
                 add_caption: L.tr('Add new route'),
                 remove_caption: L.tr('Remove route')
             });
diff --git a/luci2/htdocs/luci2/view/network.switch.js b/luci2/htdocs/luci2/view/network.switch.js
index fa43134..bfe27c6 100644
--- a/luci2/htdocs/luci2/view/network.switch.js
+++ b/luci2/htdocs/luci2/view/network.switch.js
@@ -220,13 +220,13 @@ L.ui.view.extend({
 							used_vids[v] = true;
 						}
 
-						v = parseInt(v, 10);
-
-						if (isNaN(v))
+						if (val.match(/[^0-9]/))
 							return L.tr('Invalid VLAN ID');
 
-						if (v < 1 || v > max_vid)
-							return L.tr('VLAN ID must be value between %u and %u').format(1, max_vid);
+						val = parseInt(val, 10);
+
+						if (val < 1 || val > max_vid)
+							return L.tr('VLAN ID must be a value between %u and %u').format(1, max_vid);
 
 						return true;
 					}
@@ -282,26 +282,26 @@ L.ui.view.extend({
 				}
 			}
 
-			m.insertInto('#map');
-
-			self.repeat(function() {
-				return L.network.getSwitchStatus(swname).then(function(ports) {
-					for (var j = 0; j < ports.length; j++)
-					{
-						var s = L.tr('No link');
-						var d = '&#160;';
-
-						if (ports[j].link)
-						{
-							s = '%dbaseT'.format(ports[j].speed);
-							d = ports[j].full_duplex ? L.tr('Full-duplex') : L.tr('Half-duplex');
-						}
-
-						$('#portstatus-%s-%d'.format(swname, j))
-							.empty().append(s + '<br />' + d);
-					}
-				});
-			}, 5000);
+			return m.insertInto('#map').then(function() {
+                self.repeat(function() {
+                    return L.network.getSwitchStatus(swname).then(function(ports) {
+                        for (var j = 0; j < ports.length; j++)
+                        {
+                            var s = L.tr('No link');
+                            var d = '&#160;';
+
+                            if (ports[j].link)
+                            {
+                                s = '%dbaseT'.format(ports[j].speed);
+                                d = ports[j].full_duplex ? L.tr('Full-duplex') : L.tr('Half-duplex');
+                            }
+
+                            $('#portstatus-%s-%d'.format(swname, j))
+                                .empty().append(s + '<br />' + d);
+                        }
+                    });
+                }, 5000);
+            });
 		});
 	}
 });
diff --git a/luci2/htdocs/luci2/view/status.processes.js b/luci2/htdocs/luci2/view/status.processes.js
index a30a092..9c80d89 100644
--- a/luci2/htdocs/luci2/view/status.processes.js
+++ b/luci2/htdocs/luci2/view/status.processes.js
@@ -25,32 +25,29 @@ L.ui.view.extend({
                 }, {
                     key:    'pid',
                     format: function(v, n) {
-                        return $('<button />')
-                            .attr('disabled', !allow_signals)
-                            .addClass('cbi-button')
-                            .addClass('cbi-button-reload')
-                            .text(L.tr('Hang Up'))
-                            .click(function() { L.system.sendSignal(v, 1).then(status) });
-                    }
-                }, {
-                    key:    'pid',
-                    format: function(v, n) {
-                        return $('<button />')
-                            .attr('disabled', !allow_signals)
-                            .addClass('cbi-button')
-                            .addClass('cbi-button-remove')
-                            .text(L.tr('Terminate'))
-                            .click(function() { L.system.sendSignal(v, 15).then(status) });
-                    }
-                }, {
-                    key:    'pid',
-                    format: function(v, n) {
-                        return $('<button />')
-                            .attr('disabled', !allow_signals)
-                            .addClass('cbi-button')
-                            .addClass('cbi-button-reset')
-                            .text(L.tr('Kill'))
-                            .click(function() { L.system.sendSignal(v, 9).then(status); });
+                        return $('<div />')
+                            .addClass('btn-group')
+                            .append($('<button />')
+                                .addClass('btn btn-primary btn-sm dropdown-toggle')
+                                .attr('data-toggle', 'dropdown')
+                                .text(L.tr('Signal…')))
+                            .append($('<ul />')
+                                .addClass('dropdown-menu pull-right')
+                                .append($('<li />')
+                                    .append($('<a />')
+                                        .attr('href', '#')
+                                        .html('%s (<code>%s</code>)'.format(L.trc('UNIX signal', 'Reload'), 'HUP'))
+                                        .click(function(ev) { L.system.sendSignal(v, 1).then(status); ev.preventDefault(); })))
+                                .append($('<li />')
+                                    .append($('<a />')
+                                        .attr('href', '#')
+                                        .html('%s (<code>%s</code>)'.format(L.trc('UNIX signal', 'Terminate'), 'TERM'))
+                                        .click(function(ev) { L.system.sendSignal(v, 15).then(status); ev.preventDefault(); })))
+                                .append($('<li />')
+                                    .append($('<a />')
+                                        .attr('href', '#')
+                                        .html('%s (<code>%s</code>)'.format(L.trc('UNIX signal', 'Kill immediately'), 'KILL'))
+                                        .click(function(ev) { L.system.sendSignal(v, 9).then(status); ev.preventDefault(); }))))
                     }
                 } ]
             });
diff --git a/luci2/htdocs/luci2/view/system.admin.js b/luci2/htdocs/luci2/view/system.admin.js
index 5582688..c10cb3c 100644
--- a/luci2/htdocs/luci2/view/system.admin.js
+++ b/luci2/htdocs/luci2/view/system.admin.js
@@ -126,14 +126,14 @@ L.ui.view.extend({
                 .append($('<p />')
                     .text(L.tr('Paste the public key line into the field below and press "%s" to continue.').format(L.tr('Ok'))))
                 .append($('<p />')
+                    .text(L.tr('Unrecognized public key! Please add only RSA or DSA keys.'))
+                    .addClass('alert alert-danger')
+                    .hide())
+                .append($('<p />')
                     .append($('<input />')
                         .attr('type', 'text')
                         .attr('placeholder', L.tr('Paste key here'))
-                        .css('width', '100%')))
-                .append($('<p />')
-                    .text(L.tr('Unrecognized public key! Please add only RSA or DSA keys.'))
-                    .addClass('alert-message')
-                    .hide());
+                        .addClass('form-control')));
 
             L.ui.dialog(L.tr('Add new public key'), form, {
                 style: 'confirm',
@@ -148,7 +148,7 @@ L.ui.view.extend({
                     if (!key)
                     {
                         form.find('input').val('');
-                        form.find('.alert-message').show();
+                        form.find('.alert').show();
                         return;
                     }
 
@@ -183,29 +183,28 @@ L.ui.view.extend({
                     continue;
 
                 $('<div />')
-                    .addClass('cbi-input-dynlist')
+                    .addClass('input-group')
                     .append($('<input />')
+                        .addClass('form-control')
                         .attr('type', 'text')
                         .prop('readonly', true)
                         .click({ self: this, index: i }, this._show)
                         .val('%dBit %s - %s'.format(k.bits, k.type, k.comment || '?')))
-                    .append($('<img />')
-                        .attr('src', L.globals.resource + '/icons/cbi/remove.gif')
-                        .attr('title', L.tr('Remove public key'))
-                        .click({ self: this, div: div, index: i }, this._remove)
-                        .addClass('cbi-button'))
+                    .append($('<span />')
+                        .addClass('input-group-btn')
+                        .append($('<button />')
+                            .addClass('btn btn-danger')
+                            .attr('title', L.tr('Remove public key'))
+                            .text('–')
+                            .click({ self: this, div: div, index: i }, this._remove)))
                     .appendTo(div);
             }
 
             if (this._keys.length > 0)
                 $('<br />').appendTo(div);
 
-            $('<input />')
-                .attr('type', 'button')
-                .val(L.tr('Add public key …'))
+            L.ui.button(L.tr('Add public key …'), 'success')
                 .click({ self: this, div: div }, this._add)
-                .addClass('cbi-button')
-                .addClass('cbi-button-apply')
                 .appendTo(div);
         },
 
@@ -257,7 +256,8 @@ L.ui.view.extend({
         return L.system.getSSHKeys().then(function(keys) {
             var m = new L.cbi.Map('dropbear', {
                 caption:     L.tr('SSH Access'),
-                description: L.tr('Dropbear offers SSH network shell access and an integrated SCP server')
+                description: L.tr('Dropbear offers SSH network shell access and an integrated SCP server'),
+                tabbed:      true
             });
 
             var s1 = m.section(L.cbi.DummySection, '__password', {
diff --git a/luci2/htdocs/luci2/view/system.leds.js b/luci2/htdocs/luci2/view/system.leds.js
index b0d31ea..c19462d 100644
--- a/luci2/htdocs/luci2/view/system.leds.js
+++ b/luci2/htdocs/luci2/view/system.leds.js
@@ -33,8 +33,8 @@ L.ui.view.extend({
         });
 
         var s = m.section(L.cbi.TypedSection, 'led', {
-            caption:     function(sid) { return sid ? (this.fields.name.textvalue(sid) || L.tr('Unnamed LED')) : '' },
-            teasers:     [ 'sysfs', 'default', 'trigger', '_net_dev', 'mode', '_usb_dev', 'delayon', 'delayoff' ],
+            caption:     L.tr('LED Definitions'),
+            teasers:     [ 'name', 'sysfs', 'default', 'trigger', '_net_dev', 'mode', '_usb_dev', 'delayon', 'delayoff' ],
             collabsible: true,
             addremove:   true,
             add_caption: L.tr('Add new LED defintion'),
diff --git a/luci2/htdocs/luci2/view/system.software.js b/luci2/htdocs/luci2/view/system.software.js
index 9f208d3..65a86ea 100644
--- a/luci2/htdocs/luci2/view/system.software.js
+++ b/luci2/htdocs/luci2/view/system.software.js
@@ -1,4 +1,6 @@
 L.ui.view.extend({
+	title: L.tr('Package management'),
+
 	updateDiskSpace: function()
 	{
 		return L.system.getDiskInfo().then(function(info) {
@@ -109,14 +111,11 @@ L.ui.view.extend({
 					width:   '120px',
 					format: function(v, n) {
 						var inst = self.installedList[list[n][0]];
-						return $('<button />')
+						return L.ui.button(inst ? L.trc('Package state', 'Installed') : L.trc('Package state', 'Not installed'), inst ? 'success' : 'danger')
 							.css('width', '100%')
 							.attr('disabled', install_disabled)
 							.attr('pkgname', list[n][0])
 							.attr('installed', inst)
-							.addClass('cbi-button')
-							.addClass(inst ? 'cbi-button-apply' : 'cbi-button-reset')
-							.text(inst ? L.trc('Package state', 'Installed') : L.trc('Package state', 'Not installed'))
 							.click(function() {
 								self.installRemovePackage(this.getAttribute('pkgname'), this.getAttribute('installed') == 'true');
 							});
@@ -131,21 +130,21 @@ L.ui.view.extend({
 				$('#package_prev')
 					.attr('offset', offset - 100)
 					.attr('disabled', false)
-					.val('« %d - %d'.format(offset - 100 + 1, offset));
+					.text('« %d - %d'.format(offset - 100 + 1, offset));
 			else
 				$('#package_prev')
 					.attr('disabled', true)
-					.val('« %d - %d'.format(1, Math.min(100, list.total)));
+					.text('« %d - %d'.format(1, Math.min(100, list.total)));
 
 			if ((offset + 100) < list.total)
 				$('#package_next')
 					.attr('offset', offset + 100)
 					.attr('disabled', false)
-					.val('%d - %d »'.format(offset + 100 + 1, Math.min(offset + 200, list.total)));
+					.text('%d - %d »'.format(offset + 100 + 1, Math.min(offset + 200, list.total)));
 			else
 				$('#package_next')
 					.attr('disabled', true)
-					.val('%d - %d »'.format(list.total - (list.total % 100) + 1, list.total));
+					.text('%d - %d »'.format(list.total - (list.total % 100) + 1, list.total));
 
 			if (interactive)
 				L.ui.loading(false);
@@ -161,16 +160,16 @@ L.ui.view.extend({
 
 		return $.when(
 			L.opkg.getConfig().then(function(config) {
-				$('textarea')
+				$('#config textarea')
 					.attr('rows', (config.match(/\n/g) || [ ]).length + 1)
 					.val(config);
 
-				$('input.cbi-button-save')
+				$('#config button')
 					.click(function() {
-						var data = ($('textarea').val() || '').replace(/\r/g, '').replace(/\n?$/, '\n');
+						var data = ($('#config textarea').val() || '').replace(/\r/g, '').replace(/\n?$/, '\n');
 						L.ui.loading(true);
 						L.opkg.setConfig(data).then(function() {
-							$('textarea')
+							$('#config textarea')
 								.attr('rows', (data.match(/\n/g) || [ ]).length + 1)
 								.val(data);
 
@@ -181,8 +180,6 @@ L.ui.view.extend({
 			self.fetchInstalledList(),
 			self.updateDiskSpace()
 		).then(function() {
-			$('#tabs').show().tabs();
-
 			$('#package_prev, #package_next').click(function(ev) {
 				if (!this.getAttribute('disabled'))
 				{
@@ -192,9 +189,7 @@ L.ui.view.extend({
 			});
 
 			$('#package_filter').next().click(function(ev) {
-				if (this.getAttribute('src').indexOf('remove.gif') > -1)
-					$('#package_filter').val('');
-
+				$('#package_filter').val('');
 				self.fetchPackageList(0, true);
 			});
 
diff --git a/luci2/htdocs/luci2/view/system.startup.js b/luci2/htdocs/luci2/view/system.startup.js
index 7b52593..e00e74a 100644
--- a/luci2/htdocs/luci2/view/system.startup.js
+++ b/luci2/htdocs/luci2/view/system.startup.js
@@ -22,55 +22,49 @@ L.ui.view.extend({
                         key:     'start'
                     }, {
                         caption: L.tr('Initscript'),
-                        key:     'name',
-                        width:   '90%'
+                        key:     'name'
                     }, {
-                        caption: L.trc('Init script table heading', 'Enable'),
                         key:     'enabled',
-                        format: function(v, n) {
-                            return $('<button />')
-                                .attr('disabled', !allow_write)
-                                .attr('name', list[n].name)
-                                .addClass('cbi-button')
-                                .addClass(v ? 'cbi-button-apply' : 'cbi-button-reset')
-                                .text(v ? L.trc('Init script state', 'Enabled') : L.trc('Init script state', 'Disabled'))
-                                .click(function() {
-                                    L.ui.loading(true);
-                                    if (v)
-                                        L.system.initDisable(this.getAttribute('name')).then(redraw);
-                                    else
-                                        L.system.initEnable(this.getAttribute('name')).then(redraw);
-                                });
-                        }
-                    }, {
-                        caption: L.trc('Init script table heading', 'Restart'),
-                        key:     'enabled',
-                        format: function(v, n) {
-                            return $('<button />')
-                                .attr('disabled', !allow_write)
-                                .attr('name', list[n].name)
-                                .addClass('cbi-button')
-                                .addClass('cbi-button-reload')
-                                .text(L.trc('Init script action', 'Restart'))
-                                .click(function() {
-                                    L.ui.loading(true);
-                                    L.system.initRestart(this.getAttribute('name')).then(redraw)
-                                });
-                        }
-                    }, {
-                        caption: L.trc('Init script table heading', 'Stop'),
-                        key:     'enabled',
-                        format: function(v, n) {
-                            return $('<button />')
-                                .attr('disabled', !allow_write)
-                                .attr('name', list[n].name)
-                                .addClass('cbi-button')
-                                .addClass('cbi-button-remove')
-                                .text(L.trc('Init script action', 'Stop'))
-                                .click(function() {
-                                    L.ui.loading(true);
-                                    L.system.initStop(this.getAttribute('name')).then(redraw)
-                                });
+                        format:  function(v, n) {
+                            return [
+                                $('<div />')
+                                    .addClass('btn-group pull-right')
+                                    .append($('<button />')
+                                        .attr('disabled', !allow_write)
+                                        .attr('name', list[n].name)
+                                        .addClass('btn btn-sm')
+                                        .addClass(v ? 'btn-success' : 'btn-danger')
+                                        .text(v ? L.trc('Init script state', 'Enabled') : L.trc('Init script state', 'Disabled'))
+                                        .click(function() {
+                                            L.ui.loading(true);
+                                            if (v)
+                                                L.system.initDisable(this.getAttribute('name')).then(redraw);
+                                            else
+                                                L.system.initEnable(this.getAttribute('name')).then(redraw);
+                                        }))
+                                    .append($('<button />')
+                                        .addClass('btn btn-primary btn-sm dropdown-toggle')
+                                        .attr('data-toggle', 'dropdown')
+                                        .attr('disabled', !allow_write)
+                                        .text(L.tr('Action…')))
+                                    .append($('<ul />')
+                                        .addClass('dropdown-menu pull-right')
+                                        .append($('<li />')
+                                            .append($('<a />')
+                                                .attr('href', '#')
+                                                .text(L.tr('Reload'))
+                                                .click(function(ev) { L.system.initReload(v).then(redraw); ev.preventDefault(); })))
+                                        .append($('<li />')
+                                            .append($('<a />')
+                                                .attr('href', '#')
+                                                .text(L.tr('Restart'))
+                                                .click(function(ev) { L.system.initRestart(v).then(redraw); ev.preventDefault(); })))
+                                        .append($('<li />')
+                                            .append($('<a />')
+                                                .attr('href', '#')
+                                                .text(L.tr('Stop'))
+                                                .click(function(ev) { L.system.initStop(v).then(redraw); ev.preventDefault(); }))))
+                            ];
                         }
                     } ]
                 });
@@ -81,8 +75,6 @@ L.ui.view.extend({
                 L.ui.loading(false);
             }),
             L.system.getRcLocal().then(function(data) {
-                $('#maps').accordion({ heightStyle: 'content' });
-
                 $('textarea').val(data).attr('disabled', !allow_write);
                 $('input.cbi-button-save').attr('disabled', !allow_write).click(function() {
                     var data = ($('textarea').val() || '').replace(/\r/g, '').replace(/\n?$/, '\n');
diff --git a/luci2/htdocs/luci2/view/system.upgrade.js b/luci2/htdocs/luci2/view/system.upgrade.js
index 2df7f83..be8885b 100644
--- a/luci2/htdocs/luci2/view/system.upgrade.js
+++ b/luci2/htdocs/luci2/view/system.upgrade.js
@@ -222,6 +222,7 @@ L.ui.view.extend({
 								.css('width', '100%')
 								.attr('rows', list.length)
 								.prop('readonly', true)
+								.addClass('form-control')
 								.val(list.join('\n')),
 							{ style: 'close' }
 						);
diff --git a/luci2/htdocs/luci2/view/system.users.js b/luci2/htdocs/luci2/view/system.users.js
index ebf3751..6b30d30 100644
--- a/luci2/htdocs/luci2/view/system.users.js
+++ b/luci2/htdocs/luci2/view/system.users.js
@@ -94,6 +94,7 @@ L.ui.view.extend({
 		widget: function(sid)
 		{
             var t = $('<table />')
+                .addClass('table table-condensed table-hover')
                 .attr('id', this.id(sid))
                 .append($('<tr />')
                     .append($('<th />')
@@ -131,6 +132,7 @@ L.ui.view.extend({
                     {
                         $(r.insertCell(-1))
                             .append($('<input />')
+                                .addClass('form-control')
                                 .attr('type', 'radio')
                                 .attr('name', '%s_%s'.format(this.id(sid), this.choices[i][0]))
                                 .attr('value', j)
@@ -219,7 +221,7 @@ L.ui.view.extend({
 
     execute: function() {
         var self = this;
-        L.ui.listAvailableACLs().then(function(acls) {
+        return L.ui.listAvailableACLs().then(function(acls) {
             var m = new L.cbi.Map('rpcd', {
                 caption:     L.tr('Guest Logins'),
                 description: L.tr('Manage user accounts and permissions for accessing the LuCI ui.'),
@@ -227,14 +229,11 @@ L.ui.view.extend({
             });
 
             var s = m.section(L.cbi.TypedSection, 'login', {
-                caption:      function(sid) {
-                    var u = sid ? this.fields.username.textvalue(sid) : undefined;
-                    return u ? L.tr('Login "%s"').format(u) : L.tr('New login');
-                },
+                caption:      L.tr('Accounts'),
                 collabsible:  true,
                 addremove:    true,
-                add_caption:  L.tr('Add new user …'),
-                teasers:      [ '__shadow', '__acls' ]
+                add_caption:  L.tr('Add account …'),
+                teasers:      [ 'username', '__shadow', '__acls' ]
             });
 
             s.option(L.cbi.InputValue, 'username', {